"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState, useCallback } from "react";

type User = {
  name?: string;
} | null;

const userMenu = [
  { id: "1", label: "Dashboard", href: "/dashboard" },
  { id: "2", label: "My Profile", href: "/dashboard/profile" },
  { id: "3", label: "My Orders", href: "/dashboard/order" },
  { id: "4", label: "My Wishlist", href: "/dashboard/wishlist" },
];

export default function HeaderUserMenu() {
  const router = useRouter();

  // 👇 undefined = checking, null = guest, object = logged
  const [user, setUser] = useState<User | undefined>(undefined);

  useEffect(() => {
    let mounted = true;

    async function checkAuth() {
      try {
        const res = await fetch("/api/auth/check", {
          credentials: "include",
          cache: "no-store",
        });

        const data = await res.json();

        if (!mounted) return;

        if (data.authenticated) {
          setUser(data.user);
        } else {
          setUser(null);
        }
      } catch {
        if (mounted) setUser(null);
      }
    }

    checkAuth();

    return () => {
      mounted = false;
    };
  }, []);

  const handleLogout = useCallback(async () => {
    try {
      const res = await fetch("/api/auth/logout", {
        method: "POST",
        credentials: "include",
      });

      if (res.ok) {
        setUser(null); // update UI immediately
        router.push("/category"); // navigate after logout
      }
    } catch (error) {
      console.error("Logout failed:", error);
    }
  }, [router]);

  // 🚫 Don't render anything while checking
  if (user === undefined) {
    return (
      <div className="flex items-center justify-center py-6">
        <div className="h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
      </div>
    );
  }

  // ✅ Logged user
  if (user) {
    return (
      <div>
        <p className="text-base">
          Hello, <span className="capitalize">{user.name ?? "User"}</span>
        </p>

        <ul className="flex flex-col gap-1 py-4">
          {userMenu.map((item) => (
            <li key={item.id}>
              <Link
                href={item.href}
                className="flex py-2 text-sm hover:underline underline-offset-4"
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>

        <div className="border-t border-gray-950/25 py-4">
          <button className="btn-outline" onClick={handleLogout}>
            Log out
          </button>
        </div>
      </div>
    );
  }

  // 👤 Guest
  return (
    <div>
      <p className="text-lg font-bogart">
        Welcome to <span className="uppercase">Morni</span>
      </p>

      <ul className="mt-4 flex flex-col gap-1 border-t border-gray-950/25 py-4">
        <li>
          <Link href="/auth/signup" className="py-2 flex text-sm hover:underline underline-offset-4">Sign Up</Link>
        </li>
        <li>
          <Link href="/auth/login" className="py-2 flex text-sm hover:underline underline-offset-4">Log In</Link>
        </li>
      </ul>
    </div>
  );
}