@using ZB.MOM.WW.ScadaBridge.CentralUI.Services
@using ZB.MOM.WW.ScadaBridge.Commons.Entities.Sites
@using ZB.MOM.WW.ScadaBridge.Commons.Interfaces.Repositories
@using ZB.MOM.WW.ScadaBridge.Commons.Types.Audit
@using ZB.MOM.WW.ScadaBridge.Commons.Types.Enums
@inject ISiteRepository SiteRepository
@inject IAuditLogQueryService AuditLogQueryService

<div class="card mb-3" data-test="audit-filter-bar">
    <div class="card-body py-2">
        @* All filters sit in one wrapped row. Kind / Status / Site use compact
           MultiSelectDropdown controls; Channel is a single-select because the
           Kind options narrow to the chosen channel — so the bar stays a row or
           two tall instead of four stacked blocks of chip buttons. *@
        <div class="row g-2 align-items-end">
            @* Single-select: one channel at a time, so the Kind options below
               narrow cleanly to that channel. "All channels" clears it. *@
            <div class="col-auto" data-test="filter-channel">
                <label class="form-label small mb-1" for="audit-channel">Channel</label>
                <select id="audit-channel" data-test="filter-channel-select"
                        class="form-select form-select-sm" @bind="SelectedChannel">
                    <option value="">All channels</option>
                    @foreach (var channel in _channels)
                    {
                        <option value="@channel">@channel</option>
                    }
                </select>
            </div>

            @* Kind options are narrowed by the Channel selection (VisibleKinds). *@
            <div class="col-auto" data-test="filter-kind">
                <label class="form-label small mb-1">Kind</label>
                <div>
                    <MultiSelectDropdown TValue="AuditKind"
                                         Items="_model.VisibleKinds()"
                                         Selected="_model.Kinds"
                                         DataTest="filter-kind-ms" />
                </div>
            </div>

            <div class="col-auto" data-test="filter-status">
                <label class="form-label small mb-1">Status</label>
                <div>
                    <MultiSelectDropdown TValue="AuditStatus"
                                         Items="_statuses"
                                         Selected="_model.Statuses"
                                         DataTest="filter-status-ms" />
                </div>
            </div>

            <div class="col-auto" data-test="filter-site">
                <label class="form-label small mb-1">Site</label>
                <div>
                    <MultiSelectDropdown TValue="string"
                                         Items="_siteIds"
                                         Selected="_model.SiteIdentifiers"
                                         Display="SiteName"
                                         EmptyText="No sites available"
                                         DataTest="filter-site-ms" />
                </div>
            </div>

            @* Node multi-select. Options are the distinct SourceNode values
               observed in the AuditLog table; the service-side lookup is cached
               for 60s so a render of this bar costs at most one DB hit per
               minute per circuit. *@
            <div class="col-auto" data-test="filter-node">
                <label class="form-label small mb-1">Node</label>
                <div>
                    <MultiSelectDropdown TValue="string"
                                         Items="_sourceNodes"
                                         Selected="_model.SourceNodes"
                                         EmptyText="No nodes available"
                                         DataTest="filter-node-ms" />
                </div>
            </div>

            <div class="col-auto" data-test="filter-time-range">
                <label class="form-label small mb-1" for="audit-time-range">Time range</label>
                <select id="audit-time-range" class="form-select form-select-sm"
                        @bind="_model.TimeRange">
                    <option value="@AuditTimeRangePreset.Last5Minutes">Last 5 min</option>
                    <option value="@AuditTimeRangePreset.LastHour">Last 1h</option>
                    <option value="@AuditTimeRangePreset.Last24Hours">Last 24h</option>
                    <option value="@AuditTimeRangePreset.Custom">Custom</option>
                </select>
            </div>

            @* Custom datetime range; only the pickers are conditional, the wrapper is
               always emitted so tests can find it. *@
            <div class="col-auto" data-test="filter-custom-range">
                @if (_model.TimeRange == AuditTimeRangePreset.Custom)
                {
                    <div class="d-flex gap-1 align-items-end">
                        <div>
                            <label class="form-label small mb-1" for="audit-from">From (UTC)</label>
                            <input id="audit-from" type="datetime-local" class="form-control form-control-sm"
                                   @bind="_model.CustomFromUtc" />
                        </div>
                        <div>
                            <label class="form-label small mb-1" for="audit-to">To (UTC)</label>
                            <input id="audit-to" type="datetime-local" class="form-control form-control-sm"
                                   @bind="_model.CustomToUtc" />
                        </div>
                    </div>
                }
                else
                {
                    <span class="text-muted small">Window: @TimeRangeLabel(_model.TimeRange)</span>
                }
            </div>

            <div class="col-auto" data-test="filter-instance">
                <label class="form-label small mb-1" for="audit-instance">Instance</label>
                <input id="audit-instance" type="text" class="form-control form-control-sm"
                       placeholder="contains…" @bind="_model.InstanceSearch" />
            </div>

            <div class="col-auto" data-test="filter-script">
                <label class="form-label small mb-1" for="audit-script">Script</label>
                <input id="audit-script" type="text" class="form-control form-control-sm"
                       placeholder="contains…" @bind="_model.ScriptSearch" />
            </div>

            <div class="col-auto" data-test="filter-target">
                <label class="form-label small mb-1" for="audit-target">Target</label>
                <input id="audit-target" type="text" class="form-control form-control-sm"
                       placeholder="contains…" @bind="_model.TargetSearch" />
            </div>

            <div class="col-auto" data-test="filter-actor">
                <label class="form-label small mb-1" for="audit-actor">Actor</label>
                <input id="audit-actor" type="text" class="form-control form-control-sm"
                       placeholder="contains…" @bind="_model.ActorSearch" />
            </div>

            @* ExecutionId is an exact-match Guid filter — the operator pastes the
               universal per-run correlation value. Lax-parsed in ToFilter so a
               blank/malformed paste simply drops the constraint. *@
            <div class="col-auto" data-test="filter-execution-id">
                <label class="form-label small mb-1" for="audit-execution-id">Execution ID</label>
                <input id="audit-execution-id" type="text"
                       class="form-control form-control-sm font-monospace"
                       placeholder="paste GUID…" @bind="_model.ExecutionId" />
            </div>

            @* ParentExecutionId is an exact-match Guid filter — the operator pastes
               the spawner execution's id to find every run it spawned. Lax-parsed
               in ToFilter, exactly like ExecutionId above. *@
            <div class="col-auto" data-test="filter-parent-execution-id">
                <label class="form-label small mb-1" for="audit-parent-execution-id">Parent execution ID</label>
                <input id="audit-parent-execution-id" type="text"
                       class="form-control form-control-sm font-monospace"
                       placeholder="paste GUID…" @bind="_model.ParentExecutionId" />
            </div>

            <div class="col-auto" data-test="filter-errors-only">
                <div class="form-check mb-1">
                    <input class="form-check-input" type="checkbox" id="audit-errors-only"
                           @bind="_model.ErrorsOnly" />
                    <label class="form-check-label small" for="audit-errors-only">Errors only</label>
                </div>
            </div>

            <div class="col-auto ms-auto">
                <button class="btn btn-outline-secondary btn-sm me-1"
                        @onclick="ClearFilters" data-test="filter-clear">Clear</button>
                <button class="btn btn-primary btn-sm"
                        @onclick="Apply" data-test="filter-apply">Apply</button>
            </div>
        </div>
    </div>
</div>
