@extends('layouts.admin')
@section('title', 'Dashboard')
@section('heading', 'Administration Overview')
@use('App\Models\InternEvaluation', 'E')
@use('App\Models\InternHospitalAllocation', 'Allocation')
@section('content')
@php
    // Workflow stages for the cycle chart — palette validated (CVD + contrast) with the dataviz validator.
    $stages = [
        'with_slmc'   => ['Received by SLMC',  '#059669', 'ri-lock-2-line'],
        'director'    => ['With director',     '#4f46e5', 'ri-hospital-line'],
        'returned'    => ['Returned',          '#ea580c', 'ri-arrow-go-back-line'],
        'consultant'  => ['With consultant',   '#2563eb', 'ri-stethoscope-line'],
        'draft'       => ['Draft',             '#94a3b8', 'ri-draft-line'],
        'not_started' => ['Not started',       '#e2e8f0', 'ri-time-line'],
    ];
    $typeChip = ['main' => 'bg-white text-slmc', 'repeat' => 'bg-orange-500 text-white'];
    $cycleState = ['completed' => 'bg-emerald-400', 'current' => 'bg-white', 'upcoming' => 'bg-white/20'];
    $scope = $batch ? $batch->name : 'All batches';
@endphp

{{-- ═════════ Batch filter (parent) ═════════ --}}
<form method="GET" class="admin-card mb-6 flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:p-5">
    <label for="batch" class="flex shrink-0 items-center gap-2 text-sm font-bold text-slmc">
        <span class="flex size-9 items-center justify-center rounded-xl bg-slmc text-white"><i class="ri-stack-line"></i></span>
        Internship batch
    </label>
    <select id="batch" name="batch" onchange="this.form.submit()"
        class="min-w-0 flex-1 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-800 focus:border-blue-300 focus:ring-2 focus:ring-blue-100 focus:outline-none">
        <option value="all" @selected(! $batch)>All batches ({{ $batches->count() }})</option>
        @foreach($batches->groupBy('year') as $year => $group)
            <optgroup label="{{ $year }}">
                @foreach($group as $b)
                    <option value="{{ $b->id }}" @selected($batch?->id === $b->id)>{{ $b->name }} · {{ $b->typeLabel() }}{{ $b->is_active ? '' : ' (inactive)' }}</option>
                @endforeach
            </optgroup>
        @endforeach
    </select>
    <noscript><button class="bg-login-panel rounded-xl px-4 py-2.5 text-sm font-semibold text-white">Apply</button></noscript>
    <a href="{{ route('admin.batches.create') }}" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slmc hover:bg-slmc-tint"><i class="ri-add-line"></i> New batch</a>
</form>

