<div wire:poll.60s>
    <x-title>Claims Handler Dashboard</x-title>

    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-end g-3">
                <div class="col-12 col-lg">
                    <h4 class="card-title mb-1">
                        {{ $handler->name_first }} {{ $handler->name_last }}
                    </h4>
                    <p class="text-muted mb-0">
                        Workload, client progress and daily performance.
                    </p>
                </div>

                @can('users.view')
                    <div class="col-12 col-md-6 col-lg-3">
                        <label for="handler-select" class="form-label">Claims Handler</label>
                        <select id="handler-select"
                                class="form-select"
                                wire:model.live="handlerId">
                            @foreach($handlerOptions as $option)
                                <option value="{{ $option->id }}">
                                    {{ $option->name_first }} {{ $option->name_last }}
                                    - {{ $option->solicitor?->name ?? 'Platform' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3">
                        <label for="report-month" class="form-label">Monthly Report</label>
                        <input id="report-month"
                               type="month"
                               class="form-control"
                               wire:model.live="reportMonth">
                    </div>
                @endcan
            </div>
        </div>
    </div>

    <div class="row g-4">
        @foreach($cards as $card)
            @php
                $color = match ($card['tone']) {
                    'orange' => 'warning',
                    'green' => 'success',
                    'red' => 'danger',
                    'purple' => 'info',
                    default => 'primary',
                };
            @endphp

            <div class="col-12 col-md-6 col-xl-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex flex-column">
                        <div @if($card['key'] !== 'wip')
                                 role="button"
                                 tabindex="0"
                                 wire:click="showMetric('{{ $card['key'] }}', 'all')"
                                 wire:keydown.enter="showMetric('{{ $card['key'] }}', 'all')"
                             @endif>
                            <div class="d-flex align-items-start mb-3">
                                <div class="avatar-sm bg-{{ $color }}-subtle rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 me-3"
                                     style="width: 40px; height: 40px;">
                                    <i class="mdi {{ $card['icon'] }} text-{{ $color }} fs-4"></i>
                                </div>

                                <div class="flex-grow-1">
                                    <h5 class="font-size-15 fw-semibold mb-1">{{ $card['title'] }}</h5>

                                    @isset($card['value'])
                                        <div class="fs-2 fw-bold text-{{ $color }}">
                                            {{ number_format($card['value']) }}
                                        </div>
                                    @endisset

                                    <div class="text-muted small">{{ $card['description'] }}</div>
                                </div>
                            </div>
                        </div>

                        @isset($card['periods'])
                            <div class="row g-0 border-top pt-3 mt-auto text-center">
                                <div class="col border-end rounded py-1 {{ $activeMetric === $card['key'] && $activePeriod === 'today' ? 'bg-light' : '' }}"
                                     role="button"
                                     tabindex="0"
                                     wire:click="showMetric('{{ $card['key'] }}', 'today')"
                                     wire:keydown.enter="showMetric('{{ $card['key'] }}', 'today')">
                                    <div class="text-muted small">Today</div>
                                    <div class="fs-5 fw-bold text-{{ $color }}">
                                        {{ number_format($card['periods']['today']) }}
                                    </div>
                                </div>

                                <div class="col border-end rounded py-1 {{ $activeMetric === $card['key'] && $activePeriod === 'week' ? 'bg-light' : '' }}"
                                     role="button"
                                     tabindex="0"
                                     wire:click="showMetric('{{ $card['key'] }}', 'week')"
                                     wire:keydown.enter="showMetric('{{ $card['key'] }}', 'week')">
                                    <div class="text-muted small">This Week</div>
                                    <div class="fs-5 fw-bold text-{{ $color }}">
                                        {{ number_format($card['periods']['week']) }}
                                    </div>
                                </div>

                                <div class="col rounded py-1 {{ $activeMetric === $card['key'] && $activePeriod === 'month' ? 'bg-light' : '' }}"
                                     role="button"
                                     tabindex="0"
                                     wire:click="showMetric('{{ $card['key'] }}', 'month')"
                                     wire:keydown.enter="showMetric('{{ $card['key'] }}', 'month')">
                                    <div class="text-muted small">{{ $monthLabel }}</div>
                                    <div class="fs-5 fw-bold text-{{ $color }}">
                                        {{ number_format($card['periods']['month']) }}
                                    </div>
                                </div>
                            </div>
                        @endisset

                        @isset($card['progress'])
                            <div class="mt-auto">
                                <div class="progress">
                                    <div class="progress-bar"
                                         role="progressbar"
                                         style="width: {{ $card['progress']['max'] ? min(100, ($card['progress']['value'] / $card['progress']['max']) * 100) : 0 }}%">
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2 text-muted small">
                                    <span>0</span>
                                    <span>{{ number_format($card['progress']['max']) }}</span>
                                </div>
                            </div>
                        @endisset
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if($activeList)
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="card-title mb-1">{{ $activeList['title'] }}</h5>
                    <div class="text-muted small">
                        {{ $activeList['subtitle'] }}
                        - {{ $activePeriodLabel }}
                        - {{ $activeList['items']->count() }} files
                    </div>
                </div>

                <button type="button"
                        class="btn btn-sm btn-light"
                        wire:click="closeMetric"
                        aria-label="Close">
                    <i class="mdi mdi-close"></i>
                </button>
            </div>

            <div class="card-body p-0">
                @if($activeList['items']->isEmpty())
                    <div class="text-center text-muted py-5">
                        <i class="mdi mdi-check-circle-outline d-block fs-3 text-success mb-2"></i>
                        No files make up this figure.
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover table-centered mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Reference</th>
                                <th>Client</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($activeList['items'] as $item)
                                <tr>
                                    <td class="fw-semibold text-primary">{{ $item['reference'] }}</td>
                                    <td>{{ $item['name'] }}</td>
                                    <td>
                                        <span class="badge bg-light text-dark">{{ $item['status'] }}</span>
                                    </td>
                                    <td class="text-muted">{{ $item['created'] }}</td>
                                    <td class="text-end">
                                        <a wire:navigate
                                           href="{{ $item['url'] }}"
                                           class="btn btn-sm btn-outline-primary">
                                            View File
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    @endif

    <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-white d-flex align-items-center justify-content-between">
            <div>
                <h5 class="card-title mb-1">New Leads Queue</h5>
                <div class="text-muted small">
                    Unassigned API leads are removed automatically when a handler is added.
                </div>
            </div>
            <span class="badge bg-primary">{{ $leadQueue->count() }} waiting</span>
        </div>

        <div class="table-responsive overflow-auto" style="max-height: 320px;">
            <table class="table table-hover table-centered mb-0">
                <thead class="table-light sticky-top">
                <tr>
                    <th>Client</th>
                    <th>Reference</th>
                    <th>Lead Source</th>
                    <th>Received</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @forelse($leadQueue as $lead)
                    <tr>
                        <td class="fw-semibold">
                            {{ $lead->getRawOriginal('name_first') }}
                            {{ $lead->getRawOriginal('name_last') }}
                        </td>
                        <td>{{ $lead->reference ?: $lead->display_id }}</td>
                        <td>{{ $lead->leadSource?->display_name ?? 'API' }}</td>
                        <td class="text-muted">{{ $lead->created_at?->diffForHumans() }}</td>
                        <td class="text-end">
                            <a wire:navigate
                               href="{{ route('clients.show', $lead) }}"
                               class="btn btn-sm btn-outline-primary">
                                View Lead
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-5">
                            <i class="mdi mdi-inbox-check-outline d-block fs-3 text-success mb-2"></i>
                            All new leads have been assigned.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
