@model SceneEditViewModel
@{
    var purposeLabels = Model.ScenePurposeTypes
        .Where(x => Model.SelectedPurposeTypeIds.Contains(x.ScenePurposeTypeID))
        .Select(x => x.PurposeName)
        .ToList();
    var threadCount = Model.ThreadEvents.Count;
    var dependencyCount = Model.DependenciesThisSceneNeeds.Count + Model.DependenciesNeedingThisScene.Count;
}

<article class="scene-inspector-v2-card" data-scene-summary-part="story">
    <div class="scene-inspector-v2-card-header">
        <div>
            <p class="eyebrow">Story</p>
            <div class="scene-inspector-v2-heading">
                <h3>Purpose and structure</h3>
                <help-icon key="sceneInspector.purpose" mode="inline" />
            </div>
        </div>
        <div class="scene-inspector-v2-actions">
            <div class="btn-group scene-inspector-v2-action-menu">
                <button type="button" class="btn btn-sm btn-outline-primary" data-scene-editor="purpose" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("ScenePurposeEditor", "Scenes", new { sceneId = Model.SceneID })">Edit Story</button>
                <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Show story editor actions</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <button type="button" class="dropdown-item" data-scene-editor="purpose" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("ScenePurposeEditor", "Scenes", new { sceneId = Model.SceneID })">Purpose</button>
                    <button type="button" class="dropdown-item" data-scene-editor="metrics" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneMetricsEditor", "Scenes", new { sceneId = Model.SceneID })">Metrics</button>
                    <button type="button" class="dropdown-item" data-scene-editor="threads" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneThreadsEditor", "Scenes", new { sceneId = Model.SceneID })">Threads</button>
                    <button type="button" class="dropdown-item" data-scene-editor="dependencies" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneDependenciesEditor", "Scenes", new { sceneId = Model.SceneID })">Dependencies</button>
                </div>
            </div>
        </div>
    </div>

    <div class="scene-inspector-v2-section">
        <span>Purpose</span>
        @if (purposeLabels.Any())
        {
            <div class="scene-inspector-v2-chip-row">
                @foreach (var purpose in purposeLabels)
                {
                    <span>@purpose</span>
                }
            </div>
        }
        else
        {
            <p class="muted">No purpose selected yet.</p>
        }
        @if (!string.IsNullOrWhiteSpace(Model.ScenePurposeNotes))
        {
            <p>@Model.ScenePurposeNotes</p>
        }
    </div>

    <div class="scene-inspector-v2-section">
        <span>Outcome</span>
        <p class="@(string.IsNullOrWhiteSpace(Model.SceneOutcomeNotes) ? "muted" : "")">@(string.IsNullOrWhiteSpace(Model.SceneOutcomeNotes) ? "No outcome has been captured yet." : Model.SceneOutcomeNotes)</p>
    </div>

    <div class="scene-inspector-v2-section">
        <span>Plot threads</span>
        <p>@threadCount thread event@(threadCount == 1 ? "" : "s") in this scene.</p>
    </div>

    <div class="scene-inspector-v2-section">
        <span>Dependencies</span>
        <p>@dependencyCount scene dependenc@(dependencyCount == 1 ? "y" : "ies") attached.</p>
    </div>

    <div class="scene-inspector-v2-section">
        <span>Metrics</span>
        @if (!Model.Metrics.Any())
        {
            <p class="muted">No active scene metrics are configured.</p>
        }
        else
        {
            <div class="scene-inspector-v2-metrics">
                @foreach (var metric in Model.Metrics)
                {
                    var effectiveMin = metric.MaxValue > metric.MinValue ? metric.MinValue : 0;
                    var effectiveMax = metric.MaxValue > metric.MinValue ? metric.MaxValue : 10;
                    var clampedValue = Math.Min(effectiveMax, Math.Max(effectiveMin, metric.Value));
                    var percent = effectiveMax == 0 ? 0 : (int)Math.Round(((double)clampedValue / effectiveMax) * 100);
                    <div class="scene-inspector-v2-metric-row" style="--metric-percent: @percent%;">
                        <span>@metric.MetricName</span>
                        <div class="scene-inspector-v2-metric-track"
                             role="progressbar"
                             aria-label="@metric.MetricName"
                             aria-valuemin="@effectiveMin"
                             aria-valuemax="@effectiveMax"
                             aria-valuenow="@clampedValue">
                            <i></i>
                        </div>
                        <strong>@metric.Value</strong>
                    </div>
                }
            </div>
        }
    </div>
</article>