@model ProjectDetailViewModel
@{
    ViewData["Title"] = Model.Project.ProjectName;
    ViewData["ProjectSection"] = "Overview";

    var summaryCards = new[]
    {
        ("Total Books", Model.Summary.TotalBooks.ToString("N0"), string.Empty),
        ("Published Books", Model.Summary.PublishedBooks.ToString("N0"), string.Empty),
        ("Drafting Books", Model.Summary.DraftingBooks.ToString("N0"), string.Empty),
        ("Planning Books", Model.Summary.PlanningBooks.ToString("N0"), string.Empty),
        ("Total Words", Model.Summary.TotalWords.ToString("N0"), string.Empty),
        ("Characters", Model.Summary.CharacterCount.ToString("N0"), string.Empty),
        ("Locations", Model.Summary.LocationCount.ToString("N0"), string.Empty),
        ("Active Plot Threads", Model.Summary.ActivePlotThreadCount.ToString("N0"), string.Empty),
        ("Issues to Review", Model.Summary.ContinuityWarningCount.ToString("N0"), Model.Summary.ContinuityWarningCount == 0 ? "dashboard-summary-calm" : Model.Summary.ContinuityWarningCount <= 10 ? "dashboard-summary-mild" : "dashboard-summary-attention")
    };
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-controller="Projects" asp-action="Index">Projects</a>
    <span>@Model.Project.ProjectName</span>
</nav>

<partial name="_ProjectSectionNav" model="Model.Project" />

<div class="page-heading pw-page-heading">
    <div>
        <p class="eyebrow">Series Dashboard</p>
        <h1>@Model.Project.ProjectName <help-icon key="projectDashboard.overview" /></h1>
        @if (!string.IsNullOrWhiteSpace(Model.Project.Description))
        {
            <p class="lead-text">@Model.Project.Description</p>
        }
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-action="Edit" asp-route-id="@Model.Project.ProjectID">Edit project</a>
        <a class="btn btn-primary" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
        <div class="dropdown pw-actions">
            <button class="btn pw-actions__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Actions
            </button>
            <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">Activity</a>
                @if (Model.Project.IsOwner)
                {
                    <a class="dropdown-item" asp-controller="ProjectCollaborators" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Collaborators</a>
                }
                @if (Model.Project.IsOwner)
                {
                    <a class="dropdown-item" asp-controller="Exports" asp-action="ProjectBackup" asp-route-projectId="@Model.Project.ProjectID">Download Project Backup</a>
                }
                <a class="dropdown-item" asp-controller="ProjectRestorePoints" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Restore Points</a>
                <a class="dropdown-item" asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
                @if (Model.Project.IsOwner)
                {
                    <div class="dropdown-divider"></div>
                    <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this project?&#10;&#10;Archived projects are hidden from your active workspace but remain stored within PlotDirector. Export your project first if you wish to maintain an external backup.">
                        <input type="hidden" name="id" value="@Model.Project.ProjectID" />
                        <button class="dropdown-item text-danger" type="submit">Archive Project</button>
                    </form>
                }
            </div>
        </div>
    </div>
</div>

@if (TempData["ProjectExportMessage"] is string projectExportMessage)
{
    <div class="alert alert-warning">@projectExportMessage</div>
}

<section class="mb-3" aria-label="Series summary">
    <div class="dashboard-summary-grid">
        @foreach (var card in summaryCards)
        {
            <div>
                <div class="card h-100 dashboard-summary-card @card.Item3">
                    <div class="card-body dashboard-summary-body">
                        <p class="eyebrow dashboard-summary-label">@card.Item1</p>
                        <strong class="dashboard-summary-value">@card.Item2</strong>
                    </div>
                </div>
            </div>
        }
    </div>
</section>

<section class="mb-3" aria-label="Series progress">
    <div class="card dashboard-progress-card">
        <div class="card-body dashboard-progress-body">
            <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap dashboard-progress-heading">
                <div>
                    <p class="eyebrow mb-1">Series Progress</p>
                    <h2 class="dashboard-progress-title">@Model.SeriesProgress.Percentage.ToString("0.#")% complete</h2>
                    <p class="muted mb-0">@Model.SeriesProgress.SupportingLine</p>
                </div>
                <span class="status-pill dashboard-progress-source">@Model.SeriesProgress.CalculationLabel</span>
            </div>
            <div class="progress dashboard-series-progress" role="progressbar" aria-label="Series progress" aria-valuenow="@Math.Round(Model.SeriesProgress.Percentage)" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width:@Model.SeriesProgress.Percentage.ToString("0.#")%"></div>
            </div>
        </div>
    </div>
</section>

<section class="mb-4" aria-label="Books">
    <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
        <h2 class="h4 mb-0">Books <help-icon key="projects.books" /></h2>
        <a class="btn btn-primary btn-sm" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
    </div>

    @if (!Model.Books.Any())
    {
        <div class="empty-panel">
            <h2>No books yet</h2>
            <p class="muted mb-0">Add the first book to begin shaping this series.</p>
        </div>
    }
    else
    {
        <div class="row g-4">
            @foreach (var book in Model.Books)
            {
                <div class="col-12 col-md-6 col-lg-4">
                    <article class="card h-100 overflow-hidden">
                        <div class="row g-0 h-100">
                            <div class="col-4 d-flex align-items-center justify-content-center" style="aspect-ratio:2 / 3; background:var(--plotline-soft);">
                                <img src="@book.CoverThumbnailPath"
                                     alt="Cover for @book.BookTitle"
                                     class="img-fluid"
                                     style="max-width:100%; max-height:100%; object-fit:contain;" />
                            </div>
                            <div class="col-8">
                                <div class="card-body h-100 d-flex flex-column">
                                    <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
                                        <div>
                                            <p class="eyebrow mb-1">Book @book.BookNumber</p>
                                            <div class="dashboard-book-title-block">
                                                <h3 class="h5 mb-1">
                                                    <a asp-controller="Books" asp-action="Details" asp-route-id="@book.BookID">@book.BookTitle</a>
                                                </h3>
                                                @if (!string.IsNullOrWhiteSpace(book.Subtitle))
                                                {
                                                    <p class="dashboard-book-subtitle mb-0">@book.Subtitle</p>
                                                }
                                            </div>
                                        </div>
                                        <span class="status-pill dashboard-status-pill @book.StatusCssClass">@book.Status</span>
                                    </div>

                                    <p class="mb-2">@book.WordCountLabel</p>
                                    @if (book.ProgressPercentage.HasValue)
                                    {
                                        var progressValue = Math.Round(book.ProgressPercentage.Value);
                                        <div class="progress mb-3" role="progressbar" aria-label="Book progress" aria-valuenow="@progressValue" aria-valuemin="0" aria-valuemax="100" style="height:8px;">
                                            <div class="progress-bar" style="width:@progressValue%"></div>
                                        </div>
                                    }

                                    <div class="d-flex gap-3 flex-wrap small text-muted mb-3">
                                        <span>@book.ChapterCount.ToString("N0") chapters</span>
                                        <span>@book.SceneCount.ToString("N0") scenes</span>
                                        <span>Modified @book.UpdatedDate.ToString("dd MMM yyyy")</span>
                                    </div>

                                    <div class="button-row mt-auto">
                                        <a class="btn btn-primary btn-sm" asp-controller="Books" asp-action="Details" asp-route-id="@book.BookID">Open Book</a>
                                        <a class="btn btn-outline-secondary btn-sm" asp-controller="Books" asp-action="Edit" asp-route-id="@book.BookID">Edit Book</a>
                                        <form asp-controller="Books" asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this book?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later.">
                                            <input type="hidden" name="id" value="@book.BookID" />
                                            <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                            <button class="btn btn-outline-danger btn-sm" type="submit">Archive</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            }
        </div>
    }
</section>

<section aria-label="Dashboard attention">
    <div class="row g-4">
        <div class="col-12 col-xl-7">
            <article class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
                        <h2 class="h5 mb-0">Recent Activity</h2>
                        <a class="btn btn-outline-secondary btn-sm" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">View all</a>
                    </div>

                    @if (!Model.RecentActivity.Any())
                    {
                        <p class="muted mb-0">No project activity has been recorded yet.</p>
                    }
                    else
                    {
                        <div class="list-group list-group-flush">
                            @foreach (var item in Model.RecentActivity)
                            {
                                <div class="list-group-item px-0">
                                    <div class="d-flex gap-3 align-items-start">
                                        <span class="status-pill flex-shrink-0">@item.IconLabel</span>
                                        <div class="flex-grow-1">
                                            <div class="d-flex align-items-start justify-content-between gap-2">
                                                <strong>@item.ActivityType @item.EntityType</strong>
                                                <span class="small text-muted">@item.TimeLabel</span>
                                            </div>
                                            @if (!string.IsNullOrWhiteSpace(item.EntityName))
                                            {
                                                <p class="mb-1">@item.EntityName</p>
                                            }
                                            @if (!string.IsNullOrWhiteSpace(item.Description))
                                            {
                                                <p class="muted mb-1">@item.Description</p>
                                            }
                                            <p class="small text-muted mb-0">@item.UserLabel</p>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>
            </article>
        </div>

        <div class="col-12 col-xl-5">
            <article class="card h-100">
                <div class="card-body">
                    <h2 class="h5 mb-3">Worth a look</h2>

                    @if (!Model.NeedsAttention.HasItems)
                    {
                        <p class="muted mb-0">Nothing urgent. This project is in good shape.</p>
                    }
                    else
                    {
                        @if (Model.NeedsAttention.Warnings.Any())
                        {
                            <div class="mb-3">
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-2">
                                    <h3 class="h6 mb-0">Continuity warnings</h3>
                                    <a class="small" asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Review</a>
                                </div>
                                @foreach (var warning in Model.NeedsAttention.Warnings)
                                {
                                    <div class="border-top py-2">
                                        <div class="d-flex align-items-center gap-2 mb-1">
                                            <span class="status-pill">@warning.SeverityName</span>
                                            <strong class="small">@warning.WarningTypeName</strong>
                                        </div>
                                        <p class="mb-1">@warning.Message</p>
                                        @if (!string.IsNullOrWhiteSpace(warning.LocationLabel))
                                        {
                                            <p class="small text-muted mb-0">@warning.LocationLabel</p>
                                        }
                                    </div>
                                }
                            </div>
                        }

                        @if (Model.NeedsAttention.Threads.Any())
                        {
                            <div class="mb-3">
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-2">
                                    <h3 class="h6 mb-0">Plot threads</h3>
                                    <a class="small" asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Review</a>
                                </div>
                                @foreach (var thread in Model.NeedsAttention.Threads)
                                {
                                    <div class="border-top py-2">
                                        <div class="d-flex align-items-center gap-2 mb-1">
                                            <span class="status-pill">@thread.AttentionLabel</span>
                                            <span class="small text-muted">Importance @thread.Importance</span>
                                        </div>
                                        <strong>@thread.ThreadTitle</strong>
                                        <p class="small text-muted mb-0">@thread.PlotLineName / @thread.ThreadStatusName</p>
                                    </div>
                                }
                            </div>
                        }

                        @if (Model.NeedsAttention.BookItems.Any())
                        {
                            <div class="mb-3">
                                <h3 class="h6 mb-2">Book setup</h3>
                                @foreach (var item in Model.NeedsAttention.BookItems)
                                {
                                    <div class="border-top py-2">
                                        <div class="d-flex align-items-center gap-2 mb-1">
                                            <span class="status-pill dashboard-attention-soft">@item.Label</span>
                                        </div>
                                        <a asp-controller="Books" asp-action="Details" asp-route-id="@item.BookID">@item.BookTitle</a>
                                        <p class="small text-muted mb-0">@item.Message</p>
                                    </div>
                                }
                            </div>
                        }

                        @if (Model.NeedsAttention.ShowMissingSchedulePrompt)
                        {
                            <div class="border-top py-2">
                                <div class="d-flex align-items-start justify-content-between gap-3">
                                    <div>
                                        <strong>No active writing schedule</strong>
                                        <p class="small text-muted mb-0">Create a schedule when you are ready to plan writing sessions.</p>
                                    </div>
                                    <a class="btn btn-outline-secondary btn-sm" asp-controller="Writer" asp-action="ScheduleSetup" asp-route-projectId="@Model.Project.ProjectID">Set up</a>
                                </div>
                            </div>
                        }

                        @if (Model.NeedsAttention.OverdueBooks.Any())
                        {
                            <div class="mt-3">
                                <h3 class="h6 mb-2">Overdue target dates</h3>
                                @foreach (var book in Model.NeedsAttention.OverdueBooks)
                                {
                                    <div class="border-top py-2">
                                        <a asp-controller="Books" asp-action="Details" asp-route-id="@book.BookID">@book.BookTitle</a>
                                        <p class="small text-muted mb-0">Target completion was @book.TargetCompletionDate.ToString("dd MMM yyyy")</p>
                                    </div>
                                }
                            </div>
                        }
                    }
                </div>
            </article>
        </div>
    </div>
</section>