RackPeek/Shared.Rcl/Connections/PortConnectionModal.razor

@using RackPeek.Domain.Persistence
@using RackPeek.Domain.Resources
@using RackPeek.Domain.Resources.Connections
@using RackPeek.Domain.Resources.Servers
@using RackPeek.Domain.Resources.SubResources
@inject IResourceCollection Repository
@inject IAddConnectionUseCase AddConnectionUseCase

@if (IsOpen)
{
    <div class="fixed inset-0 z-50 flex items-center justify-center">

        <div class="absolute inset-0 bg-black/70" @onclick="Cancel"></div>

        <div
            class="relative bg-zinc-900 border border-zinc-800 rounded w-full max-w-3xl p-4"
            data-testid="@($"{BaseTestId}-container")">
            
            <div class="flex justify-between mb-4">
                <div class="text-zinc-100 text-sm font-medium">
                    Create Connection
                </div>

                <button class="text-zinc-400 hover:text-zinc-200"
                        @onclick="Cancel">
                    ✕
                </button>
            </div>

            <div class="grid grid-cols-2 gap-6 text-sm">

                <!-- SIDE A -->
                <div class="space-y-3">

                    <div class="text-zinc-400">Side A</div>

                    <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                            data-testid="@($"{BaseTestId}-resource-a")"
                            @bind="_resourceAIndex">

                        <option value="">Select resource</option>

                        @for (var i = 0; i < HardwareWithPorts.Count; i++)
                        {
                            var hw = (Resource)HardwareWithPorts[i];
                            <option value="@i">@hw.Name</option>
                        }

                    </select>

                    @if (_resourceA?.Ports?.Any() == true)
                    {
                        <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                data-testid="@($"{BaseTestId}-group-a")"
                                @bind="_groupAIndex">

                            <option value="">Select group</option>

                            @for (var i = 0; i < _resourceA.Ports.Count; i++)
                            {
                                var g = _resourceA.Ports[i];
                                <option value="@i">@g.Type — @g.Speed Gbps (@g.Count)</option>
                            }

                        </select>
                    }

                    @if (_groupA is not null)
                    {
                        <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                data-testid="@($"{BaseTestId}-port-a")"
                                @bind="_portAIndex">

                            <option value="">Select port</option>

                            @for (var i = 0; i < _groupA.Count; i++)
                            {
                                <option value="@i">Port @(i + 1)</option>
                            }

                        </select>

                        <PortGroupVisualizer
                            ResourceName="@_portA.Resource"
                            PortGroupIndex="@_portA.PortGroup"
                            PortGroup="@_groupA"
                            @bind-SelectedPortIndex="_portAIndex"
                            OnPortClicked="HandleLeftPortClicked"/>
                    }

                </div>


                <!-- SIDE B -->
                <div class="space-y-3">

                    <div class="text-zinc-400">Side B</div>

                    <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                            data-testid="@($"{BaseTestId}-resource-b")"
                            @bind="_resourceBIndex">

                        <option value="">Select resource</option>

                        @for (var i = 0; i < HardwareWithPorts.Count; i++)
                        {
                            var hw = (Resource)HardwareWithPorts[i];
                            <option value="@i">@hw.Name</option>
                        }

                    </select>

                    @if (_resourceB?.Ports?.Any() == true)
                    {
                        <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                data-testid="@($"{BaseTestId}-group-b")"
                                @bind="_groupBIndex">

                            <option value="">Select group</option>

                            @for (var i = 0; i < _resourceB.Ports.Count; i++)
                            {
                                var g = _resourceB.Ports[i];
                                <option value="@i">@g.Type — @g.Speed Gbps (@g.Count)</option>
                            }

                        </select>
                    }

                    @if (_groupB is not null)
                    {
                        <select class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                data-testid="@($"{BaseTestId}-port-b")"
                                @bind="_portBIndex">

                            <option value="">Select port</option>

                            @for (var i = 0; i < _groupB.Count; i++)
                            {
                                <option value="@i">Port @(i + 1)</option>
                            }

                        </select>

                        <PortGroupVisualizer
                            ResourceName="@_portB.Resource"
                            PortGroupIndex="@_portB.PortGroup"
                            PortGroup="@_groupB"
                            @bind-SelectedPortIndex="_portBIndex"
                            OnPortClicked="HandleRightPortClicked"/>
                    }

                </div>

            </div>

            <div class="mt-6 space-y-1">
                <label class="text-zinc-400 text-xs uppercase tracking-wider"
                       for="@($"{BaseTestId}-label-input")">
                    Label
                </label>
                <input id="@($"{BaseTestId}-label-input")"
                       class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100 text-sm"
                       data-testid="@($"{BaseTestId}-label")"
                       placeholder="optional — shown on the topology diagram"
                       maxlength="80"
                       @bind="_label"/>
            </div>

            <div class="flex justify-end gap-2 mt-6">

                <button class="px-3 py-1 border border-zinc-700 rounded text-zinc-300"
                        data-testid="@($"{BaseTestId}-cancel")"
                        @onclick="Cancel">
                    Cancel
                </button>

                <button class="px-3 py-1 rounded bg-emerald-600 text-black"
                        disabled="@(!CanSubmit)"
                        data-testid="@($"{BaseTestId}-submit")"
                        @onclick="HandleSubmit">
                    Add Connection
                </button>

            </div>

        </div>

    </div>
}

