@model ProjectSceneMetricsViewModel
@{
    ViewData["Title"] = "Scene Metrics";
}

<nav class="breadcrumb-trail">
    <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">@Model.Project.ProjectName</a>
    <span>Scene Metrics</span>
</nav>

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Project Settings</p>
        <h1>Scene Metrics <help-icon key="sceneMetrics.overview" /></h1>
        <p class="lead-text">Create and manage the metric sliders available when editing scenes.</p>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Settings" asp-route-projectId="@Model.Project.ProjectID">Timeline Settings</a>
        <a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Back to project</a>
    </div>
</div>

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

<section class="story-bible-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">Defaults</p>
            <h2>Add missing default metrics <help-icon key="sceneMetrics.defaultMetrics" /></h2>
        </div>
    </div>
    <p class="muted">Adds any missing core metrics for this project without duplicating existing metrics.</p>
    <form asp-action="AddMissingDefaults" method="post">
        <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
        <button class="btn btn-outline-primary" type="submit">Add missing default metrics</button>
    </form>
</section>

<section class="story-bible-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">New Metric</p>
            <h2>Add scene metric <help-icon key="sceneMetrics.addMetric" /></h2>
        </div>
    </div>
    <form asp-action="Save" method="post" class="row g-3">
        <input asp-for="NewMetric.ProjectID" type="hidden" name="ProjectID" />
        <div class="col-md-4">
            <label class="form-label" for="MetricName">Metric name</label>
            <input class="form-control" id="MetricName" name="MetricName" maxlength="100" required />
        </div>
        <div class="col-md-8">
            <label class="form-label" for="Description">Description</label>
            <input class="form-control" id="Description" name="Description" maxlength="500" />
        </div>
        <div class="col-md-2">
            <label class="form-label" for="MinValue">Min <help-icon key="sceneMetrics.fields.minValue" mode="inline" /></label>
            <input class="form-control" id="MinValue" name="MinValue" type="number" value="1" />
        </div>
        <div class="col-md-2">
            <label class="form-label" for="MaxValue">Max <help-icon key="sceneMetrics.fields.maxValue" mode="inline" /></label>
            <input class="form-control" id="MaxValue" name="MaxValue" type="number" value="10" />
        </div>
        <div class="col-md-2">
            <label class="form-label" for="DefaultValue">Default <help-icon key="sceneMetrics.fields.defaultValue" mode="inline" /></label>
            <input class="form-control" id="DefaultValue" name="DefaultValue" type="number" value="5" />
        </div>
        <div class="col-md-2">
            <label class="form-label" for="SortOrder">Sort order <help-icon key="sceneMetrics.fields.sortOrder" mode="inline" /></label>
            <input class="form-control" id="SortOrder" name="SortOrder" type="number" value="100" />
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <label class="form-check mb-2">
                <input class="form-check-input" name="IsActive" type="checkbox" value="true" checked />
                <span class="form-check-label">Active <help-icon key="sceneMetrics.fields.active" mode="inline" /></span>
            </label>
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button class="btn btn-primary w-100" type="submit">Add Metric</button>
        </div>
    </form>
</section>

<section class="story-bible-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">Available Metrics</p>
            <h2>Project scene metrics <help-icon key="sceneMetrics.projectMetrics" /></h2>
        </div>
        <span class="soft-count">@Model.Metrics.Count metric@(Model.Metrics.Count == 1 ? "" : "s")</span>
    </div>

    @if (!Model.Metrics.Any())
    {
        <div class="empty-panel compact">
            <p>This project has no scene metrics yet.</p>
            <form asp-action="AddMissingDefaults" method="post">
                <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                <button class="btn btn-primary" type="submit">Add default metrics</button>
            </form>
        </div>
    }
    else
    {
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Metric</th>
                        <th>Range</th>
                        <th>Default</th>
                        <th>Sort</th>
                        <th>Status</th>
                        <th>Values</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                @foreach (var metric in Model.Metrics)
                {
                    var canMove = metric.IsEnabledForProject || metric.ProjectID == Model.Project.ProjectID;
                    var canRemove = !metric.IsActive && metric.ProjectID == Model.Project.ProjectID && metric.ValueCount == 0;
                    <tr class="@(metric.IsActive ? "" : "text-muted")">
                        <td>
                            <strong>@metric.MetricName</strong>
                            @if (!string.IsNullOrWhiteSpace(metric.Description))
                            {
                                <div class="muted">@metric.Description</div>
                            }
                        </td>
                        <td>@metric.MinValue-@metric.MaxValue</td>
                        <td>@metric.DefaultValue</td>
                        <td>@metric.SortOrder</td>
                        <td>
                            <span class="status-pill">@(metric.IsActive ? "Active" : "Inactive")</span>
                        </td>
                        <td>@metric.ValueCount</td>
                        <td>
                            <div class="button-row justify-content-end">
                                <form asp-action="Move" method="post">
                                    <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                    <input type="hidden" name="id" value="@metric.MetricTypeID" />
                                    <input type="hidden" name="direction" value="Up" />
                                    <button class="btn btn-outline-secondary btn-sm" type="submit" disabled="@(!canMove)">Up</button>
                                </form>
                                <form asp-action="Move" method="post">
                                    <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                    <input type="hidden" name="id" value="@metric.MetricTypeID" />
                                    <input type="hidden" name="direction" value="Down" />
                                    <button class="btn btn-outline-secondary btn-sm" type="submit" disabled="@(!canMove)">Down</button>
                                </form>
                                <a class="btn btn-outline-secondary btn-sm" asp-action="Edit" asp-route-projectId="@Model.Project.ProjectID" asp-route-id="@metric.MetricTypeID">Edit</a>
                                <form asp-action="SetActive" method="post">
                                    <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                    <input type="hidden" name="id" value="@metric.MetricTypeID" />
                                    <input type="hidden" name="isActive" value="@(metric.IsActive ? "false" : "true")" />
                                    <button class="btn btn-outline-secondary btn-sm" type="submit">@(metric.IsActive ? "Deactivate" : "Reactivate")</button>
                                </form>
                                @if (canRemove)
                                {
                                    <form asp-action="Remove" method="post"
                                          data-confirm-title="Remove unused metric?"
                                          data-confirm-body="This metric has no scene values and can be removed safely."
                                          data-confirm-button-text="Remove"
                                          data-confirm-button-class="btn-danger">
                                        <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                        <input type="hidden" name="id" value="@metric.MetricTypeID" />
                                        <button class="btn btn-outline-danger btn-sm" type="submit">Remove</button>
                                    </form>
                                }
                            </div>
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
    }
</section>