@page "/deployment/flow-debugger"
@using ZB.MOM.WW.ScadaBridge.Security
@using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Deployment
@using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared
@using ZB.MOM.WW.ScadaBridge.Commons.Types.Debugging
@* arch-review F3: opening the page is a Replay-capable read (Deployer + the OperationalAudit
   roles) so the Audit Log / Execution Chain drill-ins work for an auditor. Every Live-run
   affordance below is additionally gated on _canLive (the Deployer role). *@
@attribute [Authorize(Policy = AuthorizationPolicies.RequireFlowDebugger)]

<PageTitle>Flow Debugger</PageTitle>

<div class="container-fluid mt-3">
    <h4 class="mb-3">Flow Debugger</h4>
    <ToastNotification @ref="_toast" />

    @* ── Toolbar ─────────────────────────────────────────────────────────── *@
    <div class="row g-2 align-items-end mb-2" data-test="flow-toolbar">
        @* The entry point only selects what a Live run starts from, so it is Deployer-only. *@
        @if (_canLive)
        {
            <div class="col-auto">
                <label class="form-label form-label-sm">Entry point</label>
                <div class="btn-group btn-group-sm d-block" role="group" aria-label="Entry point">
                    <button type="button" class="btn @(_entry == EntryKind.Method ? "btn-primary" : "btn-outline-secondary")"
                            data-test="flow-entry-method" disabled="@_running" @onclick="() => SetEntryAsync(EntryKind.Method)">Inbound API method</button>
                    <button type="button" class="btn @(_entry == EntryKind.Script ? "btn-primary" : "btn-outline-secondary")"
                            data-test="flow-entry-script" disabled="@_running" @onclick="() => SetEntryAsync(EntryKind.Script)">Site script</button>
                </div>
            </div>
        }

        @if (_mode == FlowMode.Live)
        {
            @if (_entry == EntryKind.Method)
            {
                <div class="col-md-3">
                    <label class="form-label form-label-sm">Method</label>
                    <select class="form-select form-select-sm" data-test="flow-method-select"
                            @bind="_selectedMethodId" @bind:after="OnMethodChangedAsync" disabled="@_running">
                        <option value="0">— choose —</option>
                        @foreach (var m in _methods)
                        {
                            <option value="@m.Id">@m.Name</option>
                        }
                    </select>
                </div>
            }
            else
            {
                <div class="col-md-2">
                    <label class="form-label form-label-sm">Site</label>
                    <select class="form-select form-select-sm" data-test="flow-site-select"
                            @bind="_selectedSiteId" @bind:after="OnSiteChangedAsync" disabled="@_running">
                        <option value="0">— choose —</option>
                        @foreach (var s in _sites)
                        {
                            <option value="@s.Id">@s.Name</option>
                        }
                    </select>
                </div>
                @* Wider than the site select beside it: the field carries a whole instance
                   name, not a short site name. The script-entry branch still sums to 8 of 12
                   (site 2 + instance 3 + script 3) alongside the auto-width toolbar columns. *@
                <div class="col-md-3">
                    <label class="form-label form-label-sm">Instance</label>
                    @* A site can hold hundreds of instances, so this is the shared area-tree
                       combobox, not a flat list (design 2026-09-08). _areas/_instances are
                       loaded once per site — the picker treats a new list as a site change. *@
                    <InstancePicker Areas="_areas" Instances="_instances"
                                    SelectedInstanceId="_selectedInstanceId" SelectedInstanceIdChanged="OnInstancePickedAsync"
                                    Disabled="@(_running || _selectedSiteId == 0 || _instancesLoading)"
                                    Placeholder="Search instances…" DataTestPrefix="flow-instance" />
                </div>
                <div class="col-md-3">
                    <label class="form-label form-label-sm">Script</label>
                    <select class="form-select form-select-sm" data-test="flow-script-select"
                            @bind="_selectedScript" @bind:after="OnScriptChangedAsync" disabled="@(_running || _selectedInstanceId == 0)">
                        <option value="">— choose —</option>
                        @foreach (var s in _scripts)
                        {
                            <option value="@s.CanonicalName">@s.CanonicalName (@s.TriggerLabel)</option>
                        }
                    </select>
                </div>
            }
        }
        else
        {
            <div class="col-md-4">
                <label class="form-label form-label-sm">Execution ID</label>
                <input class="form-control form-control-sm font-monospace" data-test="flow-execution-id"
                       placeholder="any execution id in the chain" @bind="_replayExecutionIdText" disabled="@_running" />
            </div>
        }

        @* Without Deployer there is only Replay, so the toggle would be a single dead button. *@
        @if (_canLive)
        {
            <div class="col-auto">
                <label class="form-label form-label-sm">Mode</label>
                <div class="btn-group btn-group-sm d-block" role="group" aria-label="Mode">
                    <button type="button" class="btn @(_mode == FlowMode.Live ? "btn-primary" : "btn-outline-secondary")"
                            data-test="flow-mode-live" disabled="@_running" @onclick="() => SetMode(FlowMode.Live)">Live</button>
                    <button type="button" class="btn @(_mode == FlowMode.Replay ? "btn-primary" : "btn-outline-secondary")"
                            data-test="flow-mode-replay" disabled="@_running" @onclick="() => SetMode(FlowMode.Replay)">Replay</button>
                </div>
            </div>
        }

        <div class="col-auto ms-auto">
            @if (_mode == FlowMode.Live)
            {
                <button type="button" class="btn btn-primary btn-sm" data-test="flow-run"
                        disabled="@(!CanRun)" @onclick="RunAsync">
                    @if (_running)
                    {
                        <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
                    }
                    Run
                </button>
            }
            else
            {
                <button type="button" class="btn btn-primary btn-sm" data-test="flow-load"
                        disabled="@(_running || !Guid.TryParse(_replayExecutionIdText, out _))" @onclick="LoadReplayAsync">Load from audit</button>
            }
        </div>
    </div>

    @if (!_canLive)
    {
        <div class="text-muted small mb-2" data-test="flow-replay-only">
            Replay only — rebuilding a past execution from the audit log. Starting a live run
            requires the Deployer role.
        </div>
    }

    @* ── Inline alerts ───────────────────────────────────────────────────── *@
    @if (_error != null)
    {
        <div class="alert @(_errorCode == "STANDBY_NODE" ? "alert-warning" : "alert-danger") py-2 small"
             role="alert" data-test="flow-error" data-code="@_errorCode">
            @if (_errorCode != null)
            {
                <strong class="me-1">@_errorCode</strong>
            }
            @_error
        </div>
    }

    @* ── Status strip ─────────────────────────────────────────────────────── *@
    <div class="fd-status mb-3" data-test="flow-status">
        <span class="fd-chip @StateCss" data-test="flow-state">@StateLabel</span>
        @if (_runNumber > 0)
        {
            <span><span class="fd-label">Run</span><span class="fd-mono">#@_runNumber</span></span>
        }
        @if (_raw != null)
        {
            <span><span class="fd-label">Started</span><span class="fd-mono">@_raw.StartedAtUtc.ToUniversalTime().ToString("HH:mm:ss.fff")Z</span></span>
            <span><span class="fd-label">Total</span><span class="fd-mono">@((int)(_raw.FinishedAtUtc - _raw.StartedAtUtc).TotalMilliseconds) ms</span></span>
        }
        @if (_graph != null)
        {
            <span><span class="fd-label">Steps</span><span class="fd-mono" data-test="flow-step-count">@_graph.Steps.Count</span></span>
            <span><span class="fd-label">Boundaries</span><span class="fd-mono">@_graph.Edges.Count(e => e.CrossesBoundary)</span></span>
            <span><span class="fd-label">Writes</span><span class="fd-mono">@_graph.Steps.Count(s => s.Kind == FlowStepKind.AttributeWrite)</span></span>
            @* Step logs (design 2026-09-09 D5): the run's line counts by level — a Log.Error line is
               NOT a failed step, so it never moves the state chip. *@
            @if (LogCounts is { Total: > 0 })
            {
                <span><span class="fd-label">Log</span><span class="fd-mono" data-test="flow-log-counts">@LogSummary</span></span>
            }
            @if (PendingCount > 0)
            {
                <span><span class="fd-label">Pending</span><span class="fd-mono" data-test="flow-pending-count">@PendingCount</span></span>
            }
        }
        @if (_raw != null)
        {
            <button type="button" class="btn btn-outline-secondary btn-sm py-0" data-test="flow-refresh"
                    disabled="@(!CanRefresh)" @onclick="RefreshOutcomesAsync">Refresh outcomes</button>
        }
        @if (_refreshing)
        {
            <span class="text-muted small" data-test="flow-pending-note">outcomes still arriving — refreshing</span>
        }
        @if (_raw != null)
        {
            <span>
                <span class="fd-label">Root</span>
                <a class="fd-mono" data-test="flow-root-execution" href="@($"/audit/execution-tree?executionId={_raw.RootExecutionId}")">@_raw.RootExecutionId</a>
            </span>
        }
        @if (_graph?.Truncated == true)
        {
            <span class="badge bg-warning text-dark">event list truncated</span>
        }
        @if (_graph?.LogsTruncated == true)
        {
            <span class="badge bg-warning text-dark" data-test="flow-logs-truncated">inline log lines capped — refresh outcomes pulls the rest</span>
        }
        @if (_graph?.UnattachedLogLines > 0)
        {
            <span class="text-muted small" data-test="flow-unattached-logs">@_graph.UnattachedLogLines log line(s) could not be placed on a step</span>
        }
    </div>

    <div class="row g-3">
        @* ── Inputs (Live only) ────────────────────────────────────────────── *@
        @if (_mode == FlowMode.Live && (_entry == EntryKind.Script ? SelectedScript != null : _inputFields.Count > 0))
        {
            <div class="col-lg-3">
                <div class="card fd-inputs" data-test="flow-inputs">
                    <div class="card-body">
                        @if (_entry == EntryKind.Method)
                        {
                            @* Method entry (#37): the same typed ParameterValueForm the script pane uses —
                               per-item list editors, nested object groups, inline validation — keyed on
                               the method so a change of method remounts it; plus a whole-payload raw-JSON
                               escape hatch to paste the exact body an external caller sends. Both edit
                               one value tree, and Run stays disabled while it is invalid. *@
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="card-title text-muted mb-0">Inputs</h6>
                                <div class="btn-group btn-group-sm" role="group" aria-label="Input mode">
                                    <button type="button" class="btn @(!_methodRawMode ? "btn-primary" : "btn-outline-secondary")"
                                            data-test="flow-input-mode-form" disabled="@_running" @onclick="() => SetMethodRawMode(false)">Form</button>
                                    <button type="button" class="btn @(_methodRawMode ? "btn-primary" : "btn-outline-secondary")"
                                            data-test="flow-input-mode-raw" disabled="@_running" @onclick="() => SetMethodRawMode(true)">Raw JSON</button>
                                </div>
                            </div>
                            @if (_methodRawMode)
                            {
                                <div data-test="flow-method-raw">
                                    <MonacoEditor Language="json" Height="220px" ShowToolbar="false"
                                                  JsonSchema="@MethodRawJsonSchema"
                                                  Value="@_methodRawText"
                                                  ValueChanged="@(v => SetMethodRawJson(v))" />
                                    @if (_methodRawError is { } rawError)
                                    {
                                        <div class="text-danger small mt-1" data-test="flow-method-raw-error">@rawError</div>
                                    }
                                    else
                                    {
                                        <div class="form-text">The whole request body, validated against the method's parameter definitions.</div>
                                    }
                                </div>
                            }
                            else
                            {
                                <div data-test="flow-method-params">
                                    <ParameterValueForm @key="@_selectedMethodId"
                                                        ParameterDefinitions="@_methods.FirstOrDefault(m => m.Id == _selectedMethodId)?.ParameterDefinitions"
                                                        Values="_methodParams"
                                                        ValuesChanged="@(v => OnMethodParamsChanged(v))"
                                                        ValidChanged="@(ok => _methodParamsValid = ok)" />
                                </div>
                            }
                        }
                        else if (SelectedScript is { } script)
                        {
                            <h6 class="card-title text-muted">Inputs</h6>
                            @* A write kind is fired by writing its own trigger attribute — the operator
                               supplies only the value. Every other kind is called directly with the
                               parameters its definitions declare. *@
                            @if (script.IsWriteKind)
                            {
                                <div class="mb-2">
                                    <label class="form-label form-label-sm">New value for <span class="font-monospace">@(script.TriggerAttribute ?? "…")</span></label>
                                    <input class="form-control form-control-sm" data-test="flow-input-value"
                                           @bind="_valueChangeValue" @bind:event="oninput" disabled="@_running" />
                                    <div class="form-text">@script.TriggerType trigger — writing the attribute fires the script.</div>
                                </div>
                            }
                            else if (string.IsNullOrWhiteSpace(script.ParameterDefinitions))
                            {
                                <div class="text-muted small" data-test="flow-script-no-params">This script takes no parameters.</div>
                            }
                            else
                            {
                                <div data-test="flow-script-params">
                                    @* Keyed on the script so a change of script REMOUNTS the form: its raw
                                       text and parse errors are per-instance state that must not survive
                                       (and two scripts may even declare byte-identical definitions, which
                                       would otherwise skip the reparse and its ValidChanged entirely). *@
                                    <ParameterValueForm @key="@script.CanonicalName"
                                                        ParameterDefinitions="@script.ParameterDefinitions"
                                                        Values="_scriptParams"
                                                        ValuesChanged="@(v => _scriptParams = v)"
                                                        ValidChanged="@(ok => _scriptParamsValid = ok)" />
                                </div>
                            }
                        }
                    </div>
                </div>
            </div>
        }

        @* ── Flow panel ────────────────────────────────────────────────────── *@
        <div class="@(_mode == FlowMode.Live && (_entry == EntryKind.Script ? SelectedScript != null : _inputFields.Count > 0) ? "col-lg-9" : "col-12")">
            <div class="fd-flow-tools">
                <div class="small text-muted">
                    @if (_graph == null && _predicted != null)
                    {
                        <span data-test="flow-predicted-note">Predicted from script syntax — dashed nodes depend on inputs or live site state.</span>
                    }
                    else if (SiteNotTraced)
                    {
                        <span data-test="flow-site-not-traced">Site not traced — the site returned no trace rows for the routed call (older site build or an untraced call).</span>
                    }
                </div>
                <div class="btn-group btn-group-sm me-2" role="group" aria-label="View">
                    <button type="button" class="btn @(_listView ? "btn-outline-secondary" : "btn-secondary")" data-test="flow-view-swimlane"
                            aria-pressed="@(!_listView)" @onclick="() => _listView = false">Swimlane</button>
                    <button type="button" class="btn @(_listView ? "btn-secondary" : "btn-outline-secondary")" data-test="flow-view-list"
                            aria-pressed="@_listView" @onclick="() => _listView = true">Vertical trace</button>
                </div>
                <div class="btn-group btn-group-sm" role="group" aria-label="Zoom" hidden="@_listView">
                    <button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = Math.Max(0.4, _zoom - 0.1)" aria-label="Zoom out">−</button>
                    <button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = 1.0" aria-label="Fit">Fit</button>
                    <button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = Math.Min(2.0, _zoom + 0.1)" aria-label="Zoom in">+</button>
                </div>
            </div>
            @if (_listView)
            {
                @* Direction B: the same steps as a vertical list; a prediction-only graph has no real steps, so it shows in the swimlane only. *@
                <FlowTraceList Graph="_graph" SelectedEventId="_selected?.EventId" OnSelect="OnSelectStep" />
            }
            else
            {
                <FlowGraphView Graph="_graph" Predicted="_predicted" SelectedEventId="_selected?.EventId" OnSelect="OnSelectStep" Zoom="_zoom" />
            }
        </div>

        @* ── Detail panel ──────────────────────────────────────────────────── *@
        <div class="col-12">
            @* Retry / Discard relay a command to the site — only wired for a Deployer, so the
               buttons never render for an auditor (arch-review F3). *@
            <FlowStepDetail Step="_selected" Graph="_graph"
                            SiteDbId="@(_entry == EntryKind.Script && _selectedSiteId > 0 ? _selectedSiteId : null)"
                            InstanceDbId="@(_entry == EntryKind.Script && _selectedInstanceId > 0 ? _selectedInstanceId : null)"
                            OnRetry="RetryCallback" OnDiscard="DiscardCallback"
                            ActionInProgress="_actionInProgress" OnSelectStep="OnSelectStep" />
        </div>
    </div>
</div>