@model TimelineSettingsViewModel
@{
    ViewData["Title"] = "Timeline Settings";
    ViewData["ProjectSection"] = "Timeline";
    var projectNavigation = new Project { ProjectID = Model.ProjectID, ProjectName = Model.ProjectName };
}

<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>

<partial name="_ProjectSectionNav" model="projectNavigation" />

<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 PlotDirector 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 <help-icon key="timeline.plotLines" /></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 and Story Health metric shape for this project.</p>
        <span asp-validation-for="SelectedMetricTypeIDs" class="text-danger"></span>
        @if (!Model.MetricOptions.Any())
        {
            <div class="empty-panel compact">
                <p>This project has no scene metrics yet.</p>
                <a class="btn btn-primary" asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@Model.ProjectID">Add default metrics</a>
            </div>
        }
        else
        {
            <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" />
}