"use client";

import { useEffect, useState } from "react";
import { useSession, signOut } from "next-auth/react";
import { useRouter } from "next/navigation";
import { QuizTemplate, TimerMode, QuizTheme, QuizMode } from "@/types/quiz";
import Logo from "@/components/Logo";

export default function QuizSetupPage() {
  const { data: session } = useSession();
  const router = useRouter();
  const [templates, setTemplates] = useState<QuizTemplate[]>([]);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [timerMode, setTimerMode] = useState<TimerMode>("none");
  const [perQuestionSeconds, setPerQuestionSeconds] = useState(30);
  const [totalMinutes, setTotalMinutes] = useState(15);
  const [questionCount, setQuestionCount] = useState(25);
  const [loading, setLoading] = useState(true);
  const [quizTheme, setQuizTheme] = useState<QuizTheme>("classmaker");
  const [quizMode, setQuizMode] = useState<QuizMode>("testing");

  useEffect(() => {
    fetch("/api/templates")
      .then((r) => r.json())
      .then((data) => {
        setTemplates(data);
        setLoading(false);
      });
    fetch("/api/settings")
      .then((r) => r.json())
      .then((s) => setQuizTheme(s.quizTheme || "classmaker"));
  }, []);

  function toggleTemplate(id: string) {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
    );
  }

  const totalAvailable = templates
    .filter((t) => selectedIds.includes(t.id))
    .reduce((sum, t) => sum + t.questions.length, 0);

  function startQuiz() {
    const config = {
      templateIds: selectedIds,
      timerMode,
      perQuestionSeconds,
      totalSeconds: totalMinutes * 60,
      questionCount: Math.min(questionCount, totalAvailable),
      quizTheme,
      quizMode,
    };
    sessionStorage.setItem("quizConfig", JSON.stringify(config));
    router.push("/quiz/play");
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <p className="text-gray-500">Loading...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="border-b bg-white px-6 py-4 flex items-center justify-between">
        <Logo height={32} />
        <div className="flex items-center gap-4">
          <span className="text-gray-500 text-sm">
            {session?.user?.name}
          </span>
          <button
            onClick={() => signOut({ callbackUrl: "/login" })}
            className="text-sm text-gray-500 hover:text-gray-700"
          >
            Sign out
          </button>
        </div>
      </header>

      <main className="max-w-2xl mx-auto p-6 space-y-6">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 mb-3">
            Quiz Mode
          </h2>
          <div className="grid grid-cols-2 gap-3">
            <label
              className={`flex items-start gap-3 p-4 bg-white rounded-lg border-2 cursor-pointer transition-colors ${
                quizMode === "testing"
                  ? "border-blue-500"
                  : "border-gray-200 hover:border-blue-300"
              }`}
            >
              <input
                type="radio"
                name="mode"
                checked={quizMode === "testing"}
                onChange={() => setQuizMode("testing")}
                className="w-4 h-4 text-blue-600 mt-0.5"
              />
              <div>
                <span className="font-medium text-gray-900">Testing</span>
                <p className="text-sm text-gray-500">
                  Answer all questions, see results at the end
                </p>
              </div>
            </label>

            <label
              className={`flex items-start gap-3 p-4 bg-white rounded-lg border-2 cursor-pointer transition-colors ${
                quizMode === "learning"
                  ? "border-blue-500"
                  : "border-gray-200 hover:border-blue-300"
              }`}
            >
              <input
                type="radio"
                name="mode"
                checked={quizMode === "learning"}
                onChange={() => setQuizMode("learning")}
                className="w-4 h-4 text-blue-600 mt-0.5"
              />
              <div>
                <span className="font-medium text-gray-900">Learning</span>
                <p className="text-sm text-gray-500">
                  Get instant feedback after each question, retry wrong answers
                </p>
              </div>
            </label>
          </div>
        </div>

        <div>
          <h2 className="text-lg font-semibold text-gray-900 mb-3">
            Select Quiz Templates
          </h2>
          <div className="space-y-2">
            {templates.map((t) => (
              <label
                key={t.id}
                className="flex items-center gap-3 p-4 bg-white rounded-lg border cursor-pointer hover:border-blue-300"
              >
                <input
                  type="checkbox"
                  checked={selectedIds.includes(t.id)}
                  onChange={() => toggleTemplate(t.id)}
                  className="w-4 h-4 text-blue-600"
                />
                <div>
                  <span className="font-medium text-gray-900">{t.title}</span>
                  <span className="text-sm text-gray-500 ml-2">
                    ({t.questions.length} questions)
                  </span>
                  <p className="text-sm text-gray-500">{t.description}</p>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div>
          <h2 className="text-lg font-semibold text-gray-900 mb-3">
            Number of Questions
          </h2>
          <input
            type="number"
            min={1}
            max={totalAvailable}
            value={questionCount}
            onChange={(e) => setQuestionCount(Number(e.target.value))}
            className="w-32 px-3 py-2 border rounded-lg"
          />
          <span className="text-sm text-gray-500 ml-2">
            (max {totalAvailable} available)
          </span>
        </div>

        <div>
          <h2 className="text-lg font-semibold text-gray-900 mb-3">
            Timer Mode
          </h2>
          <div className="space-y-2">
            <label className="flex items-center gap-3 p-4 bg-white rounded-lg border cursor-pointer hover:border-blue-300">
              <input
                type="radio"
                name="timer"
                checked={timerMode === "none"}
                onChange={() => setTimerMode("none")}
                className="w-4 h-4 text-blue-600"
              />
              <div>
                <span className="font-medium text-gray-900">No Timer</span>
                <p className="text-sm text-gray-500">
                  Take as long as you need
                </p>
              </div>
            </label>

            <label className="flex items-center gap-3 p-4 bg-white rounded-lg border cursor-pointer hover:border-blue-300">
              <input
                type="radio"
                name="timer"
                checked={timerMode === "per-question"}
                onChange={() => setTimerMode("per-question")}
                className="w-4 h-4 text-blue-600"
              />
              <div className="flex-1">
                <span className="font-medium text-gray-900">Per Question</span>
                <p className="text-sm text-gray-500">
                  Time limit for each question
                </p>
                {timerMode === "per-question" && (
                  <div className="mt-2 flex items-center gap-2">
                    <input
                      type="number"
                      min={5}
                      max={300}
                      value={perQuestionSeconds}
                      onChange={(e) =>
                        setPerQuestionSeconds(Number(e.target.value))
                      }
                      className="w-20 px-2 py-1 border rounded text-sm"
                    />
                    <span className="text-sm text-gray-500">seconds</span>
                  </div>
                )}
              </div>
            </label>

            <label className="flex items-center gap-3 p-4 bg-white rounded-lg border cursor-pointer hover:border-blue-300">
              <input
                type="radio"
                name="timer"
                checked={timerMode === "total"}
                onChange={() => setTimerMode("total")}
                className="w-4 h-4 text-blue-600"
              />
              <div className="flex-1">
                <span className="font-medium text-gray-900">Total Time</span>
                <p className="text-sm text-gray-500">
                  Time limit for the entire quiz
                </p>
                {timerMode === "total" && (
                  <div className="mt-2 flex items-center gap-2">
                    <input
                      type="number"
                      min={1}
                      max={120}
                      value={totalMinutes}
                      onChange={(e) => setTotalMinutes(Number(e.target.value))}
                      className="w-20 px-2 py-1 border rounded text-sm"
                    />
                    <span className="text-sm text-gray-500">minutes</span>
                  </div>
                )}
              </div>
            </label>
          </div>
        </div>

        <button
          onClick={startQuiz}
          disabled={selectedIds.length === 0 || totalAvailable === 0}
          className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 font-medium text-lg"
        >
          Start Quiz
        </button>
      </main>
    </div>
  );
}