@model TimelineSettingsViewModel
@{
    ViewData["Title"] = "Timeline Settings";
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-controller="Projects" asp-action="Index">Projects</a>
    <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.ProjectID">@Model.ProjectName</a>
    <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.ProjectID">Timeline</a>
    <span>Timeline Settings</span>
</nav>

<section class="context-header">
    <div class="context-title">
        <span class="eyebrow">Display configuration</span>
        <strong>@Model.ProjectName</strong>
    </div>
    <nav class="context-nav" aria-label="Timeline settings navigation">
        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.ProjectID">Open timeline</a>
        <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.ProjectID">Project</a>
    </nav>
</section>

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Timeline Settings</p>
        <h1>Configure timeline display</h1>
        <p class="lead-text">Choose which workspace sections PlotLine loads and renders for this project. Filters and saved views still work separately.</p>
    </div>
</div>

@if (TempData["TimelineSettingsMessage"] is string message)
{
    <div class="alert alert-info">@message</div>
}

<form asp-action="Settings" method="post" class="timeline-settings-form">
    <input type="hidden" asp-for="ProjectID" />
    <input type="hidden" asp-for="ProjectName" />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <section class="story-bible-section timeline-settings-section">
        <div class="story-bible-section-heading">
            <div>
                <p class="eyebrow">Sections</p>
                <h2>Workspace sections</h2>
            </div>
        </div>
        <div class="timeline-settings-grid">
            <label class="timeline-setting-card">
                <input asp-for="ShowSceneCards" />
                <span>
                    <strong>Scene Cards</strong>
                    <small>Shows books, chapters and scene cards in narrative order.</small>
                </span>
            </label>
            <label class="timeline-setting-card">
                <input asp-for="ShowMetricShape" />
                <span>
                    <strong>Metric Shape</strong>
                    <small>Shows emotional and pacing metrics beneath the scene timeline.</small>
                </span>
            </label>
            <label class="timeline-setting-card">
                <input asp-for="ShowPlotLines" />
                <span>
                    <strong>Plot Lines</strong>
                    <small>Shows plot thread activity across the scene timeline.</small>
                </span>
            </label>
            <label class="timeline-setting-card">
                <input asp-for="ShowStoryAssets" />
                <span>
                    <strong>Story Assets</strong>
                    <small>Shows clues, objects, evidence and state changes by scene.</small>
                </span>
            </label>
            <label class="timeline-setting-card">
                <input asp-for="ShowCharacterAppearances" />
                <span>
                    <strong>Character Appearances</strong>
                    <small>Shows which characters appear in each scene.</small>
                </span>
            </label>
            <label class="timeline-setting-card">
                <input asp-for="ShowWarnings" />
                <span>
                    <strong>Warning Indicators</strong>
                    <small>Shows continuity warning counts and warning-focused timeline cues.</small>
                </span>
            </label>
        </div>
    </section>

    <section class="story-bible-section timeline-settings-section">
        <div class="story-bible-section-heading">
            <div>
                <p class="eyebrow">Metric Shape</p>
                <h2>Timeline metrics</h2>
            </div>
            <span class="soft-count">@Model.MetricOptions.Count metrics</span>
        </div>
        <p class="muted">These metrics appear on the timeline graph only. Story Health can continue using the full metric set.</p>
        <span asp-validation-for="SelectedMetricTypeIDs" class="text-danger"></span>
        <div class="timeline-settings-grid timeline-metric-settings-grid">
            @foreach (var metric in Model.MetricOptions)
            {
                <label class="timeline-setting-card metric-setting-card">
                    <input type="checkbox" name="SelectedMetricTypeIDs" value="@metric.MetricTypeID" checked="@metric.IsSelected" />
                    <span>
                        <strong>@metric.MetricName</strong>
                        @if (!string.IsNullOrWhiteSpace(metric.Description))
                        {
                            <small>@metric.Description</small>
                        }
                    </span>
                </label>
            }
        </div>
    </section>

    <div class="button-row">
        <button class="btn btn-primary" type="submit">Save settings</button>
        <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.ProjectID">Back to timeline</a>
    </div>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}