"use client";

import { Link } from "@inertiajs/react";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Menu, X } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/Components/ui/sheet";
import { cn } from "@/lib/utils";
import { ModeToggle } from "@/Components/ModeToggle";

const navLinks = [
  { name: "Beranda", href: "/" },
  { name: "Kursus", href: "#courses" },
  { name: "Biaya", href: "#pricing" },
  { name: "Kurikulum", href: "#curriculum" },
  { name: "FAQ", href: "#faq" },
];

export function Navbar() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <motion.header
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-6 px-4 pointer-events-none"
    >
      <div
        className={cn(
            "flex items-center justify-between transition-all duration-300 ease-in-out pointer-events-auto",
            scrolled
              ? "bg-background/80 backdrop-blur-xl border border-white/10 shadow-2xl w-full max-w-5xl px-10 py-3 rounded-full gap-8"
              : "bg-transparent border-transparent w-full max-w-6xl px-6 py-3 rounded-full"
        )}
      >
        {/* Logo */}
        <Link href="/" className="relative flex items-center gap-2 group">
          <img 
            src="/brand/Nihonbuzz-Academy-Light-LS-Regular.png" 
            alt="NihonBuzz" 
            className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 group-hover:scale-105 dark:hidden"
          />
          <img 
            src="/brand/Nihonbuzz-Academy-Dark-LS-Regular.png" 
            alt="NihonBuzz" 
            className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 group-hover:scale-105 hidden dark:block"
          />
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden lg:flex items-center gap-6">
          {navLinks.map((link) => (
            <Link
              key={link.name}
              href={link.href}
              className="text-sm font-bold text-foreground/70 hover:text-primary transition-colors cursor-pointer whitespace-nowrap"
            >
              {link.name}
            </Link>
          ))}
        </nav>

        {/* Action Button & Mobile Menu */}
        <div className="flex items-center gap-3">
          <div className="hidden lg:flex items-center gap-3">
              <ModeToggle />
              <Link href={route('login')}>
                <Button 
                    variant="ghost" 
                    className="text-foreground/70 hover:text-primary hover:bg-primary/5 font-bold whitespace-nowrap"
                    size="sm"
                >
                    Login Siswa
                </Button>
              </Link>
              
              <Link href={route('register')}>
                <Button 
                    className="rounded-full bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20 font-black px-6 whitespace-nowrap"
                    size="sm"
                >
                    Daftar Kelas
                </Button>
              </Link>
          </div>

          {/* Mobile Toggle */}
          <Sheet>
            <div className="lg:hidden flex items-center gap-2 pointer-events-auto">
                <ModeToggle />
                <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="text-foreground rounded-full h-10 w-10 bg-foreground/5">
                    <Menu className="w-5 h-5" />
                </Button>
                </SheetTrigger>
            </div>
            <SheetContent side="top" className="w-full h-auto rounded-b-[2rem] border-border bg-background/95 backdrop-blur-xl pt-24 pb-10">
              <nav className="flex flex-col items-center gap-6">
                {navLinks.map((link) => (
                  <Link
                    key={link.name}
                    href={link.href}
                    className="text-lg font-bold text-foreground/80 hover:text-primary transition-colors cursor-pointer"
                  >
                    {link.name}
                  </Link>
                ))}
                <div className="flex flex-col gap-3 w-full max-w-xs mt-4">
                  <Link href={route('login')} className="w-full">
                    <Button variant="outline" className="w-full rounded-full border-border text-foreground hover:bg-muted font-bold">
                        Login Siswa
                    </Button>
                  </Link>
                  <Link href={route('register')} className="w-full">
                    <Button className="w-full rounded-full bg-primary hover:bg-primary/90 font-bold">
                        Daftar Kelas
                    </Button>
                  </Link>
                </div>
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </motion.header>
  );
}