@extends('layouts.questionnaire')

@section('title', 'Hasil Kuesioner')

@section('content')
    @php
        $stressBadgeClass = $response->stress_category === 'Tinggi'
            ? 'bg-red-50 text-red-700 ring-red-200'
            : ($response->stress_category === 'Sedang'
                ? 'bg-amber-50 text-amber-700 ring-amber-200'
                : 'bg-emerald-50 text-emerald-700 ring-emerald-200');

        $academicBadgeClass = $response->academic_category === 'Baik'
            ? 'bg-emerald-50 text-emerald-700 ring-emerald-200'
            : ($response->academic_category === 'Sedang'
                ? 'bg-amber-50 text-amber-700 ring-amber-200'
                : 'bg-red-50 text-red-700 ring-red-200');

        $resultPayload = [
            'id' => $response->id,
            'name' => $response->student->name,
            'gender' => $response->student->gender,
            'className' => $response->student->class_name,
            'npsn' => $response->student->npsn,
            'stressScore' => $response->stress_score,
            'stressCategory' => $response->stress_category,
            'academicScore' => $response->academic_score,
            'academicCategory' => $response->academic_category,
            'conclusion' => $response->conclusion,
            'submittedAt' => $response->created_at?->toIso8601String(),
            'url' => route('questionnaire.result', $response),
        ];
    @endphp

    <section class="border-b border-slate-200 bg-white">
        <div class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-5 sm:px-6 lg:flex-row lg:items-end lg:justify-between lg:px-8">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-blue-700">Hasil kuesioner</p>
                <h1 class="mt-1 text-2xl font-bold leading-tight text-slate-950 sm:text-3xl">{{ $response->student->name }}</h1>
                <p class="mt-2 text-sm text-slate-600">
                    {{ $response->student->gender }} · Kelas {{ $response->student->class_name }} · NPSN {{ $response->student->npsn }}
                </p>
            </div>

            <div class="inline-flex w-fit items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700">
                <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                <span data-history-status>Tersimpan di browser ini</span>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-5xl px-4 py-5 sm:px-6 lg:px-8">
        <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_18rem] lg:items-start">
            <div class="space-y-4">
                <div class="grid gap-3 sm:grid-cols-2">
                    <div class="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Skor stres</p>
                                <p class="mt-2 text-3xl font-bold leading-none text-slate-950">{{ $response->stress_score }}</p>
                            </div>
                            <span class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $stressBadgeClass }}">
                                {{ $response->stress_category }}
                            </span>
                        </div>
                    </div>

                    <div class="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Skor akademik</p>
                                <p class="mt-2 text-3xl font-bold leading-none text-slate-950">{{ $response->academic_score }}</p>
                            </div>
                            <span class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $academicBadgeClass }}">
                                {{ $response->academic_category }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="rounded-md border border-blue-100 bg-blue-50 p-4">
                    <h2 class="text-sm font-semibold text-blue-950">Kesimpulan</h2>
                    <p class="mt-2 text-sm leading-6 text-blue-900">{{ $response->conclusion }}</p>
                </div>

                <div class="flex flex-col gap-2 sm:flex-row">
                    <a href="{{ route('questionnaire.create') }}" class="inline-flex justify-center rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Isi Kuesioner Lagi
                    </a>
                    <a href="{{ route('questionnaire.index') }}" class="inline-flex justify-center rounded-md border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Kembali ke Beranda
                    </a>
                </div>
            </div>

            <aside class="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h2 class="text-sm font-semibold text-slate-950">Riwayat</h2>
                        <p class="mt-1 text-xs text-slate-500">Tersimpan di browser</p>
                    </div>
                    <button type="button" class="rounded-md border border-slate-200 px-2.5 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50" data-clear-history>
                        Hapus
                    </button>
                </div>

                <div class="mt-4 space-y-2" data-result-history></div>

                <p class="mt-4 hidden rounded-md bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500" data-empty-history>
                    Belum ada riwayat lain di browser ini.
                </p>
            </aside>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const storageKey = 'questionnaire.result.history.v1';
            const currentResult = {
                ...@json($resultPayload),
                savedAt: new Date().toISOString(),
            };
            const historyList = document.querySelector('[data-result-history]');
            const emptyHistory = document.querySelector('[data-empty-history]');
            const clearButton = document.querySelector('[data-clear-history]');
            const historyStatus = document.querySelector('[data-history-status]');

            const readHistory = () => {
                try {
                    const parsed = JSON.parse(localStorage.getItem(storageKey) || '[]');
                    return Array.isArray(parsed) ? parsed.filter((item) => item && item.id) : [];
                } catch (error) {
                    return [];
                }
            };

            const writeHistory = (items) => {
                localStorage.setItem(storageKey, JSON.stringify(items.slice(0, 25)));
            };

            const formatDate = (value) => {
                if (!value) {
                    return '-';
                }

                const date = new Date(value);

                if (Number.isNaN(date.getTime())) {
                    return '-';
                }

                return new Intl.DateTimeFormat('id-ID', {
                    dateStyle: 'medium',
                    timeStyle: 'short',
                }).format(date);
            };

            const badgeClass = (category, type) => {
                if (type === 'academic' && category === 'Baik') {
                    return 'bg-emerald-50 text-emerald-700 ring-emerald-200';
                }

                if (category === 'Rendah') {
                    return type === 'stress'
                        ? 'bg-emerald-50 text-emerald-700 ring-emerald-200'
                        : 'bg-red-50 text-red-700 ring-red-200';
                }

                if (category === 'Sedang') {
                    return 'bg-amber-50 text-amber-700 ring-amber-200';
                }

                return 'bg-red-50 text-red-700 ring-red-200';
            };

            const addText = (element, text) => {
                element.textContent = text ?? '';
                return element;
            };

            const renderBadge = (text, className) => {
                const badge = document.createElement('span');
                badge.className = `rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 ${className}`;
                return addText(badge, text);
            };

            const renderHistory = (items) => {
                if (!historyList || !emptyHistory) {
                    return;
                }

                historyList.replaceChildren();

                if (items.length <= 1) {
                    emptyHistory.classList.remove('hidden');
                    return;
                }

                emptyHistory.classList.add('hidden');

                items.forEach((item) => {
                    const card = document.createElement('a');
                    card.href = item.url || '#';
                    card.className = 'block rounded-md border border-slate-200 bg-slate-50 p-3 transition hover:border-blue-200 hover:bg-blue-50';

                    const title = document.createElement('p');
                    title.className = 'truncate text-sm font-semibold text-slate-950';
                    addText(title, item.name);

                    const meta = document.createElement('p');
                    meta.className = 'mt-1 text-xs text-slate-500';
                    addText(meta, `${item.className || '-'} · ${formatDate(item.savedAt || item.submittedAt)}`);

                    const scores = document.createElement('div');
                    scores.className = 'mt-3 flex flex-wrap gap-1.5';
                    scores.append(
                        renderBadge(`Stres ${item.stressScore} · ${item.stressCategory}`, badgeClass(item.stressCategory, 'stress')),
                        renderBadge(`Akademik ${item.academicScore} · ${item.academicCategory}`, badgeClass(item.academicCategory, 'academic')),
                    );

                    card.append(title, meta, scores);
                    historyList.append(card);
                });
            };

            const saveCurrentResult = () => {
                const items = readHistory();
                const withoutCurrent = items.filter((item) => String(item.id) !== String(currentResult.id));
                const nextItems = [currentResult, ...withoutCurrent];

                writeHistory(nextItems);

                if (historyStatus) {
                    historyStatus.textContent = 'Tersimpan di browser ini';
                }

                renderHistory(nextItems);
            };

            if (clearButton) {
                clearButton.addEventListener('click', () => {
                    writeHistory([currentResult]);
                    renderHistory([currentResult]);

                    if (historyStatus) {
                        historyStatus.textContent = 'Riwayat dibersihkan';
                    }
                });
            }

            saveCurrentResult();
        });
    </script>
@endpush