@model Phase1AcceptanceViewModel
@{
    ViewData["Title"] = "Phase 1 Acceptance Checklist";
}

<section class="context-header">
    <div class="context-title">
        <span class="eyebrow">Stability report</span>
        <strong>@(Model.ProjectName ?? "All projects")</strong>
    </div>
    <nav class="context-nav" aria-label="Acceptance navigation">
        @if (Model.ProjectID.HasValue)
        {
            <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.ProjectID">Project</a>
            <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.ProjectID">Timeline</a>
            <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.ProjectID">Warnings</a>
            <a asp-controller="Archives" asp-action="Index" asp-route-projectId="@Model.ProjectID">Archived Items</a>
        }
        <a asp-controller="Projects" asp-action="Index">Projects</a>
    </nav>
</section>

<div class="page-heading">
    <div>
        <p class="eyebrow">Phase 1U</p>
        <h1>Phase 1 Acceptance Checklist</h1>
        <p class="lead-text">A compact stability report for timeline, CRUD, archive, warnings, writer workflow, exports, and scenario readiness.</p>
    </div>
    <form method="get" class="timeline-filter">
        <select class="form-select" name="projectId" asp-items="Model.ProjectOptions">
            <option value="">First active project</option>
        </select>
        <button class="btn btn-outline-primary" type="submit">View report</button>
    </form>
</div>

<section class="acceptance-summary-grid">
    <article class="plain-card acceptance-summary pass">
        <span class="eyebrow">Pass</span>
        <strong>@Model.PassCount</strong>
    </article>
    <article class="plain-card acceptance-summary review">
        <span class="eyebrow">Needs review</span>
        <strong>@Model.ReviewCount</strong>
    </article>
    <article class="plain-card acceptance-summary blocked">
        <span class="eyebrow">Blocked</span>
        <strong>@Model.BlockedCount</strong>
    </article>
</section>

<section class="story-bible-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">Acceptance</p>
            <h2>Workflow Checks</h2>
        </div>
        <span class="soft-count">@Model.Items.Count check@(Model.Items.Count == 1 ? "" : "s")</span>
    </div>

    @if (!Model.Items.Any())
    {
        <p class="muted">No checklist data is available yet. Create a project to begin the Phase 1 acceptance pass.</p>
    }
    else
    {
        <div class="acceptance-check-list">
            @foreach (var group in Model.Items.GroupBy(x => x.AreaName))
            {
                <article class="acceptance-area">
                    <h3>@group.Key</h3>
                    <div class="acceptance-check-items">
                        @foreach (var item in group.OrderBy(x => x.SortOrder))
                        {
                            <div class="acceptance-check-item @item.Status.ToLowerInvariant()">
                                <span class="acceptance-status">@item.Status</span>
                                <div>
                                    <strong>@item.CheckName</strong>
                                    <p>@item.Detail</p>
                                </div>
                            </div>
                        }
                    </div>
                </article>
            }
        </div>
    }
</section>