@php
    $snapshot = $evaluation->scoreSnapshot;
    $benchmarkSeconds = (int) ($report['timing']['benchmark_seconds'] ?? 450);
    $totalSeconds = (int) ($report['timing']['total_seconds'] ?? 0);
    $deltaSeconds = $totalSeconds - $benchmarkSeconds;
    $deltaLabel = app(\App\Services\FireFitScoringService::class)->formatDelta($deltaSeconds);
    $isUnderBenchmark = $deltaSeconds < 0;
@endphp

<div class="space-y-6">
    <x-ui.card>
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="flex items-start gap-4">
                <x-app-logo class="h-12 w-auto" />
                <div>
                <h1 class="text-3xl font-bold text-firefit-black">{{ strtoupper($evaluation->candidate->full_name) }} | Fire Fit Circuit Evaluation Report</h1>
                <p class="mt-2 text-sm text-black/70">Generated {{ now()->format('M d, Y h:i A') }} · Evaluation #{{ $evaluation->id }}</p>
                </div>
            </div>

            <div class="flex flex-wrap gap-2 print:hidden">
                @if (auth()->user()?->hasAnyRole(['super_admin', 'admin', 'proctor']))
                    <x-ui.button type="button" variant="outline" onclick="window.location='{{ route('evaluations.session') }}'">Back to Session</x-ui.button>
                @elseif (auth()->user()?->hasRole('candidate'))
                    <x-ui.button type="button" variant="outline" onclick="window.location='{{ route('candidate.reports') }}'">Back to My Reports</x-ui.button>
                @endif

                @if (auth()->user()?->hasAnyRole(['super_admin', 'admin', 'proctor']))
                    @php $candidateEmail = $evaluation->candidate->email ?? null; @endphp
                    @if ($candidateEmail)
                        <div
                            x-data="{ confirming: false }"
                            class="flex items-center gap-2"
                        >
                            @if ($reportSent)
                                <span class="inline-flex items-center gap-1.5 rounded-xl border border-emerald-300/60 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700">
                                    Report Sent ✓
                                </span>
                            @else
                                {{-- Buttons: hidden while sendReport is executing --}}
                                <div wire:loading.remove wire:target="sendReport" class="flex items-center gap-2">
                                    <span x-show="!confirming">
                                        <x-ui.button type="button" variant="outline" x-on:click="confirming = true">
                                            Send to Candidate
                                        </x-ui.button>
                                    </span>
                                    <span x-show="confirming" class="flex items-center gap-2" style="display:none">
                                        <span class="text-xs text-black/60">Send to {{ $candidateEmail }}?</span>
                                        <x-ui.button type="button" wire:click="sendReport" x-on:click="confirming = false">Confirm</x-ui.button>
                                        <button type="button" x-on:click="confirming = false" class="text-xs text-black/50 hover:text-black/80 underline">Cancel</button>
                                    </span>
                                </div>

                                {{-- Loading state: visible only while sendReport is running --}}
                                <span
                                    wire:loading
                                    wire:target="sendReport"
                                    class="inline-flex items-center gap-2 rounded-xl border border-black/10 bg-black/5 px-4 py-2 text-sm font-semibold text-black/55"
                                >
                                    <svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                    </svg>
                                    Sending...
                                </span>
                            @endif
                        </div>
                    @else
                        <span class="inline-flex items-center rounded-xl border border-black/10 bg-black/5 px-4 py-2 text-xs font-semibold text-black/45" title="No email on file for this candidate">
                            No Email on File
                        </span>
                    @endif
                @endif

                <x-ui.button type="button" onclick="window.print()">Print / Save PDF</x-ui.button>
            </div>
        </div>
    </x-ui.card>

    <x-ui.card title="Performance Scorecard">
        <div class="grid gap-4 md:grid-cols-2">
            <div class="rounded-xl border border-black/10 bg-firefit-cream p-4">
                <p class="text-xs uppercase tracking-[0.12em] text-black/60">Total Score</p>
                <p class="mt-1 text-3xl font-bold">{{ $report['totals']['total_score'] ?? 0 }} / 20</p>
            </div>
            <div class="rounded-xl border border-black/10 bg-firefit-cream p-4">
                <p class="text-xs uppercase tracking-[0.12em] text-black/60">Tier</p>
                <p class="mt-1 text-3xl font-bold">{{ $report['totals']['tier'] ?? 'N/A' }}</p>
            </div>
        </div>

        <div class="mt-5 overflow-x-auto">
            <table class="min-w-full divide-y divide-black/10 text-sm">
                <thead>
                    <tr class="text-left text-xs uppercase tracking-[0.12em] text-black/60">
                        <th class="px-3 py-2">Metric</th>
                        <th class="px-3 py-2">Value</th>
                        <th class="px-3 py-2">Points</th>
                        <th class="px-3 py-2">Tier</th>
                        <th class="px-3 py-2">Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-black/5">
                    @foreach (($report['metrics'] ?? []) as $metric)
                        <tr>
                            <td class="px-3 py-2 font-semibold">{{ $metric['name'] }}</td>
                            <td class="px-3 py-2">{{ $metric['value'] }}</td>
                            <td class="px-3 py-2">{{ $metric['points'] }}</td>
                            <td class="px-3 py-2">{{ $metric['tier'] }}</td>
                            <td class="px-3 py-2 text-black/70">{{ $metric['notes'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-ui.card>

    <div class="grid gap-6 xl:grid-cols-2">
        <x-ui.card title="Candidate Information">
            <div class="grid gap-3 text-sm md:grid-cols-2">
                <p><span class="font-semibold">Name:</span> {{ $evaluation->candidate->full_name }}</p>
                <p><span class="font-semibold">Email:</span> {{ $evaluation->candidate->email ?? 'Not provided' }}</p>
                <p><span class="font-semibold">Birthdate:</span> {{ $evaluation->candidate->date_of_birth?->format('m/d/Y') ?? 'Not provided' }}</p>
                <p><span class="font-semibold">Age:</span> {{ $report['physiology']['age'] ?? 'Not calculated' }}</p>
                <p><span class="font-semibold">Height:</span> {{ $evaluation->candidate->height_in ? $evaluation->candidate->height_in.' in' : 'Not provided' }}</p>
                <p><span class="font-semibold">Weight:</span> {{ $evaluation->candidate->weight_lb ? $evaluation->candidate->weight_lb.' lb' : 'Not provided' }}</p>
                <p><span class="font-semibold">Gender:</span> {{ $evaluation->candidate->gender ?? 'Not provided' }}</p>
                <p><span class="font-semibold">Department:</span> {{ $evaluation->department?->name ?? 'Not assigned' }}</p>
                <p><span class="font-semibold">City:</span> {{ $evaluation->candidate->city ?? 'Not provided' }}</p>
                <p><span class="font-semibold">State:</span> {{ $evaluation->candidate->state ?? 'Not provided' }}</p>
                <p><span class="font-semibold">Evaluation Date:</span> {{ $evaluation->evaluated_at?->format('m/d/Y') ?? now()->format('m/d/Y') }}</p>
                <p><span class="font-semibold">Surface Type:</span> {{ $evaluation->surface_type ?? 'Not provided' }}</p>
            </div>
        </x-ui.card>

        <x-ui.card title="Testing Conditions">
            <div class="space-y-2 text-sm">
                <p><span class="font-semibold">Test Type:</span> {{ $evaluation->test_type ?? 'Not provided' }}</p>
                <p><span class="font-semibold">Added Load:</span> {{ $evaluation->added_load_lb ? $evaluation->added_load_lb.' lb' : 'Not captured' }}</p>
                <p><span class="font-semibold">3-Minute Resting HR:</span> {{ $evaluation->resting_hr ? $evaluation->resting_hr.' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">Proctor:</span> {{ $evaluation->proctor?->name ?? 'Not assigned' }}</p>
                <p><span class="font-semibold">Status:</span> {{ ucwords(str_replace('_', ' ', $evaluation->status->value)) }}</p>
            </div>
        </x-ui.card>
    </div>

    <x-ui.card title="Circuit Performance Summary">
        <div class="grid gap-4 md:grid-cols-3">
            <div class="rounded-xl border border-black/10 bg-white p-4">
                <p class="text-xs uppercase tracking-[0.12em] text-black/60">Total Circuit Time</p>
                <p class="mt-1 text-2xl font-bold">{{ $report['timing']['total_label'] }}</p>
                <p class="text-xs text-black/60">{{ $report['timing']['total_seconds'] }} seconds</p>
            </div>
            <div class="rounded-xl border border-black/10 bg-white p-4">
                <p class="text-xs uppercase tracking-[0.12em] text-black/60">Department Benchmark</p>
                <p class="mt-1 text-2xl font-bold">{{ app(\App\Services\FireFitScoringService::class)->formatDuration($benchmarkSeconds) }}</p>
            </div>
            <div class="rounded-xl border border-black/10 bg-white p-4">
                <p class="text-xs uppercase tracking-[0.12em] text-black/60">Status vs Benchmark</p>
                <p class="mt-1 text-2xl font-bold {{ $isUnderBenchmark ? 'text-emerald-700' : 'text-firefit-red' }}">{{ $deltaLabel }}</p>
                <p class="text-xs text-black/60">{{ $isUnderBenchmark ? 'Under benchmark' : 'Above benchmark' }}</p>
            </div>
        </div>
    </x-ui.card>

    <x-ui.card title="Task-by-Task Breakdown">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-black/10 text-sm">
                <thead>
                    <tr class="text-left text-xs uppercase tracking-[0.12em] text-black/60">
                        <th class="px-3 py-2">Segment</th>
                        <th class="px-3 py-2">Start</th>
                        <th class="px-3 py-2">End</th>
                        <th class="px-3 py-2">Duration</th>
                        <th class="px-3 py-2">Start HR</th>
                        <th class="px-3 py-2">End HR</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-black/5">
                    @foreach (($report['segments'] ?? []) as $segment)
                        <tr>
                            <td class="px-3 py-2 font-semibold">{{ $segment['label'] }}</td>
                            <td class="px-3 py-2">{{ $segment['start'] ? \Carbon\Carbon::parse($segment['start'])->format('H:i:s') : '—' }}</td>
                            <td class="px-3 py-2">{{ $segment['end'] ? \Carbon\Carbon::parse($segment['end'])->format('H:i:s') : '—' }}</td>
                            <td class="px-3 py-2">{{ $segment['duration_label'] }}</td>
                            <td class="px-3 py-2">{{ $segment['type'] === 'task' ? ($segment['start_hr'] ? $segment['start_hr'].' bpm' : 'Not captured') : '—' }}</td>
                            <td class="px-3 py-2">{{ $segment['type'] === 'task' ? ($segment['end_hr'] ? $segment['end_hr'].' bpm' : 'Not captured') : '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-ui.card>

    <div class="grid gap-6 xl:grid-cols-2">
        <x-ui.card title="100' Walk Utilization & Conditioning Index">
            <p class="text-sm"><span class="font-semibold">Total 100' Walk Time:</span> {{ $report['timing']['walk_label'] }} ({{ $report['timing']['walk_seconds'] }} sec)</p>
            <p class="mt-2 text-sm"><span class="font-semibold">Walk Percentage:</span> {{ $report['timing']['walk_percentage'] !== null ? number_format($report['timing']['walk_percentage'], 1).'%' : 'Not captured' }}</p>
            <p class="mt-2 text-sm text-black/70">
                {{ ($report['timing']['walk_percentage'] ?? 100) <= 27.9 ? 'Efficient transition utilization with strong conditioning carryover.' : 'Transition time can be reduced to improve conditioning score and total pace.' }}
            </p>
        </x-ui.card>

        <x-ui.card title="Physiological Response">
            <div class="space-y-1.5 text-sm">
                <p><span class="font-semibold">Peak HR During Circuit:</span> {{ $report['physiology']['peak_hr'] ? $report['physiology']['peak_hr'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">Final Working HR:</span> {{ $report['physiology']['final_working_hr'] ? $report['physiology']['final_working_hr'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">Age-Predicted Max HR:</span> {{ $report['physiology']['age_predicted_max_hr'] ? number_format($report['physiology']['age_predicted_max_hr'], 1).' bpm' : 'Not captured (DOB required)' }}</p>
                <p><span class="font-semibold">% of Age-Predicted Max at Peak:</span> {{ $report['physiology']['peak_hr_percent'] ? number_format($report['physiology']['peak_hr_percent'], 1).'%' : 'Not captured' }}</p>
            </div>

            <h3 class="mt-4 text-sm font-semibold uppercase tracking-[0.1em]">Recovery Metrics</h3>
            <div class="mt-2 space-y-1.5 text-sm">
                <p><span class="font-semibold">1-Min Recovery HR:</span> {{ $report['physiology']['recovery_1m'] ? $report['physiology']['recovery_1m'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">2-Min Recovery HR:</span> {{ $report['physiology']['recovery_2m'] ? $report['physiology']['recovery_2m'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">1st-Minute Drop:</span> {{ $report['physiology']['first_minute_drop'] !== null ? $report['physiology']['first_minute_drop'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">2nd-Minute Drop:</span> {{ $report['physiology']['second_minute_drop'] !== null ? $report['physiology']['second_minute_drop'].' bpm' : 'Not captured' }}</p>
                <p><span class="font-semibold">Average Recovery Rate:</span> {{ $report['physiology']['average_recovery_rate'] !== null ? number_format($report['physiology']['average_recovery_rate'], 1).' bpm/min' : 'Not captured' }}</p>
            </div>
        </x-ui.card>
    </div>

    <x-ui.card title="Performance Highlights">
        <ul class="list-disc space-y-1 pl-5 text-sm">
            @foreach (($report['highlights'] ?? []) as $highlight)
                <li>{{ $highlight }}</li>
            @endforeach
        </ul>
    </x-ui.card>

    <x-ui.card title="Operational Readiness Assessment">
        <div class="grid gap-6 md:grid-cols-3">
            <div>
                <h3 class="text-sm font-semibold uppercase tracking-[0.1em]">Strengths</h3>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-sm">
                    @foreach (($report['assessment']['strengths'] ?? []) as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
            <div>
                <h3 class="text-sm font-semibold uppercase tracking-[0.1em]">Areas for Development</h3>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-sm">
                    @foreach (($report['assessment']['areas'] ?? []) as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
            <div>
                <h3 class="text-sm font-semibold uppercase tracking-[0.1em]">Path to Excellent</h3>
                <ol class="mt-2 list-decimal space-y-1 pl-5 text-sm">
                    @foreach (($report['assessment']['path_to_excellent'] ?? []) as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ol>
            </div>
        </div>
    </x-ui.card>

    <x-ui.card title="Recommendations">
        <ul class="list-disc space-y-1 pl-5 text-sm">
            @foreach (($report['recommendations'] ?? []) as $recommendation)
                <li>{{ $recommendation }}</li>
            @endforeach
        </ul>
    </x-ui.card>

    <x-ui.card title="Certification">
        <div class="grid gap-3 text-sm md:grid-cols-3">
            <p><span class="font-semibold">Proctor Name:</span> {{ $evaluation->proctor?->name ?? 'Not assigned' }}</p>
            <p><span class="font-semibold">Proctor Signature:</span> On File</p>
            <p><span class="font-semibold">Evaluation Date:</span> {{ $evaluation->evaluated_at?->format('m/d/Y') ?? now()->format('m/d/Y') }}</p>
        </div>
    </x-ui.card>
</div>