@extends('frontend.layouts.app')

@section('title', 'Quiz Result')
@php
    $hideFooter = true;
    $hideHeader = true;

    $percentage = round($result->percentage, 2);
    $tier = $percentage >= 75 ? 'high' : ($percentage >= 40 ? 'mid' : 'low');
    $ringOffset = 100 - max(min($percentage, 100), 0);
@endphp
@section('content')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap"
        rel="stylesheet">

    <section class="result-page">
        <div class="result-shell">

            {{-- Top bar --}}
            <header class="result-topbar">
                <div class="result-topbar__title">
                    <span class="result-icon" aria-hidden="true">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M8 21h8M12 17v4M6 4h12v3a6 6 0 0 1-12 0V4Z" stroke="currentColor" stroke-width="1.8"
                                stroke-linejoin="round" />
                            <path d="M6 5H4a2 2 0 0 0 0 4h1M18 5h2a2 2 0 0 1 0 4h-1" stroke="currentColor"
                                stroke-width="1.8" stroke-linecap="round" />
                        </svg>
                    </span>
                    <div>
                        <p class="result-eyebrow">{{ $contest->title }}</p>
                        <p class="result-subtle">
                            <span class="result-text-en">Result summary</span>
                            <span class="result-text-hi">परिणाम सारांश</span>
                        </p>
                    </div>
                </div>

                <div class="result-language-toggle" role="group" aria-label="Select language">
                    <button type="button" class="result-language-btn is-active" data-language="en">
                        English
                    </button>
                    <button type="button" class="result-language-btn" data-language="hi">
                        हिंदी
                    </button>
                </div>

                <a href="{{ route('contest.details', $contest->id) }}" class="result-btn result-btn--ghost">
                    Back to contest
                </a>
            </header>

            <div class="result-hero">
                <div class="result-ring result-ring--{{ $tier }}" aria-hidden="true">
                    <svg viewBox="0 0 100 100">
                        <circle class="result-ring__track" cx="50" cy="50" r="42" pathLength="100" />
                        <circle class="result-ring__fill" cx="50" cy="50" r="42" pathLength="100"
                            stroke-dasharray="100" stroke-dashoffset="{{ $ringOffset }}" />
                    </svg>
                    <div class="result-ring__label">
                        <strong>{{ number_format($percentage, 1) }}%</strong>
                        <span>scored</span>
                    </div>
                </div>

                <div class="result-stats">
                    <div class="result-stat">
                        <span class="result-stat__label">
                            <span class="result-text-en">Score</span>
                            <span class="result-text-hi">स्कोर</span>
                        </span>
                        <span class="result-stat__value">{{ number_format($result->score, 2) }}</span>
                    </div>
                    <div class="result-stat">
                        <span class="result-stat__label">
                            <span class="result-text-en">Correct</span>
                            <span class="result-text-hi">सही</span>
                        </span>
                        <span
                            class="result-stat__value result-stat__value--success">{{ $result->correct_answers }}<small>/{{ $result->total_questions }}</small></span>
                    </div>
                    <div class="result-stat">
                        <span class="result-stat__label">
                            <span class="result-text-en">Wrong</span>
                            <span class="result-text-hi">गलत</span>
                        </span>
                        <span class="result-stat__value result-stat__value--danger">{{ $result->wrong_answers }}</span>
                    </div>
                    <div class="result-stat">
                        <span class="result-stat__label">
                            <span class="result-text-en">Unanswered</span>
                            <span class="result-text-hi">अनुत्तरित</span>
                        </span>
                        <span class="result-stat__value result-stat__value--muted">{{ $result->unanswered }}</span>
                    </div>
                    <div class="result-stat result-stat--wide">
                        <span class="result-stat__label">
                            <span class="result-text-en">Submitted at</span>
                            <span class="result-text-hi">जमा करने का समय</span>
                        </span>
                        <span
                            class="result-stat__value result-stat__value--mono">{{ $result->submitted_at?->format('d M Y, h:i A') }}</span>
                    </div>
                </div>
            </div>

            @if ($showCorrectAnswers)
                <div class="result-review">
                    <div class="result-review__header">
                        <h2 class="result-review__title">
                            <span class="result-text-en">Answer review</span>
                            <span class="result-text-hi">उत्तर समीक्षा</span>
                        </h2>
                        <span class="result-review__count">{{ count($answers) }} questions</span>
                    </div>

                    <div class="result-review__list">
                        @foreach ($answers as $index => $answer)
                            @php
                                $status = 'unanswered';
                                if (!empty($answer->selected_answer)) {
                                    $status =
                                        $answer->selected_answer === $answer->question->correct_answer
                                            ? 'correct'
                                            : 'wrong';
                                }
                            @endphp
                            <div class="result-review__item result-review__item--{{ $status }}">
                                <div class="result-review__item-head">
                                    <span class="result-review__number">{{ $index + 1 }}</span>
                                    <p class="result-review__question">{{ $answer->question->question }}</p>
                                    <p class="result-review__question">
                                        <span class="result-text-en">{{ $answer->question->question }}</span>

                                        @if ($answer->question->question_hi)
                                            <span class="result-text-hi">{{ $answer->question->question_hi }}</span>
                                        @endif
                                    </p>
                                    <span class="result-review__status" aria-hidden="true">
                                        @if ($status === 'correct')
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                                <path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2.4"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        @elseif ($status === 'wrong')
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                                <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2.4"
                                                    stroke-linecap="round" />
                                            </svg>
                                        @else
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                                <path d="M5 12h14" stroke="currentColor" stroke-width="2.4"
                                                    stroke-linecap="round" />
                                            </svg>
                                        @endif
                                    </span>
                                </div>
                                <div class="result-review__answers">
                                    <span
                                        class="result-pill result-pill--{{ $status === 'correct' ? 'success' : ($status === 'wrong' ? 'danger' : 'muted') }}">
                                        <span class="result-text-en">
                                            Your answer: {{ $answer->selected_answer ?: 'Not answered' }}
                                        </span>

                                        <span class="result-text-hi">
                                            आपका उत्तर: {{ $answer->selected_answer ?: 'उत्तर नहीं दिया' }}
                                        </span>
                                    </span>
                                    @if ($status !== 'correct')
                                        <span class="result-pill result-pill--success">
                                            <span class="result-text-en">
                                                Correct answer: {{ $answer->question->correct_answer }}
                                            </span>

                                            <span class="result-text-hi">
                                                सही उत्तर: {{ $answer->question->correct_answer }}
                                            </span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="result-footer">
                <a href="{{ route('contest.details', $contest->id) }}" class="result-btn result-btn--primary">
                    Back to contest
                </a>
            </div>
        </div>
    </section>

    <style>
        .result-page {
            --ink: #1D1B31;
            --ink-soft: #6C6885;
            --violet: #5B4FE5;
            --violet-dark: #241F72;
            --violet-tint: #EFEDFC;
            --border: #E6E3F5;
            --bg: #F4F3FB;
            --danger: #E2483D;
            --danger-tint: #FDECEC;
            --success: #1FAE5C;
            --success-tint: #E6FBF0;
            --card: #FFFFFF;
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg);
            padding: 40px 20px;
            color: var(--ink);
            min-height: 100vh;
        }

        .result-shell {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Top bar */
        .result-topbar {
            background: linear-gradient(135deg, var(--violet-dark), var(--violet));
            border-radius: 18px;
            padding: 20px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            color: #fff;
            margin-bottom: 20px;
        }

        .result-topbar__title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .result-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .result-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 1.05rem;
            margin: 0;
            line-height: 1.2;
        }

        .result-subtle {
            margin: 2px 0 0;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.75);
        }

        /* Hero: ring + stats */
        .result-hero {
            background: var(--card);
            border-radius: 18px;
            padding: 28px;
            box-shadow: 0 20px 40px -24px rgba(36, 31, 114, 0.25);
            display: flex;
            align-items: center;
            gap: 32px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .result-ring {
            position: relative;
            width: 140px;
            height: 140px;
            flex-shrink: 0;
        }

        .result-ring svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .result-ring__track {
            fill: none;
            stroke: var(--violet-tint);
            stroke-width: 8;
        }

        .result-ring__fill {
            fill: none;
            stroke: var(--violet);
            stroke-width: 8;
            stroke-linecap: round;
        }

        .result-ring--high .result-ring__fill {
            stroke: var(--success);
        }

        .result-ring--high .result-ring__track {
            stroke: var(--success-tint);
        }

        .result-ring--low .result-ring__fill {
            stroke: var(--danger);
        }

        .result-ring--low .result-ring__track {
            stroke: var(--danger-tint);
        }

        .result-ring__label {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .result-ring__label strong {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            color: var(--ink);
            line-height: 1.1;
        }

        .result-ring__label span {
            font-size: 0.78rem;
            color: var(--ink-soft);
            margin-top: 2px;
        }

        .result-stats {
            flex: 1;
            min-width: 260px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .result-stat {
            background: #FBFAFF;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .result-stat--wide {
            grid-column: span 2;
        }

        .result-stat__label {
            font-size: 0.76rem;
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .result-stat__value {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--ink);
        }

        .result-stat__value small {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 0.85rem;
            color: var(--ink-soft);
        }

        .result-stat__value--success {
            color: var(--success);
        }

        .result-stat__value--danger {
            color: var(--danger);
        }

        .result-stat__value--muted {
            color: var(--ink-soft);
        }

        .result-stat__value--mono {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.95rem;
            font-weight: 600;
        }

        /* Answer review — scrollable panel so a 50-question quiz doesn't turn the page
               into an endless scroll; the card itself sets the boundary, not the browser. */
        .result-review {
            background: var(--card);
            border-radius: 18px;
            box-shadow: 0 20px 40px -24px rgba(36, 31, 114, 0.25);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .result-review__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }

        .result-review__title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
        }

        .result-review__count {
            font-size: 0.8rem;
            color: var(--ink-soft);
            background: var(--violet-tint);
            padding: 5px 12px;
            border-radius: 999px;
        }

        .result-review__list {
            max-height: 560px;
            overflow-y: auto;
            padding: 8px 12px;
            scrollbar-width: thin;
            scrollbar-color: #C9C4FA transparent;
        }

        .result-review__list::-webkit-scrollbar {
            width: 8px;
        }

        .result-review__list::-webkit-scrollbar-thumb {
            background: #C9C4FA;
            border-radius: 999px;
        }

        .result-review__list::-webkit-scrollbar-track {
            background: transparent;
        }

        .result-review__item {
            border-radius: 12px;
            padding: 14px 12px;
            margin: 4px;
            border-left: 3px solid var(--border);
        }

        .result-review__item--correct {
            border-left-color: var(--success);
            background: #FAFFFC;
        }

        .result-review__item--wrong {
            border-left-color: var(--danger);
            background: #FFFAFA;
        }

        .result-review__item--unanswered {
            border-left-color: #D6D3EA;
        }

        .result-review__item-head {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 8px;
        }

        .result-review__number {
            width: 24px;
            height: 24px;
            border-radius: 7px;
            background: var(--violet-tint);
            color: var(--violet-dark);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.76rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .result-review__question {
            flex: 1;
            margin: 0;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--ink);
            line-height: 1.4;
        }

        .result-review__status {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
        }

        .result-review__item--correct .result-review__status {
            background: var(--success-tint);
            color: var(--success);
        }

        .result-review__item--wrong .result-review__status {
            background: var(--danger-tint);
            color: var(--danger);
        }

        .result-review__item--unanswered .result-review__status {
            background: #F0EFF9;
            color: var(--ink-soft);
        }

        .result-review__answers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-left: 34px;
        }

        .result-pill {
            font-size: 0.8rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 999px;
        }

        .result-pill--success {
            background: var(--success-tint);
            color: #1A7A3A;
        }

        .result-pill--danger {
            background: var(--danger-tint);
            color: var(--danger);
        }

        .result-pill--muted {
            background: #F0EFF9;
            color: var(--ink-soft);
        }

        /* Buttons */
        .result-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 10px;
            padding: 11px 22px;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: background 0.15s ease, opacity 0.15s ease;
        }

        .result-btn--primary {
            background: var(--violet);
            color: #fff;
        }

        .result-btn--primary:hover {
            background: var(--violet-dark);
        }

        .result-btn--ghost {
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
        }

        .result-btn--ghost:hover {
            background: rgba(255, 255, 255, 0.22);
        }

        .result-footer {
            display: flex;
            justify-content: flex-end;
        }

        @media (max-width: 760px) {
            .result-hero {
                flex-direction: column;
                align-items: flex-start;
            }

            .result-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
            }

            .result-stat--wide {
                grid-column: span 2;
            }

            .result-topbar__title {
                width: 100%;
            }

            .result-review__list {
                max-height: 60vh;
            }
        }

        @media (max-width: 480px) {
            .result-stats {
                grid-template-columns: 1fr;
            }

            .result-stat--wide {
                grid-column: span 1;
            }

            .result-footer {
                justify-content: stretch;
            }

            .result-btn--primary {
                width: 100%;
            }
        }

        /* Hindi/English */
        .result-text-hi {
            display: none;
        }

        .result-page.is-hindi .result-text-en {
            display: none;
        }

        .result-page.is-hindi .result-text-hi {
            display: inline;
        }

        .result-review__question .result-text-hi {
            display: none;
        }

        .result-page.is-hindi .result-review__question .result-text-hi {
            display: block;
        }

        .result-language-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 999px;
            padding: 4px;
            margin-left: auto;
        }

        .result-language-btn {
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.8);
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
        }

        .result-language-btn.is-active {
            background: #fff;
            color: var(--violet-dark);
        }

        @media (max-width: 760px) {
            .result-language-toggle {
                margin-left: 0;
            }
        }
    </style>

    <script>
        (function() {
            const contestUrl = @json(route('contest.details', $contest->id));
            const languageButtons = Array.from(
                document.querySelectorAll('.result-language-btn')
            );

            const resultPage = document.querySelector('.result-page');

            function setLanguage(language) {
                resultPage.classList.toggle('is-hindi', language === 'hi');

                languageButtons.forEach((button) => {
                    button.classList.toggle(
                        'is-active',
                        button.dataset.language === language
                    );
                });

                localStorage.setItem('quiz_language', language);
            }

            const savedLanguage = localStorage.getItem('quiz_language') || 'en';

            setLanguage(savedLanguage);

            languageButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    setLanguage(button.dataset.language);
                });
            });

            history.replaceState({
                page: 'quiz-result'
            }, '', window.location.href);

            window.addEventListener('popstate', function() {
                window.location.replace(contestUrl);
            });
        })();
    </script>
@endsection