import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { getAuthenticatedDashboardPath } from "@/lib/dashboardNavigation";
import { UserMenu } from "@/components/UserMenu";
const LOGO_SRC = "/logo.svg";

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isDark, setIsDark] = useState(false);
  const { isAuthenticated, hasRole } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const shouldBeDark = savedTheme === "dark" || (!savedTheme && prefersDark);
    
    setIsDark(shouldBeDark);
    if (shouldBeDark) {
      document.documentElement.classList.add("dark");
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    
    if (newTheme) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  };

  return (
    <header className="sticky top-0 z-50 py-2 sm:py-4">
      <div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-14 sm:h-16 pill-nav px-4 sm:px-6">
          {/* Logo */}
          <div className="flex items-center min-w-0">
            <a href="/" className="flex items-center gap-1.5 sm:gap-2">
              <img 
                src={LOGO_SRC} 
                alt="UMP Logo" 
                className="w-8 h-8 sm:w-10 sm:h-10 object-contain flex-shrink-0"
              />
              <span className="text-base sm:text-xl font-bold font-serif truncate">Đại Học Y Dược TP. Hồ Chí Minh</span>
            </a>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-2">
            <a href="/" className="text-sm font-medium hover:bg-muted/60 rounded-full px-4 py-2 transition-all">
              Nghiên cứu
            </a>
            <a href="/" className="text-sm font-medium hover:bg-muted/60 rounded-full px-4 py-2 transition-all">
              Hợp Tác
            </a>
            <a href="/" className="text-sm font-medium hover:bg-muted/60 rounded-full px-4 py-2 transition-all">
              Sáng kiến
            </a>
            <a href="/" className="text-sm font-medium hover:bg-muted/60 rounded-full px-4 py-2 transition-all">
              Y Đức
            </a>
            <a href="/" className="text-sm font-medium hover:bg-muted/60 rounded-full px-4 py-2 transition-all">
              Thành viên
            </a>
          </nav>

          {/* Actions */}
          <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0">
            {/* <button
              onClick={toggleTheme}
              className="p-1.5 sm:p-2 rounded-full hover:bg-muted/60 transition-all"
              aria-label="Toggle theme"
            >
              {isDark ? (
                <Sun className="h-4 w-4 sm:h-5 sm:w-5" />
              ) : (
                <Moon className="h-4 w-4 sm:h-5 sm:w-5" />
              )}
            </button> */}
            
            {isAuthenticated ? (
              <UserMenu />
            ) : (
              <div className="hidden md:flex items-center gap-2">
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => navigate('/login')}
                  className="rounded-full px-5 text-foreground hover:bg-muted/80"
                >
                  Đăng nhập
                </Button>
                <Button
                  type="button"
                  onClick={() => navigate('/register')}
                  className="rounded-full px-6 bg-primary hover:bg-primary/90 text-primary-foreground hover:scale-105 transition-all"
                >
                  Đăng ký
                </Button>
              </div>
            )}

            {/* Mobile Menu Button */}
            <button
              className="md:hidden p-1.5 sm:p-2"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label="Toggle menu"
            >
              {isMenuOpen ? <X className="h-5 w-5 sm:h-6 sm:w-6" /> : <Menu className="h-5 w-5 sm:h-6 sm:w-6" />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden py-4 border-t border-border animate-fade-in">
            <nav className="flex flex-col gap-4">
              <a href="/" className="text-sm font-medium hover:text-accent transition-colors">
                Nghiên cứu
              </a>
              <a href="/" className="text-sm font-medium hover:text-accent transition-colors">
                Hợp Tác
              </a>
              <a href="/" className="text-sm font-medium hover:text-accent transition-colors">
                Sáng kiến
              </a>
              <a href="/" className="text-sm font-medium hover:text-accent transition-colors">
                Y Đức
              </a>
              <a href="/" className="text-sm font-medium hover:text-accent transition-colors">
                Thành viên
              </a>
              {isAuthenticated ? (
                <Button 
                  onClick={() => navigate(getAuthenticatedDashboardPath(hasRole))}
                  className="bg-primary hover:bg-primary/90 text-primary-foreground rounded-full w-full"
                >
                  Dashboard
                </Button>
              ) : (
                <div className="flex flex-col gap-2 w-full pt-1">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      navigate('/login');
                      setIsMenuOpen(false);
                    }}
                    className="rounded-full w-full"
                  >
                    Đăng nhập
                  </Button>
                  <Button
                    type="button"
                    onClick={() => {
                      navigate('/register');
                      setIsMenuOpen(false);
                    }}
                    className="bg-primary hover:bg-primary/90 text-primary-foreground rounded-full w-full"
                  >
                    Đăng ký
                  </Button>
                </div>
              )}
            </nav>
          </div>
        )}
      </div>

      
    </header>
  );
};

export default Header;
