import { AnimatePresence, motion } from "framer-motion";
import { Moon, Sun, Sparkles, LayoutGrid, Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAutoHideHeader } from "@/hooks/useAutoHideHeader";

interface HeaderProps {
  mode: "night" | "day";
  onToggleMode: () => void;
  onOpenDrawer: () => void;
  onRegenerate: () => void;
  onNotify: () => void;
}

export function Header({ mode, onToggleMode, onOpenDrawer, onRegenerate, onNotify }: HeaderProps) {
  const visible = useAutoHideHeader(60, 3000);
  return (
    <>
      {/* invisible top hover strip ensures reveal works even when chrome is hidden */}
      <div className="fixed top-0 left-0 right-0 h-16 z-40 pointer-events-none" aria-hidden />
      <AnimatePresence>
        {visible && (
          <motion.header
            initial={{ y: -60, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -60, opacity: 0 }}
            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
            className="fixed top-4 left-1/2 -translate-x-1/2 z-50"
          >
            <div className="glass-strong rounded-full px-4 py-2 flex items-center gap-2">
              <div className="flex items-center gap-2 pr-2 border-r border-white/10">
                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary to-accent grid place-items-center">
                  <Sparkles className="w-3.5 h-3.5 text-primary-foreground" />
                </div>
                <span className="text-sm font-semibold tracking-wide">Qmetaram <span className="text-gradient">QHub</span></span>
              </div>
              <Button variant="ghost" size="sm" onClick={onOpenDrawer} className="rounded-full">
                <LayoutGrid className="w-4 h-4" />
                <span className="hidden sm:inline ml-1">Modules</span>
              </Button>
              <Button variant="ghost" size="sm" onClick={onRegenerate} className="rounded-full">
                <Sparkles className="w-4 h-4" />
                <span className="hidden sm:inline ml-1">New Sky</span>
              </Button>
              <Button variant="ghost" size="sm" onClick={onNotify} className="rounded-full">
                <Bell className="w-4 h-4" />
              </Button>
              <Button variant="ghost" size="sm" onClick={onToggleMode} className="rounded-full">
                {mode === "night" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
              </Button>
            </div>
          </motion.header>
        )}
      </AnimatePresence>
    </>
  );
}