@using ZB.MOM.WW.ScadaBridge.CentralUI.Services

@* Execution-Tree Node Detail Modal (Task 3).
   Opened from an execution-tree node double-click. Given an ExecutionId it
   loads that execution's audit rows and shows a list → per-row detail.
   Hand-rolled Bootstrap modal — no bootstrap.bundle.js modal API; visibility
   is pure Blazor state (the IsOpen bool) + the d-block/show CSS classes,
   mirroring AuditDrilldownDrawer's hand-rolled offcanvas. The per-row detail
   body is delegated to the shared <AuditEventDetail>. *@

@if (IsOpen)
{
    <div class="modal-backdrop fade show" data-test="execution-detail-backdrop"
         @onclick="HandleClose"></div>
    <div class="modal fade show d-block execution-detail-modal" tabindex="-1"
         data-test="execution-detail-modal" role="dialog"
         aria-modal="true" aria-labelledby="execution-detail-modal-title"
         @onkeydown="HandleKeyDown">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <div class="text-muted small text-uppercase">Execution</div>
                        <h5 id="execution-detail-modal-title"
                            class="modal-title mb-0 d-flex align-items-baseline gap-2">
                            <span class="font-monospace">Execution @ShortExecutionId()</span>
                            @if (!_loading && _error is null)
                            {
                                <span class="badge rounded-pill text-bg-secondary fw-normal"
                                      data-test="execution-detail-row-count">
                                    @_rows.Count @(_rows.Count == 1 ? "row" : "rows")
                                </span>
                            }
                        </h5>
                    </div>
                    <button type="button" class="btn-close" aria-label="Close"
                            data-test="execution-detail-close"
                            @onclick="HandleClose"></button>
                </div>

                <div class="modal-body small">
                    @if (_loading)
                    {
                        <div class="text-muted py-4 text-center" data-test="execution-detail-loading">
                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                            Loading execution rows…
                        </div>
                    }
                    else if (_error is not null)
                    {
                        <div class="alert alert-danger mb-0" role="alert"
                             data-test="execution-detail-error">
                            @_error
                        </div>
                    }
                    else if (_rows.Count == 0)
                    {
                        <div class="text-muted py-4 text-center" data-test="execution-detail-empty">
                            This execution emitted no audit rows.
                        </div>
                    }
                    else if (_selectedRow is not null)
                    {
                        @* Detail view — shared single-row body. *@
                        @if (_rows.Count > 1)
                        {
                            <button type="button"
                                    class="btn btn-link btn-sm px-0 mb-2 execution-detail-back-link"
                                    data-test="execution-detail-back"
                                    @onclick="BackToList">
                                &larr; Back to rows
                            </button>
                        }
                        <AuditEventDetail Event="_selectedRow" />
                    }
                    else
                    {
                        @* List view — one button per audit row. *@
                        <div class="list-group execution-detail-row-list">
                            @foreach (var row in _rows)
                            {
                                <button type="button"
                                        class="list-group-item list-group-item-action d-flex align-items-center gap-3"
                                        data-test="execution-detail-row-@row.EventId"
                                        @onclick="() => SelectRow(row)">
                                    <span class="badge @StatusBadgeClass(row.Status) execution-detail-status">
                                        @row.Status
                                    </span>
                                    <span class="execution-detail-kind fw-semibold">@row.Kind</span>
                                    <span class="text-muted text-truncate flex-grow-1">
                                        @(row.Target ?? "—")
                                    </span>
                                    <span class="text-muted font-monospace small flex-shrink-0">
                                        @FormatTime(row.OccurredAtUtc)
                                    </span>
                                </button>
                            }
                        </div>
                    }
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm"
                            data-test="execution-detail-close-footer"
                            @onclick="HandleClose">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
}