<x-app-shell title="Resume Version History" max="max-w-5xl">
    <section class="surface p-5 sm:p-7">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="eyebrow">Resume history</p>
                <h1 class="page-title mt-2">Every uploaded resume version.</h1>
                <p class="body-copy mt-3 max-w-2xl">Use this history to compare ATS scores, remote-readiness, and extracted skills across uploads.</p>
            </div>
            <a class="btn-primary shrink-0" href="{{ route('resume.show') }}">Upload another resume</a>
        </div>
    </section>

    <section class="mt-5 grid gap-4">
        @forelse ($resumeReports as $report)
            <article class="surface-tight p-5">
                <div class="grid gap-4 lg:grid-cols-[1fr_0.42fr] lg:items-start">
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            @if ($report->is_current)
                                <span class="chip-accent">Current</span>
                            @endif
                            <span class="chip">{{ str($report->status)->headline() }}</span>
                            <span class="chip">{{ number_format($report->size_bytes / 1024, 1) }} KB</span>
                        </div>
                        <h2 class="mt-3 break-words text-xl font-black text-slate-950">{{ $report->original_filename }}</h2>
                        <p class="muted-copy mt-1">Uploaded {{ $report->created_at?->format('M j, Y g:i A') }}</p>
                        @if ($report->analysis['summary'] ?? null)
                            <p class="muted-copy mt-3">{{ $report->analysis['summary'] }}</p>
                        @endif
                    </div>

                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                        <div class="metric-card">
                            <p class="muted-copy">ATS score</p>
                            <p class="mt-1 text-3xl font-black text-slate-950">{{ $report->ats_score ?? '—' }}<span class="text-sm text-slate-500">/100</span></p>
                        </div>
                        <div class="metric-card">
                            <p class="muted-copy">Remote-readiness</p>
                            <p class="mt-1 text-3xl font-black text-slate-950">{{ $report->remote_readiness_score ?? '—' }}<span class="text-sm text-slate-500">/100</span></p>
                        </div>
                    </div>
                </div>
            </article>
        @empty
            <section class="surface p-8 text-center">
                <p class="text-lg font-black text-slate-950">No resume versions yet.</p>
                <p class="muted-copy mt-2">Upload your first resume to start AI analysis.</p>
                <a class="btn-primary mt-5" href="{{ route('resume.show') }}">Upload resume</a>
            </section>
        @endforelse
    </section>
</x-app-shell>
