@extends('layouts.admin')

@section('title', 'Billing Dashboard')

@section('content')
<div class="max-w-5xl">
    <p class="text-sm text-ink-muted mb-6">Current calendar month claim readiness, with billing-code resolution separated from the next-minute threshold.</p>

    {{-- Status summary --}}
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="card p-4 flex items-center gap-3.5">
            <div class="icon-badge bg-status-good/10">
                <span class="w-2.5 h-2.5 rounded-full bg-status-good"></span>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">Claim ready</p>
                <p class="text-2xl font-bold text-status-good">{{ $counts['green'] }}</p>
            </div>
        </div>
        <div class="card p-4 flex items-center gap-3.5">
            <div class="icon-badge bg-status-warning/10">
                <span class="w-2.5 h-2.5 rounded-full bg-status-warning"></span>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">Needs review</p>
                <p class="text-2xl font-bold text-status-warning">{{ $counts['amber'] }}</p>
            </div>
        </div>
        <div class="card p-4 flex items-center gap-3.5">
            <div class="icon-badge bg-status-critical/10">
                <span class="w-2.5 h-2.5 rounded-full bg-status-critical"></span>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">No code</p>
                <p class="text-2xl font-bold text-status-critical">{{ $counts['red'] }}</p>
            </div>
        </div>
    </div>

    {{-- Composition chart --}}
    <div class="card p-5 mb-8">
        <p class="text-xs font-semibold text-accent mb-3">Panel composition</p>
        <div class="h-10">
            <canvas id="compositionChart"></canvas>
        </div>
    </div>

    <div class="card overflow-hidden">
        <table class="table-shell">
            <thead>
                <tr>
                    <th class="text-left px-4 py-3 font-medium">Patient</th>
                    <th class="text-left px-4 py-3 font-medium">Status</th>
                    <th class="text-left px-4 py-3 font-medium">Stedi</th>
                    <th class="text-left px-4 py-3 font-medium">Minutes</th>
                    <th class="text-left px-4 py-3 font-medium">Days remaining</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                    <tr>
                        <td class="px-4 py-3 font-medium text-accent">{{ $row['patient']->user->name ?? '—' }}</td>
                        <td class="px-4 py-3">
                            @if (!$row['status'])
                                <span class="status-pill-critical">Not computed</span>
                            @elseif ($row['status']->color === 'green')
                                <span class="status-pill-good">Claim ready</span>
                            @elseif ($row['status']->color === 'amber')
                                <span class="status-pill-warning">{{ $row['status']->hasResolvedCode ? 'Code resolved; review' : 'Approaching' }}</span>
                            @else
                                <span class="status-pill-critical">No resolved code</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if ($row['claim'])
                                <span class="{{ $row['claim']->statusPillClass() }}">{{ $row['claim']->statusLabel() }}</span>
                            @else
                                <span class="status-pill-neutral">Not released</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-ink-secondary tabular-nums">
                            {{ $row['status']?->totalMinutes ?? 0 }} min
                            @if ($row['status']?->baseThresholdMinutes !== null)
                                <span class="block text-xs text-ink-muted">next band {{ $row['status']->baseThresholdMinutes }} min</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-ink-secondary tabular-nums">
                            {{ $row['status']?->daysRemainingInMonth !== null ? $row['status']->daysRemainingInMonth . ' days' : '—' }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('admin.billing.show', $row['patient']) }}" class="text-accent-hover font-medium hover:underline">Drill down</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
    new Chart(document.getElementById('compositionChart'), {
        type: 'bar',
        data: {
            labels: ['Panel'],
            datasets: [
                { label: 'Claim ready', data: [{{ $counts['green'] }}], backgroundColor: '#0ca30c', borderRadius: 4, borderSkipped: false },
                { label: 'Needs review', data: [{{ $counts['amber'] }}], backgroundColor: '#fab219', borderRadius: 4, borderSkipped: false },
                { label: 'No code', data: [{{ $counts['red'] }}], backgroundColor: '#d03b3b', borderRadius: 4, borderSkipped: false },
            ],
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { stacked: true, display: false },
                y: { stacked: true, display: false },
            },
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { color: '#6f7b8d', boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: 'circle' },
                },
                tooltip: { enabled: true },
            },
        },
    });
</script>
@endpush
@endsection