
import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, X, Sun, Moon, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button.jsx';
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet.jsx';
import { useTheme } from './ThemeProvider.jsx';
import { cn } from '@/lib/utils.js';

export default function Header() {
  const [scrolled, setScrolled] = useState(false);
  const location = useLocation();
  const { theme, setTheme } = useTheme();

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

  const navLinks = [
    { name: 'HOME', path: '/' },
    { name: 'MÉTODO CVT™', path: '/metodo-cvt' },
    { name: 'PATRIMÔNIO TECNOLÓGICO™', path: '/patrimonio-tecnologico' },
    { name: 'CONTINUIDADE TECNOLÓGICA™', path: '/continuidade-tecnologica' },
    { name: 'EXPERIÊNCIAS™', path: '/experiencias' },
    { name: 'INVESTIDORES™', path: '/investidores' },
    { name: 'SOBRE', path: '/sobre' },
  ];

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <header 
      className={cn(
        "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
        scrolled ? "glass-panel py-3" : "bg-transparent py-5"
      )}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center">
          
          <Link to="/" className="flex items-center gap-2 group">
            <Sparkles className="h-6 w-6 text-primary group-hover:text-accent transition-colors" />
            <span className="font-bold text-xl tracking-wider">LCP <span className="font-light text-primary">VALUATION</span></span>
          </Link>

          <nav className="hidden lg:flex items-center gap-6">
            {navLinks.map((link) => (
              <Link
                key={link.path}
                to={link.path}
                className={cn(
                  "text-[11px] font-semibold tracking-widest transition-colors hover:text-primary",
                  location.pathname === link.path ? "text-primary border-b-2 border-primary pb-1" : "text-foreground/80"
                )}
              >
                {link.name}
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleTheme}
              className="rounded-full hidden sm:flex hover:bg-primary/20"
              aria-label="Toggle theme"
            >
              <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-foreground" />
              <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-foreground" />
            </Button>

            <Button asChild className="hidden md:flex bg-primary text-primary-foreground hover:bg-accent transition-all rounded-full px-6 font-semibold tracking-wide text-xs">
              <Link to="/avaliacao-exclusiva">AVALIAÇÃO EXCLUSIVA</Link>
            </Button>

            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="lg:hidden">
                  <Menu className="h-6 w-6" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[400px] border-border bg-card">
                <SheetTitle className="text-left mb-6 text-primary tracking-widest text-sm font-bold">MENU</SheetTitle>
                <nav className="flex flex-col gap-4 mt-8">
                  {navLinks.map((link) => (
                    <Link
                      key={link.path}
                      to={link.path}
                      className={cn(
                        "text-sm font-semibold tracking-widest py-2 border-b border-border transition-colors hover:text-primary",
                        location.pathname === link.path ? "text-primary" : "text-card-foreground"
                      )}
                    >
                      {link.name}
                    </Link>
                  ))}
                  <Button asChild className="mt-6 bg-primary text-primary-foreground">
                    <Link to="/avaliacao-exclusiva">AVALIAÇÃO EXCLUSIVA</Link>
                  </Button>
                  <Button
                    variant="outline"
                    onClick={toggleTheme}
                    className="mt-2 w-full justify-center gap-2 border-border"
                  >
                    {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                    Mudar Tema
                  </Button>
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  );
}
