@model LocationDetailViewModel
@{
    ViewData["Title"] = Model.Location.LocationName;
    var firstScene = Model.Scenes.FirstOrDefault();
}

<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.Project.ProjectID">@Model.Project.ProjectName</a>
    <a asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
    <span>@Model.Location.LocationName</span>
</nav>

<section class="context-header">
    <div class="context-title">
        <span class="eyebrow">Project context</span>
        <strong>@Model.Project.ProjectName</strong>
    </div>
    <nav class="context-nav" aria-label="Project navigation">
        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@firstScene?.SceneID">Show scene usage</a>
        <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
        <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
        <a asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
    </nav>
</section>

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Location detail</p>
        <h1>@Model.Location.LocationName</h1>
        <p class="muted">@Model.Location.LocationPath</p>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-action="Edit" asp-route-id="@Model.Location.LocationID">Edit</a>
        <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@firstScene?.SceneID">Back to timeline</a>
        <a class="btn btn-outline-primary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">All locations</a>
    </div>
</div>

<section class="edit-panel">
    <div class="row g-3">
        <div class="col-md-4">
            <p class="eyebrow">Type</p>
            <p>@(Model.Location.LocationTypeName ?? "Not set")</p>
        </div>
        <div class="col-md-4">
            <p class="eyebrow">Parent</p>
            <p>@(Model.Location.ParentLocationName ?? "Top level")</p>
        </div>
        <div class="col-12">
            <p class="eyebrow">Description</p>
            <p>@(Model.Location.Description ?? "No description yet.")</p>
        </div>
    </div>
</section>

<section class="edit-panel">
    <h2>Child locations</h2>
    @if (!Model.ChildLocations.Any())
    {
        <p class="muted">No child locations yet.</p>
    }
    else
    {
        <div class="location-chip-list">
            @foreach (var child in Model.ChildLocations)
            {
                <a class="location-chip" asp-action="Details" asp-route-id="@child.LocationID">@child.LocationName</a>
            }
        </div>
    }
</section>

<section class="edit-panel">
    <h2>Relationships</h2>
    @if (!Model.Relationships.Any())
    {
        <p class="muted">No relationships defined yet.</p>
    }
    else
    {
        <div class="location-relationship-list">
            @foreach (var relationship in Model.Relationships)
            {
                <div class="location-relationship-card">
                    <div>
                        <strong>@relationship.FromLocationName</strong>
                        <span>@relationship.RelationshipTypeName.ToLowerInvariant()</span>
                        <strong>@relationship.ToLocationName</strong>
                        @if (relationship.IsBidirectional)
                        {
                            <span class="location-badge">both ways</span>
                        }
                        <p class="muted">@relationship.Notes</p>
                    </div>
                    <form asp-action="ArchiveRelationship" method="post">
                        <input type="hidden" name="id" value="@relationship.LocationRelationshipID" />
                        <input type="hidden" name="returnLocationId" value="@Model.Location.LocationID" />
                        <button class="btn btn-outline-secondary btn-sm" type="submit">Archive</button>
                    </form>
                </div>
            }
        </div>
    }

    <form asp-action="AddRelationship" method="post" class="asset-create-form mt-3">
        <input asp-for="NewRelationship.ProjectID" type="hidden" name="ProjectID" />
        <input asp-for="NewRelationship.FromLocationID" type="hidden" name="FromLocationID" />
        <div class="row g-2">
            <div class="col-md-5">
                <label class="form-label" for="ToLocationID">To location</label>
                <select class="form-select form-select-sm" id="ToLocationID" name="ToLocationID" asp-items="Model.LocationOptions"></select>
            </div>
            <div class="col-md-4">
                <label class="form-label" for="LocationRelationshipTypeID">Relationship</label>
                <select class="form-select form-select-sm" id="LocationRelationshipTypeID" name="LocationRelationshipTypeID" asp-items="Model.RelationshipTypeOptions"></select>
            </div>
            <div class="col-md-3">
                <label class="form-label" for="Strength">Strength</label>
                <input class="form-control form-control-sm" id="Strength" name="Strength" type="number" min="1" max="10" />
            </div>
            <div class="col-12 location-flags">
                <label><input type="checkbox" name="IsBidirectional" value="true" /> Bidirectional</label>
                <label><input type="checkbox" name="CanHearNormalSpeech" value="true" /> Can hear normal speech</label>
                <label><input type="checkbox" name="CanHearLoudNoise" value="true" /> Can hear loud noise</label>
                <label><input type="checkbox" name="CanSeeMovement" value="true" /> Can see movement</label>
                <label><input type="checkbox" name="CanSeeClearly" value="true" /> Can see clearly</label>
                <label><input type="checkbox" name="CanTravelDirectly" value="true" /> Can travel directly</label>
            </div>
            <div class="col-12">
                <textarea class="form-control form-control-sm" name="Notes" rows="2" placeholder="Relationship notes"></textarea>
            </div>
        </div>
        <button class="btn btn-outline-primary btn-sm mt-2" type="submit">Add relationship</button>
    </form>
</section>

<section class="edit-panel">
    <h2>Used here</h2>
    <div class="row g-3">
        <div class="col-md-4">
            <h3>Scenes</h3>
            @foreach (var scene in Model.Scenes)
            {
                <p><strong>Scene @scene.SceneNumber</strong> <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@scene.SceneID">@scene.SceneTitle</a></p>
            }
            @if (!Model.Scenes.Any()) { <p class="muted">No scenes set here.</p> }
        </div>
        <div class="col-md-4">
            <h3>Characters</h3>
            @foreach (var character in Model.Characters)
            {
                <p><strong>@character.CharacterName</strong> <span class="muted">Scene @character.SceneNumber</span></p>
            }
            @if (!Model.Characters.Any()) { <p class="muted">No character placements yet.</p> }
        </div>
        <div class="col-md-4">
            <h3>Assets</h3>
            @foreach (var asset in Model.Assets)
            {
                <p><strong>@asset.AssetName</strong> <span class="muted">@asset.Description</span></p>
            }
            @if (!Model.Assets.Any()) { <p class="muted">No asset placements yet.</p> }
        </div>
    </div>
</section>