"use client";

import { useState } from "react";
import type { TriviaAnswer, TriviaQuestion } from "../../types/passport";
import EmptyState from "../shared/EmptyState";
import MetricCard from "../shared/MetricCard";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface DailyTriviaScreenProps {
  questions: TriviaQuestion[];
  answers: Record<string, TriviaAnswer>;
  onAnswer: (questionId: string, selectedIndex: number, correct: boolean) => void;
}

export default function DailyTriviaScreen({
  questions,
  answers,
  onAnswer,
}: DailyTriviaScreenProps) {
  const [currentIndex, setCurrentIndex] = useState(0);

  if (questions.length === 0) {
    return (
      <section className="screen" aria-labelledby="trivia-title">
        <EmptyState icon="🧠" title="No trivia loaded" message="Add daily trivia seeds to continue." />
      </section>
    );
  }

  const currentQuestion = questions[currentIndex];
  const currentAnswer = answers[currentQuestion.id];
  const answeredCount = Object.keys(answers).length;
  const correctCount = Object.values(answers).filter((answer) => answer.correct).length;

  function handleAnswer(optionIndex: number) {
    if (currentAnswer) {
      return;
    }

    onAnswer(currentQuestion.id, optionIndex, optionIndex === currentQuestion.answerIndex);
  }

  function goNext() {
    setCurrentIndex((current) => (current + 1) % questions.length);
  }

  return (
    <section className="screen" aria-labelledby="trivia-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Daily trivia</p>
          <h1 className="hero-title" id="trivia-title">
            Protect the quiz streak.
          </h1>
          <p className="hero-copy">
            Trivia turns football knowledge into a daily ritual with instant explanations, points,
            streak pressure, and future sponsor reward hooks.
          </p>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Today&apos;s quiz run</p>
          <div className="metric-grid">
            <MetricCard icon="✅" label="Answered" value={`${answeredCount}/${questions.length}`} />
            <MetricCard icon="🎯" label="Correct" value={correctCount} />
            <MetricCard icon="⭐" label="Points available" value={questions.reduce((total, question) => total + question.points, 0)} />
            <MetricCard icon="🔥" label="Daily loop" value="Live" />
          </div>
        </aside>
      </div>

      <div className="trivia-shell">
        <article className="trivia-question-card">
          <div className="card-topline">
            <div>
              <StatusPill tone="info">{currentQuestion.category}</StatusPill>
              <StatusPill tone={currentQuestion.difficulty === "hard" ? "danger" : "gold"}>
                {currentQuestion.difficulty}
              </StatusPill>
            </div>
            <span className="card-meta">{currentQuestion.points} pts</span>
          </div>

          <h2>
            Question {currentIndex + 1}: {currentQuestion.prompt}
          </h2>

          <ProgressBar label="Trivia set progress" max={questions.length} value={answeredCount} />

          <div className="option-list" role="group" aria-label="Trivia answer options">
            {currentQuestion.options.map((option, index) => {
              const isSelected = currentAnswer?.selectedIndex === index;
              const isCorrectOption = currentQuestion.answerIndex === index;
              const stateClass = currentAnswer
                ? isCorrectOption
                  ? "is-correct"
                  : isSelected
                    ? "is-wrong"
                    : ""
                : "";

              return (
                <button
                  className={`trivia-option ${stateClass}`}
                  disabled={Boolean(currentAnswer)}
                  key={option}
                  onClick={() => handleAnswer(index)}
                  type="button"
                >
                  <strong>{String.fromCharCode(65 + index)}.</strong> {option}
                </button>
              );
            })}
          </div>

          {currentAnswer ? (
            <div aria-live="polite" className="answer-explanation">
              <StatusPill tone={currentAnswer.correct ? "success" : "danger"}>
                {currentAnswer.correct ? "Correct" : "Not this time"}
              </StatusPill>
              <p>{currentQuestion.explanation}</p>
              <button className="button-primary" onClick={goNext} type="button">
                Next question
              </button>
            </div>
          ) : (
            <p className="card-meta">Choose an answer to reveal the explanation.</p>
          )}
        </article>
      </div>
    </section>
  );
}