@php
    $stats = $this->stats;
    $extent = $this->extent;
@endphp

<div>
    <x-slot name="header">{{ __('Fiber map') }}</x-slot>

    <x-page-head :group="__('Network')" :title="__('Fiber map')"
        :lead="__('Where your splitters and boxes are, and how much room is left in them.')">
        <x-slot name="actions">
            <button type="button" class="btn btn-sm btn-primary" wire:click="create">
                <i class="bi bi-plus-lg me-1"></i>{{ __('Add node') }}
            </button>
        </x-slot>
    </x-page-head>

    @if ($flash)
        <div class="alert alert-info border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-info-circle"></i>{{ $flash }}
        </div>
    @endif

    <div class="row g-3 mb-3">
        <div class="col-6 col-xl-3">
            <x-stat-card tone="primary" icon="bi-diagram-3" :label="__('Nodes')"
                :value="$stats['nodes']" :sub="__('On the plant')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="info" icon="bi-plug" :label="__('Ports')"
                :value="$stats['used'].' / '.$stats['capacity']" :sub="__('Used of total')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="success" icon="bi-check-circle" :label="__('Spare capacity')"
                :value="max(0, $stats['capacity'] - $stats['used'])" :sub="__('Customers you can still connect')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card :tone="$stats['faults'] > 0 ? 'danger' : 'neutral'" icon="bi-exclamation-triangle"
                :label="__('Faults')" :value="$stats['faults']" :sub="__('Nodes reported down')" />
        </div>
    </div>

    @if ($showForm)
        <div class="card dash-panel mb-3">
            <div class="dash-panel__head">
                <h6>{{ $editing ? __('Edit node') : __('New node') }}</h6>
            </div>
            <div class="card-body">
                <form wire:submit="save">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Name') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="name"
                                placeholder="{{ __('Main Street ODB') }}">
                            <x-input-error for="name" />
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Type') }}</label>
                            <select class="form-select form-select-sm" wire:model="type">
                                @foreach (\App\Models\FiberNode::TYPES as $key => $label)
                                    <option value="{{ $key }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Fed from') }}</label>
                            <select class="form-select form-select-sm" wire:model="parent_id">
                                <option value="">{{ __('Nothing upstream') }}</option>
                                @foreach ($this->nodes as $n)
                                    @if ($n->id !== $editing)
                                        <option value="{{ $n->id }}">{{ $n->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Ports') }}</label>
                            <input type="number" class="form-control form-control-sm" wire:model="capacity" min="0">
                            <x-input-error for="capacity" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Ports used') }}</label>
                            <input type="number" class="form-control form-control-sm" wire:model="ports_used" min="0">
                            <x-input-error for="ports_used" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Latitude') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="latitude"
                                placeholder="0.6700">
                            <x-input-error for="latitude" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Longitude') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="longitude"
                                placeholder="35.5100">
                            <x-input-error for="longitude" />
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold">{{ __('Where it is') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="address"
                                placeholder="{{ __('Pole outside the market') }}">
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Status') }}</label>
                            <select class="form-select form-select-sm" wire:model="status">
                                <option value="live">{{ __('Live') }}</option>
                                <option value="planned">{{ __('Planned') }}</option>
                                <option value="fault">{{ __('Fault') }}</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold">{{ __('Notes') }}</label>
                            <textarea class="form-control form-control-sm" rows="2" wire:model="notes"></textarea>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-save me-1"></i>{{ __('Save node') }}
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" wire:click="$set('showForm', false)">
                            {{ __('Cancel') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    {{-- Plan view. Not a street map: the nodes are placed proportionally
         within their own bounding box, which shows how they sit relative to
         one another without pulling map tiles from anywhere. --}}
    <div class="card dash-panel mb-3">
        <div class="dash-panel__head">
            <h6>{{ __('Plan view') }}</h6>
            <span class="text-secondary" style="font-size:0.78rem;">
                {{ __(':m of :n nodes have coordinates', ['m' => $stats['mapped'], 'n' => $stats['nodes']]) }}
            </span>
        </div>
        <div class="card-body">
            @if ($extent)
                <div class="fiber-plan" style="position:relative; width:100%; height:340px; border-radius:.75rem;
                    background:
                        linear-gradient(rgba(125,125,125,.10) 1px, transparent 1px) 0 0 / 100% 34px,
                        linear-gradient(90deg, rgba(125,125,125,.10) 1px, transparent 1px) 0 0 / 10% 100%,
                        var(--cp-100, rgba(125,125,125,.05));">
                    @foreach ($this->nodes as $n)
                        @continue (! $n->hasPosition())
                        @php
                            $pos = $this->position($n);
                            $tone = $n->status === 'fault' ? 'danger'
                                : ($n->status === 'planned' ? 'secondary'
                                : ($n->utilisation() >= 90 ? 'warning' : 'success'));
                        @endphp
                        <div style="position:absolute; left:{{ $pos['x'] }}%; top:{{ $pos['y'] }}%;
                            transform:translate(-50%,-50%); text-align:center;"
                            title="{{ $n->name }} — {{ $n->ports_used }}/{{ $n->capacity }} {{ __('ports') }}">
                            <span class="badge rounded-pill badge-subtle-{{ $tone }}"
                                style="font-size:0.68rem; white-space:nowrap;">
                                <i class="bi bi-{{ $n->type === 'pop' ? 'broadcast-pin' : ($n->type === 'tower' ? 'reception-4' : 'diagram-2') }} me-1"></i>{{ $n->name }}
                            </span>
                            <span class="d-block text-secondary" style="font-size:0.62rem;">
                                {{ $n->ports_used }}/{{ $n->capacity }}
                            </span>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center text-secondary py-5">
                    <i class="bi bi-geo-alt d-block mb-2" style="font-size:1.6rem;"></i>
                    {{ __('Add latitude and longitude to a node and it will appear here.') }}
                </div>
            @endif
        </div>
    </div>

    <div class="card dash-panel">
        <div class="dash-panel__head"><h6>{{ __('Nodes') }}</h6></div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0 ledger-table">
                    <thead>
                        <tr>
                            <th>{{ __('Name') }}</th>
                            <th class="d-none d-md-table-cell">{{ __('Type') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Fed from') }}</th>
                            <th>{{ __('Ports') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Where') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($this->nodes as $n)
                            <tr>
                                <td class="fw-semibold">{{ $n->name }}</td>
                                <td class="d-none d-md-table-cell text-secondary" style="font-size:0.8rem;">
                                    {{ __(\App\Models\FiberNode::TYPES[$n->type] ?? $n->type) }}
                                </td>
                                <td class="d-none d-lg-table-cell text-secondary">{{ $n->parent?->name ?: '—' }}</td>
                                <td style="min-width:120px;">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1" style="height:5px;">
                                            <div class="progress-bar bg-{{ $n->utilisation() >= 90 ? 'warning' : 'success' }}"
                                                style="width: {{ $n->utilisation() }}%"></div>
                                        </div>
                                        <span style="font-size:0.75rem;">{{ $n->ports_used }}/{{ $n->capacity }}</span>
                                    </div>
                                </td>
                                <td class="d-none d-lg-table-cell text-secondary" style="font-size:0.78rem;">
                                    {{ $n->address ?: ($n->hasPosition() ? $n->latitude.', '.$n->longitude : '—') }}
                                </td>
                                <td class="text-center">
                                    @php
                                        $tone = match ($n->status) {
                                            'live' => 'success', 'fault' => 'danger', default => 'secondary',
                                        };
                                    @endphp
                                    <span class="badge rounded-pill badge-subtle-{{ $tone }}">{{ ucfirst($n->status) }}</span>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-outline-secondary py-0 px-2" wire:click="edit({{ $n->id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger py-0 px-2 ms-1" wire:click="delete({{ $n->id }})"
                                        wire:confirm="{{ __('Remove this node?') }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-secondary py-5">
                                {{ __('Nothing on the plant yet. Add your head-end first, then the splitters it feeds.') }}
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>