"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { GraduationCap, LogOut, LayoutGrid } from "lucide-react";
import { getStoredUser } from "@/lib/api/client";
import { Spinner } from "@/components/ui/spinner";
import { useStudentLogout } from "@/lib/api/hooks/useStudentAuth";
import type { StudentProfile } from "@/types/api";

export default function StudentLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const logout = useStudentLogout();
  const [student, setStudent] = useState<(StudentProfile & { role: string }) | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const stored = getStoredUser();
    const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;

    if (stored && stored.role === "STUDENT" && token) {
      setStudent(stored);
      setLoading(false);
    } else {
      router.replace("/student/login");
    }
  }, [router]);

  function handleLogout() {
    logout.mutate(undefined, {
      onSuccess: () => router.push("/"),
      onError: () => router.push("/"),
    });
  }

  if (loading || !student) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <Spinner className="size-8 text-green-500" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-black">
      {/* Header */}
      <header className="h-16 bg-gray-900 border-b border-gray-800 flex items-center justify-between px-4 sm:px-6">
        <div className="flex items-center gap-3">
          <div className="p-1.5 bg-green-600 rounded-lg">
            <LayoutGrid className="size-5 text-white" />
          </div>
          <div>
            <p className="text-sm font-bold text-white leading-tight">Student Portal</p>
            <p className="text-xs text-gray-500 leading-tight">Exam System</p>
          </div>
        </div>
        <div className="flex items-center gap-3 sm:gap-4">
          <div className="text-right hidden sm:block">
            <p className="text-sm font-medium text-white truncate max-w-[200px]">
              {student.fullName}
            </p>
            <p className="text-xs text-gray-400">{student.email}</p>
          </div>
          <div className="p-2 bg-green-600/20 rounded-full">
            <GraduationCap className="size-5 text-green-400" />
          </div>
          <button
            onClick={handleLogout}
            disabled={logout.isPending}
            className="p-2 text-gray-400 hover:text-red-400 transition-colors rounded-lg hover:bg-gray-800"
          >
            <LogOut className="size-5" />
          </button>
        </div>
      </header>
      <main className="p-4 sm:p-6 max-w-5xl mx-auto">{children}</main>
    </div>
  );
}