@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>
            <h3>Purpose and structure</h3>
        </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 range = Math.Max(1, metric.MaxValue - metric.MinValue);
                    var clampedValue = Math.Min(metric.MaxValue, Math.Max(metric.MinValue, metric.Value));
                    var percent = (int)Math.Round(((double)(clampedValue - metric.MinValue) / range) * 100);
                    <div class="scene-inspector-v2-metric-bar" style="--metric-percent: @percent%;" aria-label="@metric.MetricName value @metric.Value of @metric.MaxValue">
                        <span>@metric.MetricName</span>
                        <div aria-hidden="true"><i></i></div>
                        <strong>@metric.Value</strong>
                    </div>
                }
            </div>
        }
    </div>

    <div class="scene-inspector-v2-actions">
        <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 })">Manage purpose</button>
        <button type="button" class="btn btn-sm btn-outline-primary" data-scene-editor="metrics" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneMetricsEditor", "Scenes", new { sceneId = Model.SceneID })">Manage metrics</button>
        <button type="button" class="btn btn-sm btn-outline-primary" data-scene-editor="threads" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneThreadsEditor", "Scenes", new { sceneId = Model.SceneID })">Manage threads</button>
        <button type="button" class="btn btn-sm btn-outline-primary" data-scene-editor="dependencies" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneDependenciesEditor", "Scenes", new { sceneId = Model.SceneID })">Manage dependencies</button>
    </div>
</article>