@model PlotLine.ViewModels.WordCompanionHostViewModel
@{
    Layout = null;
    var statusText = Model.IsAuthenticated ? "Connected" : "Not signed in";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PlotDirector Companion</title>
    <link rel="stylesheet" href="~/css/word-companion.css" asp-append-version="true" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>
<body>
    <main class="word-companion-shell" data-authenticated="@Model.IsAuthenticated.ToString().ToLowerInvariant()">
        <header class="word-companion-header">
            <div>
                <h1>PlotDirector</h1>
                @if (Model.IsAuthenticated)
                {
                    <p class="word-companion-status" data-connection-status>@statusText</p>
                }
            </div>
            @if (Model.IsAuthenticated)
            {
                <p class="word-companion-user">Signed in as @Model.DisplayName</p>
            }
        </header>

        @if (!Model.IsAuthenticated)
        {
            <section class="word-companion-signed-out" aria-label="Sign in">
                <p>Sign in to access your PlotDirector projects and manuscript tools.</p>
                <ul>
                    <li>Scene sync</li>
                    <li>Structure sync</li>
                    <li>Companion tools</li>
                </ul>
                <a class="word-companion-sign-in word-companion-sign-in-primary" href="@Model.LoginUrl" target="_top">Sign In</a>
            </section>
        }
        else
        {
        <nav class="word-companion-tabs" aria-label="Companion sections">
            <button type="button" class="is-active" data-tab-button="scene" aria-selected="true">Scene</button>
            <button type="button" data-tab-button="links" aria-selected="false">Links</button>
            <button type="button" data-tab-button="structure" aria-selected="false">Structure</button>
            <button type="button" data-tab-button="diagnostics" aria-selected="false">Diagnostics</button>
        </nav>

        <section class="word-companion-tab-panel is-active" data-tab-panel="scene" aria-label="Scene">
            <section class="word-companion-section word-companion-connection" aria-label="Project and book selection">
                <div>
                    <label for="word-companion-project">Project</label>
                    <select id="word-companion-project" data-project-select disabled>
                        <option value="">Loading projects...</option>
                    </select>
                    <p class="word-companion-message" data-project-message></p>
                </div>
                <div>
                    <label for="word-companion-book">Book</label>
                    <select id="word-companion-book" data-book-select disabled>
                        <option value="">Select a project first</option>
                    </select>
                    <p class="word-companion-message" data-book-message></p>
                </div>
            </section>

            <section class="word-companion-section word-companion-current-scene" aria-label="Current Scene">
                <div class="word-companion-actions">
                    <button type="button" class="word-companion-primary-action" data-refresh-current-scene>Refresh Current Scene</button>
                    <button type="button" data-sync-scene-progress disabled>Sync Progress</button>
                </div>
                <p class="word-companion-message" data-document-message></p>
                <p class="word-companion-message" data-sync-status>No resolved PlotDirector scene.</p>

                <div class="word-companion-scene-card word-companion-scene-summary">
                    <div class="word-companion-title-row">
                        <span>Current Chapter</span>
                        <strong data-current-chapter>Not detected</strong>
                    </div>
                    <div class="word-companion-title-row">
                        <span>Current Scene</span>
                        <strong data-current-scene>Not detected</strong>
                    </div>
                    <div class="word-companion-badges">
                        <span class="word-companion-badge" data-plotdirector-scene-status>Not detected</span>
                        <span class="word-companion-badge" data-anchor-status>Not attached</span>
                        <span class="word-companion-badge">Scene Tracking: <strong data-scene-tracking-status>Manual</strong></span>
                    </div>
                </div>

                <div class="word-companion-metrics">
                    <div>
                        <span>Word Count</span>
                        <strong data-current-word-count>-</strong>
                    </div>
                    <div>
                        <span>Actual</span>
                        <strong data-plotdirector-actual-words>-</strong>
                    </div>
                    <div>
                        <span>Estimated</span>
                        <strong data-plotdirector-estimated-words>-</strong>
                    </div>
                    <div>
                        <span>Revision</span>
                        <strong data-plotdirector-revision-status>-</strong>
                    </div>
                    <div>
                        <span>Blocked</span>
                        <strong data-plotdirector-blocked-status>-</strong>
                    </div>
                    <div data-plotdirector-blocked-reason-row hidden>
                        <span>Blocked Reason</span>
                        <strong data-plotdirector-blocked-reason>-</strong>
                    </div>
                </div>

                <button type="button" data-attach-plotdirector-ids disabled>Attach PlotDirector IDs</button>
                <p class="word-companion-message" data-sync-note></p>
            </section>

            <section class="word-companion-section word-companion-create-link" data-chapter-create-link hidden aria-label="Chapter Create Link">
                <div class="word-companion-section-header">
                    <span>Chapter Create / Link</span>
                </div>
                <div class="word-companion-scene-card">
                    <div>
                        <span>Current Chapter</span>
                        <strong data-chapter-create-link-chapter>-</strong>
                    </div>
                </div>
                <div class="word-companion-actions">
                    <button type="button" data-create-plotdirector-chapter disabled>Create Chapter in PlotDirector</button>
                    <button type="button" data-link-existing-chapter disabled>Link to Existing Chapter</button>
                </div>
                <p class="word-companion-message" data-chapter-create-link-status></p>
            </section>

            <section class="word-companion-section word-companion-create-link" data-scene-create-link hidden aria-label="Scene Create Link">
                <div class="word-companion-section-header">
                    <span>Scene Create / Link</span>
                </div>
                <div class="word-companion-scene-card">
                    <div>
                        <span>Current Chapter</span>
                        <strong data-create-link-chapter>-</strong>
                    </div>
                    <div>
                        <span>Current Scene</span>
                        <strong data-create-link-scene>-</strong>
                    </div>
                </div>
                <div class="word-companion-actions">
                    <button type="button" data-create-plotdirector-scene disabled>Create Scene in PlotDirector</button>
                    <button type="button" data-link-existing-scene disabled>Link to Existing Scene</button>
                </div>
                <p class="word-companion-message" data-create-link-status></p>
            </section>

            <section class="word-companion-section word-companion-brief" data-writing-brief-block hidden aria-label="Writing Brief">
                <span>Writing Brief</span>
                <p data-writing-brief></p>
            </section>
        </section>

        <section class="word-companion-tab-panel" data-tab-panel="links" aria-label="Links" hidden>
            <section class="word-companion-section word-companion-link-groups" data-plotdirector-link-groups aria-label="Scene Links">
                <div class="word-companion-section-header">
                    <span>Scene Links</span>
                    <button type="button" data-save-scene-links disabled>Save Scene Links</button>
                </div>
                <p class="word-companion-message" data-scene-links-status>Link a PlotDirector scene first.</p>
                <p class="word-companion-link-context" data-links-editing-scene>Link a PlotDirector scene first.</p>
                <div>
                    <span>Characters</span>
                    <div class="word-companion-check-list" data-character-chips></div>
                </div>
                <div>
                    <span>Assets</span>
                    <div class="word-companion-check-list" data-asset-chips></div>
                </div>
                <div>
                    <label for="word-companion-primary-location">Primary Location</label>
                    <select id="word-companion-primary-location" data-primary-location-select disabled>
                        <option value="">None</option>
                    </select>
                </div>
            </section>
        </section>

        <section class="word-companion-tab-panel" data-tab-panel="structure" aria-label="Structure" hidden>
            <section class="word-companion-section word-companion-structure-preview" aria-label="Structure Sync Preview">
                <div class="word-companion-section-header">
                    <span>Structure Sync Preview</span>
                    <div class="word-companion-header-actions">
                        <button type="button" data-analyse-manuscript-structure disabled>Analyse Manuscript Structure</button>
                        <button type="button" data-apply-structure-sync disabled>Apply Structure Sync</button>
                    </div>
                </div>
                <p class="word-companion-message" data-structure-preview-status>Select a project and book to analyse manuscript structure.</p>
                <div class="word-companion-preview-groups" data-structure-preview-results>
                    <p>No preview generated.</p>
                </div>
            </section>

            <details class="word-companion-section word-companion-collapsible">
                <summary>Document Outline</summary>
                <div class="word-companion-outline" data-document-outline>
                    <p>No structure scanned.</p>
                </div>
            </details>
        </section>

        <section class="word-companion-tab-panel" data-tab-panel="diagnostics" aria-label="Diagnostics" hidden>
            <section class="word-companion-section">
                <div class="word-companion-section-header">
                    <span>Diagnostics</span>
                    <button type="button" data-run-diagnostics>Run Diagnostics</button>
                </div>
                <div class="word-companion-resolve-diagnostics" aria-label="Resolve diagnostics">
                    <div>
                        <span>Selected Project ID</span>
                        <strong data-resolve-project-id>-</strong>
                    </div>
                    <div>
                        <span>Selected Project</span>
                        <strong data-resolve-project-title>-</strong>
                    </div>
                    <div>
                        <span>Selected Book ID</span>
                        <strong data-resolve-book-id>-</strong>
                    </div>
                    <div>
                        <span>Selected Book</span>
                        <strong data-resolve-book-title>-</strong>
                    </div>
                    <div>
                        <span>Detected Chapter</span>
                        <strong data-resolve-detected-chapter>-</strong>
                    </div>
                    <div>
                        <span>Detected Scene</span>
                        <strong data-resolve-detected-scene>-</strong>
                    </div>
                    <div>
                        <span>Resolve Request Chapter</span>
                        <strong data-resolve-request-chapter>-</strong>
                    </div>
                    <div>
                        <span>Resolve Request Scene</span>
                        <strong data-resolve-request-scene>-</strong>
                    </div>
                    <div>
                        <span>Resolve Result</span>
                        <strong data-resolve-result>Not run</strong>
                    </div>
                    <div>
                        <span>Chapter ID</span>
                        <strong data-resolve-chapter-id>-</strong>
                    </div>
                    <div>
                        <span>Scene ID</span>
                        <strong data-resolve-scene-id>-</strong>
                    </div>
                    <div>
                        <span>Book ID</span>
                        <strong data-anchor-book-id>-</strong>
                    </div>
                    <div>
                        <span>Linked Chapter ID</span>
                        <strong data-anchor-chapter-id>-</strong>
                    </div>
                    <div>
                        <span>Linked Scene ID</span>
                        <strong data-anchor-scene-id>-</strong>
                    </div>
                    <div>
                        <span>Last Synced</span>
                        <strong data-sync-last-synced>-</strong>
                    </div>
                    <div>
                        <span>Sync Count</span>
                        <strong data-sync-plotdirector-count>-</strong>
                    </div>
                    <div>
                        <span>Anchor Type</span>
                        <strong data-diagnostic-anchor-type>Title Match</strong>
                    </div>
                    <div>
                        <span>Stored Scene ID</span>
                        <strong data-diagnostic-stored-scene-id>-</strong>
                    </div>
                    <div>
                        <span>Stored Chapter ID</span>
                        <strong data-diagnostic-stored-chapter-id>-</strong>
                    </div>
                    <div>
                        <span>Current Resolution Method</span>
                        <strong data-diagnostic-resolution-method>-</strong>
                    </div>
                    <div>
                        <span>Office Host</span>
                        <strong data-diagnostic-host>Unknown</strong>
                    </div>
                    <div>
                        <span>Office Platform</span>
                        <strong data-diagnostic-platform>Unknown</strong>
                    </div>
                    <div>
                        <span>Office Ready</span>
                        <strong data-diagnostic-ready>No</strong>
                    </div>
                    <div>
                        <span>Word API Available</span>
                        <strong data-diagnostic-word-api>No</strong>
                    </div>
                    <div>
                        <span>Last Scan Result</span>
                        <strong data-diagnostic-last-scan>Not run</strong>
                    </div>
                    <div>
                        <span>Last Error</span>
                        <strong data-diagnostic-last-error>-</strong>
                    </div>
                    <div>
                        <span>Paragraphs Found</span>
                        <strong data-diagnostic-paragraphs>-</strong>
                    </div>
                    <div>
                        <span>Heading 1 Found</span>
                        <strong data-diagnostic-heading1>-</strong>
                    </div>
                    <div>
                        <span>Heading 2 Found</span>
                        <strong data-diagnostic-heading2>-</strong>
                    </div>
                </div>
            </section>
        </section>

        <footer class="word-companion-footer">
            <span data-office-status>Word Companion loading</span>
        </footer>

        <div class="word-companion-compat-hooks" hidden>
            <span data-summary-connection></span>
            <span data-summary-project></span>
            <span data-summary-book></span>
            <button type="button" data-refresh-document></button>
            <button type="button" data-refresh-plotdirector-scene></button>
            <span data-sync-word-count></span>
            <section data-plotdirector-scene-details>
                <span data-plotdirector-scene-title></span>
            </section>
            <div data-location-chips></div>
        </div>

        <dialog class="word-companion-dialog" data-link-existing-dialog>
            <form method="dialog">
                <div class="word-companion-section-header">
                    <span>Link to Existing Scene</span>
                    <button type="button" data-link-dialog-cancel>Cancel</button>
                </div>
                <label for="word-companion-scene-search">Search scenes</label>
                <input id="word-companion-scene-search" type="search" data-link-scene-search autocomplete="off" />
                <div class="word-companion-scene-options" data-link-scene-options></div>
                <button type="button" data-link-selected-scene disabled>Link Scene</button>
                <p class="word-companion-message" data-link-dialog-status></p>
            </form>
        </dialog>

        <dialog class="word-companion-dialog" data-link-existing-chapter-dialog>
            <form method="dialog">
                <div class="word-companion-section-header">
                    <span>Link to Existing Chapter</span>
                    <button type="button" data-link-chapter-dialog-cancel>Cancel</button>
                </div>
                <label for="word-companion-chapter-search">Search chapters</label>
                <input id="word-companion-chapter-search" type="search" data-link-chapter-search autocomplete="off" />
                <div class="word-companion-scene-options" data-link-chapter-options></div>
                <button type="button" data-link-selected-chapter disabled>Link Chapter</button>
                <p class="word-companion-message" data-link-chapter-dialog-status></p>
            </form>
        </dialog>

        <dialog class="word-companion-dialog" data-create-scene-dialog>
            <form method="dialog">
                <div class="word-companion-section-header">
                    <span>Create PlotDirector Scene</span>
                </div>
                <p class="word-companion-dialog-copy">Create PlotDirector scene:</p>
                <strong data-create-dialog-scene>-</strong>
                <p class="word-companion-dialog-copy">within chapter:</p>
                <strong data-create-dialog-chapter>-</strong>
                <div class="word-companion-dialog-actions">
                    <button type="button" data-create-dialog-confirm>Create</button>
                    <button type="button" data-create-dialog-cancel>Cancel</button>
                </div>
            </form>
        </dialog>

        <dialog class="word-companion-dialog" data-create-chapter-dialog>
            <form method="dialog">
                <div class="word-companion-section-header">
                    <span>Create PlotDirector Chapter</span>
                </div>
                <p class="word-companion-dialog-copy">Create PlotDirector chapter:</p>
                <strong data-create-chapter-dialog-chapter>-</strong>
                <p class="word-companion-dialog-copy">in book:</p>
                <strong data-create-chapter-dialog-book>-</strong>
                <div class="word-companion-dialog-actions">
                    <button type="button" data-create-chapter-dialog-confirm>Create</button>
                    <button type="button" data-create-chapter-dialog-cancel>Cancel</button>
                </div>
            </form>
        </dialog>

        <dialog class="word-companion-dialog" data-apply-structure-sync-dialog>
            <form method="dialog">
                <div class="word-companion-section-header">
                    <span>Apply Structure Sync?</span>
                </div>
                <p class="word-companion-dialog-copy">This will:</p>
                <div class="word-companion-apply-summary" data-apply-structure-sync-summary></div>
                <p class="word-companion-dialog-copy">Manual review items will be skipped.</p>
                <div class="word-companion-dialog-actions">
                    <button type="button" data-apply-structure-sync-confirm>Apply</button>
                    <button type="button" data-apply-structure-sync-cancel>Cancel</button>
                </div>
            </form>
        </dialog>
        }
    </main>
    <script src="~/js/word-companion-host.js" asp-append-version="true"></script>
</body>
</html>
