import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTheme } from "@/contexts/ThemeContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { motion } from "framer-motion";
import { useLocation, useNavigate } from "react-router-dom";

export const Header = () => {
  const { theme, toggleTheme } = useTheme();
  const { language, setLanguage, t } = useLanguage();
  const location = useLocation();
  const navigate = useNavigate();

  // Check if we're on a project page
  const isProjectPage = location.pathname.startsWith('/project/');

  const handleNavigation = (section: string) => {
    if (isProjectPage) {
      // If on project page, navigate to home with section anchor
      navigate(`/#${section}`);
    } else {
      // If on home page, scroll to section
      scrollToSection(section);
    }
  };

  const handleLogoClick = () => {
    if (isProjectPage) {
      // If on project page, navigate to home
      navigate('/');
    } else {
      // If on home page, scroll to top
      scrollToTop();
    }
  };

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-lg"
    >
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <motion.button
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          onClick={handleLogoClick}
          className="text-2xl font-bold text-gradient hover:scale-105 transition-transform duration-200 cursor-pointer"
          aria-label={isProjectPage ? "Retour à l'accueil" : "Retour en haut de page"}
        >
          AP
        </motion.button>

        <nav className="hidden md:flex items-center gap-8">
          {["home", "projects", "skills", "contact"].map((item, i) => (
            <motion.button
              key={item}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * i }}
              onClick={() => handleNavigation(item)}
              className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
            >
              {t(`nav.${item}`)}
            </motion.button>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.3 }}
          >
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setLanguage(language === "fr" ? "en" : "fr")}
              className="font-medium"
            >
              {language === "fr" ? "🇫🇷 FR" : "🇬🇧 EN"}
            </Button>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.4 }}
          >
            <Button variant="ghost" size="icon" onClick={toggleTheme}>
              {theme === "dark" ? (
                <Sun className="h-5 w-5" />
              ) : (
                <Moon className="h-5 w-5" />
              )}
            </Button>
          </motion.div>
        </div>
      </div>
    </motion.header>
  );
};