{{-- ═════════ Batch summary ═════════ --}}
<section class="bg-slmc-hero relative mb-6 overflow-hidden rounded-3xl p-6 text-white shadow-xl sm:p-8">
    @if($batch)
        <div class="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
            <div class="min-w-0">
                <div class="mb-3 flex flex-wrap items-center gap-2">
                    <span class="rounded-full px-3 py-1 text-xs font-bold tracking-wider uppercase {{ $typeChip[$batch->type] ?? $typeChip['main'] }}">{{ $batch->typeLabel() }} batch · {{ $batch->year }}</span>
                    <span class="font-mono text-xs text-blue-200">{{ $batch->code }}</span>
                </div>
                <h2 class="text-2xl font-bold sm:text-3xl">{{ $batch->name }}</h2>
                <p class="mt-1 text-sm text-blue-100/85"><i class="ri-calendar-line"></i> {{ $batch->starts_on->format('j M Y') }} – {{ $batch->ends_on->format('j M Y') }}</p>
            </div>
            <div class="flex shrink-0 gap-2">
                <a href="{{ route('admin.batches.show', $batch) }}" class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-slmc hover:bg-slmc-tint"><i class="ri-eye-line"></i> Batch details</a>
            </div>
        </div>

        {{-- Cycle timeline --}}
        <div class="relative mt-7">
            <div class="mb-2 flex justify-between text-xs text-blue-100"><span>Internship year progress</span><span class="font-semibold">{{ $batch->progressPercent() }}%</span></div>
            <div class="grid grid-cols-4 gap-1.5">
                @foreach($batch->cycles as $c)
                    <div>
                        <div class="relative h-2.5 overflow-hidden rounded-full bg-white/15">
                            @php $pct = $c->state() === 'completed' ? 100 : ($c->state() === 'current' ? max(4, round($c->starts_on->diffInDays(now()) / max(1, $c->starts_on->diffInDays($c->ends_on)) * 100)) : 0); @endphp
                            <span class="absolute inset-y-0 left-0 rounded-full {{ $c->state() === 'completed' ? 'bg-emerald-400' : 'bg-linear-to-r from-orange-400 to-amber-200' }}" style="width: {{ $pct }}%"></span>
                        </div>
                        <p class="mt-2 text-xs font-bold">Q{{ $c->quarter }} <span class="font-medium text-blue-200">· P{{ $c->period }}</span>
                            @if($c->state() === 'current')<span class="ml-1 rounded bg-white px-1.5 py-0.5 text-[10px] font-bold text-slmc">Now</span>@endif</p>
                        <p class="hidden text-[11px] text-blue-200 sm:block">{{ $c->starts_on->format('j M') }} – {{ $c->ends_on->format('j M Y') }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    @else
        <div class="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
                <p class="text-xs font-semibold tracking-[.2em] text-blue-100 uppercase">All batches</p>
                <h2 class="mt-1 text-2xl font-bold sm:text-3xl">SLMC internship programme</h2>
                <p class="mt-1 max-w-xl text-sm text-blue-100/85">Combined figures across every main and repeat batch. Choose a batch above to focus on one intake.</p>
            </div>
            <div class="flex gap-3">
                @foreach([['Batches', $batches->count()], ['Active', $batches->where('is_active', true)->count()]] as [$l, $v])
                    <div class="rounded-2xl bg-white/10 px-5 py-4 ring-1 ring-white/15 backdrop-blur"><p class="text-[10px] font-semibold tracking-wider text-blue-200 uppercase">{{ $l }}</p><p class="text-3xl font-extrabold">{{ $v }}</p></div>
                @endforeach
            </div>
        </div>
    @endif
</section>

{{-- ═════════ KPIs ═════════ --}}
<div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5">
    @foreach($kpis as [$label, $value, $icon, $tint, $url, $sub])
        <a href="{{ $url }}" class="admin-card group relative flex items-center gap-3 p-4 transition hover:-translate-y-0.5 hover:shadow-lg {{ $loop->last ? 'col-span-2 md:col-span-1' : '' }}">
            <span class="flex size-11 shrink-0 items-center justify-center rounded-2xl text-xl {{ $tint }}"><i class="{{ $icon }}"></i></span>
            <div class="min-w-0">
                <p class="text-2xl leading-tight font-extrabold text-slmc">{{ number_format($value) }}</p>
                <p class="truncate text-xs font-semibold text-slate-500" title="{{ $label }}">{{ $label }}</p>
                @if($sub)<p class="truncate text-[11px] text-gray-400">{{ $sub }}</p>@endif
            </div>
            <i class="ri-arrow-right-up-line absolute top-3 right-3 text-sm text-slate-300 transition group-hover:text-slmc"></i>
        </a>
    @endforeach
</div>

<div class="mb-6 grid gap-6 xl:grid-cols-3 xl:items-start">
    {{-- ═════════ Cycle progress chart ═════════ --}}
    <section class="admin-card p-5 sm:p-6 xl:col-span-2">
        <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
            <div>
                <h3 class="text-lg font-bold text-slmc">Evaluation progress by cycle</h3>
                <p class="text-sm text-gray-500">{{ $scope }} · {{ number_format($internCount) }} interns, one evaluation each per cycle</p>
            </div>
            <a href="{{ route('admin.evaluations.index') }}" class="shrink-0 text-sm font-semibold text-slmc-600 hover:underline">All evaluations</a>
        </div>

        {{-- Legend --}}
        <ul class="mb-5 flex flex-wrap gap-x-4 gap-y-2 text-xs text-gray-600" aria-label="Legend">
            @foreach($stages as [$label, $color])
                <li class="inline-flex items-center gap-1.5"><span class="size-3 rounded-sm" style="background: {{ $color }}"></span>{{ $label }}</li>
            @endforeach
        </ul>

        @if($internCount === 0)
            <div class="rounded-2xl border-2 border-dashed border-slate-200 p-8 text-center text-sm text-gray-500"><i class="ri-bar-chart-horizontal-line mb-2 block text-3xl text-slate-300"></i>No interns are allocated to {{ $batch ? 'this batch' : 'any batch' }} yet.</div>
        @else
            <div class="space-y-4" role="img" aria-label="Stacked bars of evaluation stages for cycles 1 to 4">
                @foreach($cycles as $q => $counts)
                    @php $done = $counts['with_slmc']; @endphp
                    <div class="grid grid-cols-[3.5rem_1fr_3.5rem] items-center gap-3">
                        <div>
                            <p class="text-sm font-bold text-slmc">Q{{ $q }}</p>
                            <p class="text-[10px] text-gray-400">P{{ (int) ceil($q / 2) }}</p>
                        </div>
                        <div class="flex h-7 gap-[2px]">
                            @foreach($stages as $key => [$label, $color])
                                @if($counts[$key] > 0)
                                    <div class="group relative h-full min-w-[6px] first:rounded-l last:rounded-r" style="flex: {{ $counts[$key] }} 0 0; background: {{ $color }}" tabindex="0" aria-label="{{ $label }}: {{ $counts[$key] }}">
                                        <div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-2 text-xs whitespace-nowrap text-white shadow-lg group-hover:block group-focus:block">
                                            <p class="font-semibold">Evaluation {{ $q }} · {{ $label }}</p>
                                            <p class="text-slate-300">{{ $counts[$key] }} of {{ $internCount }} interns ({{ round($counts[$key] / $internCount * 100) }}%)</p>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <p class="text-right text-sm font-bold text-slmc">{{ round($done / $internCount * 100) }}%<span class="block text-[10px] font-medium text-gray-400">to SLMC</span></p>
                    </div>
                @endforeach
            </div>

            {{-- Table view --}}
            <details class="mt-5 rounded-xl border border-slate-100">
                <summary class="cursor-pointer px-4 py-2.5 text-xs font-semibold text-slmc-600 select-none">Show as table</summary>
                <div class="overflow-x-auto">
                    <table class="admin-table text-xs">
                        <thead><tr><th>Cycle</th>@foreach($stages as [$label])<th class="text-right">{{ $label }}</th>@endforeach</tr></thead>
                        <tbody>
                            @foreach($cycles as $q => $counts)
                                <tr><td class="font-semibold text-slmc">Evaluation {{ $q }}</td>@foreach($stages as $key => $s)<td class="text-right">{{ $counts[$key] }}</td>@endforeach</tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </details>
        @endif
    </section>

    {{-- ═════════ Needs attention ═════════ --}}
    <section class="admin-card p-5 sm:p-6">
        <h3 class="text-lg font-bold text-slmc">Needs attention</h3>
        <p class="mb-4 text-sm text-gray-500">{{ $scope }}</p>
        <ul class="space-y-3">
            @foreach($attention as [$icon, $label, $count, $url])
                <li>
                    <a href="{{ $url }}" class="flex items-center gap-3 rounded-2xl p-3 ring-1 transition {{ $count ? 'bg-amber-50/70 ring-amber-200 hover:bg-amber-50' : 'ring-slate-100 hover:bg-slate-50' }}">
                        <span class="flex size-10 shrink-0 items-center justify-center rounded-xl text-lg {{ $count ? 'bg-amber-100 text-amber-600' : 'bg-emerald-50 text-emerald-600' }}"><i class="{{ $count ? $icon : 'ri-check-line' }}"></i></span>
                        <span class="min-w-0 flex-1 text-sm font-medium text-gray-700">{{ $label }}</span>
                        <span class="text-lg font-extrabold {{ $count ? 'text-amber-700' : 'text-emerald-600' }}">{{ $count }}</span>
                    </a>
                </li>
            @endforeach
        </ul>

        <div class="mt-5 border-t border-slate-100 pt-4">
            <p class="mb-2 text-xs font-bold tracking-wider text-slate-500 uppercase">Workflow totals</p>
            <ul class="space-y-1.5 text-sm">
                @foreach($pipeline as $status => $count)
                    <li><a href="{{ route('admin.evaluations.index', ['status' => $status]) }}" class="flex items-center justify-between gap-3 rounded-lg px-2 py-1 hover:bg-slate-50">
                        <span class="flex items-center gap-2 text-gray-600"><i class="{{ E::STATUS_META[$status][2] }} text-slate-400"></i>{{ E::STATUS_META[$status][0] }}</span>
                        <span class="font-bold text-slmc">{{ $count }}</span></a></li>
                @endforeach
            </ul>
        </div>
    </section>
</div>

<div class="grid gap-6 xl:grid-cols-3">
    {{-- ═════════ Hospitals ═════════ --}}
    <section class="admin-card overflow-hidden xl:col-span-2">
        <div class="flex items-center justify-between gap-3 p-5 pb-4 sm:p-6 sm:pb-4">
            <div>
                <h3 class="text-lg font-bold text-slmc">Hospitals</h3>
                <p class="text-sm text-gray-500">{{ $batch ? 'Hospitals with interns in this batch' : 'Top hospitals by placements' }}</p>
            </div>
            <a href="{{ route('admin.hospitals.index') }}" class="shrink-0 text-sm font-semibold text-slmc-600 hover:underline">View all</a>
        </div>
        <div class="overflow-x-auto">
            <table class="admin-table">
                <thead><tr><th>Hospital</th><th class="text-center">Interns</th><th class="hidden text-center sm:table-cell">No consultant</th><th class="hidden text-center 2xl:table-cell">With director</th><th class="text-center">To SLMC</th></tr></thead>
                <tbody>
                    @forelse($hospitals as $h)
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    <span class="hidden size-9 shrink-0 items-center justify-center rounded-xl bg-slmc-tint text-slmc-600 sm:flex"><i class="ri-hospital-line"></i></span>
                                    <div class="min-w-0"><p class="truncate font-semibold text-slmc">{{ $h->name }}</p><p class="text-xs text-gray-500">{{ $h->code }}{{ $h->district ? ' · '.$h->district : '' }}</p></div>
                                </div>
                            </td>
                            <td class="text-center font-semibold text-slmc">{{ $h->interns_count }}</td>
                            <td class="hidden text-center sm:table-cell">
                                @if($h->no_consultant_count)<span class="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-bold text-amber-700 ring-1 ring-amber-200">{{ $h->no_consultant_count }}</span>@else<span class="text-gray-300">0</span>@endif
                            </td>
                            <td class="hidden text-center 2xl:table-cell">{{ $h->with_director_count }}</td>
                            <td class="text-center font-semibold text-emerald-700">{{ $h->received_count }}</td>
                        </tr>
                    @empty
                        @include('admin.partials.empty', ['cols' => 5, 'message' => 'No hospitals in this batch yet', 'icon' => 'ri-hospital-line'])
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- ═════════ Recent activity ═════════ --}}
    <section class="admin-card p-5 sm:p-6">
        <h3 class="mb-4 text-lg font-bold text-slmc">Recent activity</h3>
        <ul class="divide-y divide-slate-100">
            @forelse($recent as $a)
                <li class="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                    <span @class(['flex size-8 shrink-0 items-center justify-center rounded-full text-sm',
                        'bg-emerald-100 text-emerald-700' => $a->action === 'approve', 'bg-orange-100 text-orange-700' => $a->action === 'return',
                        'bg-blue-100 text-blue-700' => $a->action === 'submit', 'bg-slate-100 text-slate-500' => $a->action === 'save'])>
                        <i class="{{ ['approve' => 'ri-check-double-line', 'return' => 'ri-arrow-go-back-line', 'submit' => 'ri-send-plane-line', 'save' => 'ri-save-line'][$a->action] ?? 'ri-record-circle-line' }}"></i>
                    </span>
                    <div class="min-w-0 flex-1 text-sm">
                        <p class="text-gray-700"><span class="font-semibold text-slmc">{{ $a->actor_name }}</span> · {{ strtolower($a->label()) }}</p>
                        @if($a->evaluation)
                            <a href="{{ route('admin.evaluations.show', $a->evaluation) }}" class="block truncate text-xs text-gray-500 hover:text-slmc hover:underline">Q{{ $a->evaluation->quarter }} · {{ $a->evaluation->allocation?->intern?->name }}</a>
                        @endif
                        <time class="text-[11px] text-gray-400" datetime="{{ $a->created_at->toIso8601String() }}">{{ $a->created_at->diffForHumans() }}</time>
                    </div>
                </li>
            @empty
                <li class="py-8 text-center text-sm text-gray-500">No evaluation activity {{ $batch ? 'in this batch ' : '' }}yet.</li>
            @endforelse
        </ul>
    </section>
</div>
@endsection