import { useState, useEffect } from "react";

interface User {
  name?: string;
  email?: string;
  avatar?: string;
}

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    checkAuth();
  }, []);

  const checkAuth = async () => {
    try {
      const response = await fetch("/api/auth/session");
      if (response.ok) {
        const data = await response.json();
        setUser(data.user);
      }
    } catch (error) {
      console.error("Auth check failed:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const getInitials = (user: User): string => {
    if (user.name) {
      return user.name.substring(0, 2).toUpperCase();
    }
    if (user.email) {
      return user.email.substring(0, 2).toUpperCase();
    }
    return "?";
  };

  const AccountAvatar = () => {
    if (isLoading) {
      return (
        <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
      );
    }

    return (
      <>
        {user ? (
          <div className="relative cursor-pointer">
            {user.avatar ? (
              <img
                src={user.avatar}
                alt={user.name || user.email || "User"}
                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
              />
            ) : (
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
                {getInitials(user)}
              </div>
            )}
          </div>
        ) : (
          <a
            href="/login"
            className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
          >
            <svg
              className="w-6 h-6 text-gray-600"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
          </a>
        )}
      </>
    );
  };

  return (
    <>
      {/* Account Avatar - Fixed position, synced with nav */}
      <div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
        <AccountAvatar />
      </div>

      <nav className="sticky top-0 z-50 py-3">
        {/* Desktop Navigation */}
        <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
          <a
            href="/"
            className="text-base lg:text-lg hover:text-[hsl(270,73%,63%)] transition-colors"
          >
            Home
          </a>
          <a
            href="/blog"
            className="text-base lg:text-lg hover:text-[hsl(270,73%,63%)] transition-colors"
          >
            Blog
          </a>
          <a
            href="/guestbook"
            className="text-base lg:text-lg hover:text-[hsl(270,73%,63%)] transition-colors"
          >
            Guestbook
          </a>
        </div>

        {/* Mobile */}
        <div className="md:hidden flex justify-between items-center px-4">
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="z-50 btn btn-ghost btn-sm"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              {isOpen ? (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              ) : (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              )}
            </svg>
          </button>
          <AccountAvatar />
        </div>
      </nav>

      {/* Mobile Menu */}
      {isOpen && (
        <>
          <div
            className="fixed inset-0 bg-black/50 z-40 md:hidden"
            onClick={() => setIsOpen(false)}
          ></div>
          <div className="fixed top-0 left-0 h-full w-64 bg-white text-black z-50 md:hidden shadow-2xl">
            <div className="flex flex-col gap-2 p-6 mt-16">
              <a
                href="/"
                className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all"
                onClick={() => setIsOpen(false)}
              >
                Home
              </a>
              <a
                href="/blog"
                className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all"
                onClick={() => setIsOpen(false)}
              >
                Blog
              </a>
              <a
                href="/guestbook"
                className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all"
                onClick={() => setIsOpen(false)}
              >
                Guestbook
              </a>

              {user && (
                <>
                  <hr className="my-2" />
                  <div className="py-3 px-4 text-sm text-gray-600">
                    {user.name || user.email}
                  </div>
                  <a
                    href="/logout"
                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
                    onClick={() => setIsOpen(false)}
                  >
                    Logout
                  </a>
                </>
              )}
            </div>
          </div>
        </>
      )}
    </>
  );
}