@code {

    [Parameter] public bool IsOpen { get; set; }
    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }

    [Parameter] public string? TestIdPrefix { get; set; }

    private string BaseTestId =>
        string.IsNullOrWhiteSpace(TestIdPrefix)
            ? "connection-modal"
            : $"{TestIdPrefix}-connection-modal";

    [Parameter] public PortReference? SeedPort { get; set; }

    List<IPortResource> HardwareWithPorts = new();

    IPortResource? _resourceA;
    IPortResource? _resourceB;

    Port? _groupA;
    Port? _groupB;

    readonly PortReference _portA = new();
    readonly PortReference _portB = new();

    int? _resourceAIndexValue;
    int? _resourceBIndexValue;

    int? _groupAIndexValue;
    int? _groupBIndexValue;

    int? _portAIndex;
    int? _portBIndex;

    string _label = string.Empty;


    int? _resourceAIndex
    {
        get => _resourceAIndexValue;
        set
        {
            _resourceAIndexValue = value;

            if (value is null)
            {
                _resourceA = null;
                _groupA = null;
                _portAIndex = null;
                return;
            }

            _resourceA = HardwareWithPorts[value.Value];

            _portA.Resource = ((Resource)_resourceA).Name;

            _groupAIndex = null;
            _portAIndex = null;
        }
    }


    int? _resourceBIndex
    {
        get => _resourceBIndexValue;
        set
        {
            _resourceBIndexValue = value;

            if (value is null)
            {
                _resourceB = null;
                _groupB = null;
                _portBIndex = null;
                return;
            }

            _resourceB = HardwareWithPorts[value.Value];

            _portB.Resource = ((Resource)_resourceB).Name;

            _groupBIndex = null;
            _portBIndex = null;
        }
    }


    int? _groupAIndex
    {
        get => _groupAIndexValue;
        set
        {
            _groupAIndexValue = value;

            if (value is null || _resourceA == null)
            {
                _groupA = null;
                _portAIndex = null;
                return;
            }

            _groupA = _resourceA.Ports![value.Value];

            _portA.PortGroup = value.Value;

            _portAIndex = null;
        }
    }


    int? _groupBIndex
    {
        get => _groupBIndexValue;
        set
        {
            _groupBIndexValue = value;

            if (value is null || _resourceB == null)
            {
                _groupB = null;
                _portBIndex = null;
                return;
            }

            _groupB = _resourceB.Ports![value.Value];

            _portB.PortGroup = value.Value;

            _portBIndex = null;
        }
    }


    bool CanSubmit =>
        _groupA != null &&
        _groupB != null &&
        _portAIndex != null &&
        _portBIndex != null;


    protected override async Task OnParametersSetAsync()
    {
        if (!IsOpen) return;

        var all = await Repository.GetAllOfTypeAsync<IPortResource>();

        HardwareWithPorts = all
            .Where(h => h.Ports?.Any() == true)
            .ToList();

        if (SeedPort != null)
        {
            // If the seed port is already part of a connection, hydrate the
            // whole modal (side B + label) so the user can see and edit what
            // they already configured. Otherwise just preselect side A.
            var existing = await Repository.GetConnectionForPortAsync(SeedPort);
            if (existing != null)
                SeedConnection(existing);
            else
                SeedSinglePortA(SeedPort);
        }
    }


    async Task HandleLeftPortClicked(PortReference port)
    {
        var existing = await Repository.GetConnectionForPortAsync(port);

        if (existing != null)
            SeedConnection(existing);
        else
            SeedSinglePortA(port);
    }


    async Task HandleRightPortClicked(PortReference port)
    {
        var existing = await Repository.GetConnectionForPortAsync(port);

        if (existing != null)
            SeedConnection(existing);
        else
            SeedSinglePortB(port);
    }


    void SeedSinglePortA(PortReference port)
    {
        _resourceAIndex = HardwareWithPorts.FindIndex(r => ((Resource)r).Name == port.Resource);

        _groupAIndex = port.PortGroup;

        _portAIndex = port.PortIndex;
    }


    void SeedSinglePortB(PortReference port)
    {
        _resourceBIndex = HardwareWithPorts.FindIndex(r => ((Resource)r).Name == port.Resource);

        _groupBIndex = port.PortGroup;

        _portBIndex = port.PortIndex;
    }


    void SeedConnection(Connection conn)
    {
        SeedSinglePortA(conn.A);
        SeedSinglePortB(conn.B);
        _label = conn.Label ?? string.Empty;
    }

    async Task HandleSubmit()
    {
        if (!CanSubmit) return;

        var a = new PortReference
        {
            Resource = _portA.Resource,
            PortGroup = _portA.PortGroup,
            PortIndex = _portAIndex!.Value
        };

        var b = new PortReference
        {
            Resource = _portB.Resource,
            PortGroup = _portB.PortGroup,
            PortIndex = _portBIndex!.Value
        };

        var trimmedLabel = string.IsNullOrWhiteSpace(_label) ? null : _label.Trim();

        await AddConnectionUseCase.ExecuteAsync(a, b, trimmedLabel);

        await Cancel();
    }


    async Task Cancel()
    {
        _label = string.Empty;
        await IsOpenChanged.InvokeAsync(false);
    }

}