"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { QuizUser, QuizMode, QuizAttempt } from "@/types/quiz";

export default function UserSetupPage() {
  const router = useRouter();
  const [quizUser, setQuizUser] = useState<QuizUser | null>(null);
  const [quizMode, setQuizMode] = useState<QuizMode>("testing");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const stored = sessionStorage.getItem("quizUser");
    if (!stored) {
      router.push("/");
      return;
    }
    setQuizUser(JSON.parse(stored));
  }, [router]);

  async function handleStart() {
    if (!quizUser) return;
    setLoading(true);
    setError("");

    const res = await fetch("/api/user/attempts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId: quizUser.id, quizMode }),
    });

    if (!res.ok) {
      const data = await res.json();
      setError(data.error || "Failed to start quiz");
      setLoading(false);
      return;
    }

    const attempt: QuizAttempt = await res.json();
    sessionStorage.setItem("userAttempt", JSON.stringify(attempt));
    router.push("/user/play");
  }

  if (!quizUser) return null;

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="border-b bg-white px-6 py-4">
        <div className="max-w-2xl mx-auto flex items-center justify-between">
          <h1 className="text-xl font-bold text-gray-900">Start Quiz</h1>
          <span className="text-sm text-gray-500">{quizUser.name}</span>
        </div>
      </header>

      <main className="max-w-2xl mx-auto p-6 space-y-6">
        {error && (
          <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
        )}

        <div className="bg-white rounded-xl p-6 shadow-sm space-y-4">
          <h2 className="text-lg font-semibold text-gray-900">Quiz Mode</h2>
          <p className="text-sm text-gray-500">Choose how you want to take the quiz</p>

          <div className="grid grid-cols-2 gap-4">
            <button
              onClick={() => setQuizMode("testing")}
              className={`p-4 rounded-lg border-2 text-left transition-colors ${
                quizMode === "testing"
                  ? "border-[#2b579a] bg-blue-50"
                  : "border-gray-200 hover:border-gray-300"
              }`}
            >
              <div className="flex items-center gap-2 mb-2">
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                  quizMode === "testing" ? "border-[#2b579a] bg-[#2b579a]" : "border-gray-400"
                }`}>
                  {quizMode === "testing" && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
                </div>
                <span className="font-medium text-gray-900">Testing</span>
              </div>
              <p className="text-sm text-gray-500">
                Answer all questions, see results at the end
              </p>
            </button>

            <button
              onClick={() => setQuizMode("learning")}
              className={`p-4 rounded-lg border-2 text-left transition-colors ${
                quizMode === "learning"
                  ? "border-[#2b579a] bg-blue-50"
                  : "border-gray-200 hover:border-gray-300"
              }`}
            >
              <div className="flex items-center gap-2 mb-2">
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                  quizMode === "learning" ? "border-[#2b579a] bg-[#2b579a]" : "border-gray-400"
                }`}>
                  {quizMode === "learning" && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
                </div>
                <span className="font-medium text-gray-900">Learning</span>
              </div>
              <p className="text-sm text-gray-500">
                Get instant feedback after each question
              </p>
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl p-6 shadow-sm">
          <div className="flex items-center justify-between text-sm text-gray-600">
            <span>Questions: <strong>10</strong> (random selection)</span>
            <span>Timer: <strong>None</strong></span>
          </div>
        </div>

        <button
          onClick={handleStart}
          disabled={loading}
          className="w-full py-3 bg-[#2b579a] text-white rounded-lg hover:bg-[#1e3f70] disabled:opacity-50 font-medium text-lg"
        >
          {loading ? "Starting..." : "Start Quiz"}
        </button>
      </main>
    </div>
  );
}