import { useState } from "react";
import { useAuth } from "../contexts/AuthContext.tsx";

function AccountAvatar() {
  const { user, isLoading, logout } = useAuth();

  const handleLogout = () => {
    logout();
    window.location.href = "/";
  };

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

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

  return (
    <>
      {user ? (
        <div
          className="relative cursor-pointer group"
          onClick={handleLogout}
          title={`Logout (${user.name || user.email})`}
        >
          {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%)] group-hover:border-red-500 transition-colors"
            />
          ) : (
            <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 group-hover:from-red-500 group-hover:to-red-600 transition-colors">
              {getInitials(user)}
            </div>
          )}
          <div className="absolute top-12 right-0 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
            Click to logout
          </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>
      )}
    </>
  );
}

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false);
  const { user, logout } = useAuth();

  const handleLogout = () => {
    logout();
    window.location.href = "/";
  };

  return (
    <>
      <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">
        <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>

        <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>

      {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>
                  <button
                    onClick={() => {
                      setIsOpen(false);
                      handleLogout();
                    }}
                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600 text-left"
                  >
                    Logout
                  </button>
                </>
              )}
            </div>
          </div>
        </>
      )}
    </>
  );
}