"use client";

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

export default function HomePage() {
  const router = useRouter();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [returning, setReturning] = useState(false);

  useEffect(() => {
    const stored = sessionStorage.getItem("quizUser");
    if (stored) {
      const user: QuizUser = JSON.parse(stored);
      setName(user.name);
      setEmail(user.email);
      setReturning(true);
    }
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setLoading(true);

    const res = await fetch("/api/user/identify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email }),
    });

    if (!res.ok) {
      const data = await res.json();
      setError(data.error || "Something went wrong");
      setLoading(false);
      return;
    }

    const user: QuizUser = await res.json();
    sessionStorage.setItem("quizUser", JSON.stringify(user));

    // Also fetch and store theme
    try {
      const settingsRes = await fetch("/api/settings");
      const settings = await settingsRes.json();
      sessionStorage.setItem("userQuizTheme", settings.quizTheme || "classmaker");
    } catch {
      sessionStorage.setItem("userQuizTheme", "classmaker");
    }

    router.push("/user/setup");
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="w-full max-w-md p-8 bg-white rounded-xl shadow-md">
        <div className="flex justify-center mb-2"><Logo height={40} /></div>
        <p className="text-gray-500 text-center mb-8">
          {returning ? `Welcome back, ${name}!` : "Enter your details to start a quiz"}
        </p>

        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">
              {error}
            </div>
          )}

          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
              Name
            </label>
            <input
              id="name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
              required
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
              Email
            </label>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
              required
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full py-2 px-4 bg-[#2b579a] text-white rounded-lg hover:bg-[#1e3f70] disabled:opacity-50 font-medium"
          >
            {loading ? "Please wait..." : returning ? "Continue" : "Start"}
          </button>
        </form>
      </div>
    </div>
  );
}