import {
  Link,
  Button,
  Avatar,
  Dropdown,
  Label
} from "@heroui/react";
import { linkVariants, buttonVariants } from "@heroui/styles";
import { useEffect, useState } from "react";
import { useSession, signOut } from "../lib/auth-client";
import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
import { Link as RouterLink } from "react-router-dom";

export function SiteNavbar() {
  const { data: session } = useSession();
  const [theme, setTheme] = useState<"light" | "dark">("light");

  useEffect(() => {
    const currentTheme = document.documentElement.classList.contains("dark") ? "dark" : "light";
    setTheme(currentTheme);
  }, []);

  const toggleTheme = () => {
    const nextTheme = theme === "dark" ? "light" : "dark";
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(nextTheme);
    document.documentElement.setAttribute("data-theme", nextTheme);
    localStorage.setItem("theme", nextTheme);
    setTheme(nextTheme);
  };

  return (
    <nav className="flex items-center justify-between px-8 py-4 bg-background/70 backdrop-blur-md border-b border-default-100 sticky top-0 z-50 w-full">
      <div className="flex items-center gap-4">
        <RouterLink to="/" className="font-bold text-inherit text-xl no-underline text-foreground">
          HLAE中文站
        </RouterLink>
      </div>

      <div className="flex items-center gap-8">
        <div className="hidden sm:flex gap-8 items-center">
          <RouterLink to="/" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
            主页
          </RouterLink>
          <RouterLink to="/demo" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
            击杀生成
          </RouterLink>
          <RouterLink to="/about" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
            关于
          </RouterLink>
        </div>

        <div className="flex items-center gap-4">
          <Button 
            isIconOnly 
            variant="light" 
            onPress={toggleTheme}
            className="text-foreground/80"
          >
            {theme === "dark" ? (
              <SunIcon className="w-5 h-5" />
            ) : (
              <MoonIcon className="w-5 h-5" />
            )}
          </Button>
          
          {session ? (
            <Dropdown>
              <Dropdown.Trigger>
                <Button isIconOnly variant="tertiary" className="rounded-full">
                  <Avatar size="sm" color="accent">
                    <Avatar.Image
                      alt={session.user.name || "用户头像"}
                      src={session.user.image || ""}
                    />
                    <Avatar.Fallback>
                      {(session.user.name || "U").slice(0, 2).toUpperCase()}
                    </Avatar.Fallback>
                  </Avatar>
                </Button>
              </Dropdown.Trigger>
              <Dropdown.Popover>
                <Dropdown.Menu aria-label="Profile Actions">
                  <Dropdown.Item id="profile" textValue="Profile">
                    <Label className="font-semibold">登录为 {session.user.email}</Label>
                  </Dropdown.Item>
                  <Dropdown.Item id="logout" textValue="Logout" onPress={() => signOut()}>
                    <Label className="text-danger">退出登录</Label>
                  </Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown.Popover>
            </Dropdown>
          ) : (
            <div className="flex gap-4 items-center">
              <RouterLink to="/login" className={buttonVariants({ variant: "light", className: "text-foreground font-medium" })}>
                登录
              </RouterLink>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}
