@*
    Instance Picker — a combobox whose dropdown is the site's area tree (design
    2026-09-08). The field shows the selected instance; the panel hosts the shared
    TreeView over InstanceTreeBuilder's forest with every area collapsed. Clicking an
    area row toggles it, activating an instance row selects it and closes the panel —
    and "activating" is one path for both input modes, because the tree runs in
    Selectable mode and the mouse click reaches it through TreeView's own content span.
    Typing filters the forest to the matching instances and their ancestors; Enter picks
    the first visible match, ArrowDown hands keyboard navigation to the tree and Escape
    closes without changing the selection.
    Bootstrap only, no JavaScript: the transparent fixed backdrop closes the panel on
    an outside click, the same pattern TreeView uses for its context menu.
*@
@namespace ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared

<div class="ip-wrap position-relative" data-test="@($"{DataTestPrefix}-picker")">
    @* ip-field lifts the field above the open panel's backdrop — see the .razor.css note. *@
    <div class="input-group input-group-sm ip-field">
        <input type="text" class="form-control" role="combobox" autocomplete="off"
               id="@_inputId" aria-autocomplete="list" aria-haspopup="tree" aria-label="@AriaLabel"
               aria-expanded="@(_open ? "true" : "false")" aria-controls="@(_open ? _panelId : null)"
               placeholder="@Placeholder" disabled="@Disabled"
               data-test="@($"{DataTestPrefix}-input")"
               value="@_text" @onfocus="Open" @oninput="OnInput" @onkeydown="OnInputKeyDown" />
        <button type="button" class="btn btn-outline-secondary" tabindex="-1" aria-label="Browse instances"
                disabled="@Disabled" data-test="@($"{DataTestPrefix}-toggle")" @onclick="Toggle">
            <i class="bi @(_open ? "bi-chevron-up" : "bi-chevron-down")"></i>
        </button>
    </div>
    @if (_open)
    {
        <div class="ip-backdrop" data-test="@($"{DataTestPrefix}-backdrop")" @onclick="Close"></div>
        <div class="ip-panel border rounded bg-body shadow-sm" id="@_panelId" data-test="@($"{DataTestPrefix}-panel")">
            @* Selectable is what makes the tree's own Enter/Space activation reach us: it
               routes BOTH a click on TreeView's content span and a key press on the
               treeitem through SelectedKeyChanged, so mouse and keyboard share one path
               (the row label below therefore carries no @onclick of its own — a second
               handler there would fire twice on a click, since the click bubbles into the
               content span). SelectedKey is deliberately left unbound: a combobox shows
               its pick in the field, not as a row highlight, and binding it would also arm
               TreeView's "selected key no longer in the tree" reset — which fires on every
               render while the pick is filtered out, and this component would never clear
               it. SelectedCssClass is emptied to match; with no SelectedKey nothing is ever
               marked selected, so it is belt-and-braces. *@
            <TreeView @ref="_tree" TItem="InstanceTreeNode" Items="_roots"
                      ChildrenSelector="n => n.Children" HasChildrenSelector="n => n.HasChildren"
                      KeySelector="n => n.Key" IndentPx="16"
                      Selectable="true" SelectedCssClass="" SelectedKeyChanged="OnTreeKeyActivatedAsync">
                <NodeContent Context="node">
                    <span class="tv-glyph"><i class="bi @(node.IsInstance ? "bi-box" : "bi-diagram-3")"></i></span>
                    <span class="tv-label @(node.IsInstance ? "ip-instance" : "ip-area")" title="@node.Label"
                          data-test="@($"{DataTestPrefix}-row")" data-instance-id="@(node.Instance?.Id)">@RowLabel(node)</span>
                </NodeContent>
                <EmptyContent><span class="text-muted fst-italic small px-2">@(_hasFilter ? "No instances match." : "No instances at this site.")</span></EmptyContent>
            </TreeView>
        </div>
    }
</div>