import { useState, useEffect } from "react";
import { Menu, X, Phone, User, LogOut } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { supabase } from "@/integrations/supabase/client";
import logo from "@/assets/logo.png";

const Navbar = () => {
  const [open, setOpen] = useState(false);
  const [user, setUser] = useState<any>(null);
  const navigate = useNavigate();

  useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
    });
    supabase.auth.getSession().then(({ data: { session } }) => setUser(session?.user ?? null));
    return () => subscription.unsubscribe();
  }, []);

  const handleLogout = async () => {
    await supabase.auth.signOut();
    setUser(null);
    navigate("/");
  };

  const links = [
    { label: "Accueil", href: "/", isRoute: true },
    { label: "Destinations", href: "/destinations", isRoute: true },
    { label: "Nos classes", href: "/classes", isRoute: true },
    { label: "Services", href: "/services", isRoute: true },
    { label: "À propos", href: "/a-propos", isRoute: true },
    { label: "Vérifier réservation", href: "/verifier", isRoute: true },
    { label: "Contact", href: "/contact", isRoute: true },
  ];

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 glass-card border-b border-border">
      <div className="container mx-auto flex items-center justify-between h-16 px-4">
        <a href="#" className="flex items-center gap-2">
          <img src={logo} alt="Men Travel" className="h-12 w-auto" width="120" height="48" />
        </a>
        <div className="hidden md:flex items-center gap-6">
          {links.map((l) => (
            l.isRoute ? (
              <Link key={l.label} to={l.href} className="text-sm font-medium text-foreground hover:text-primary transition-colors">
                {l.label}
              </Link>
            ) : (
              <a key={l.label} href={l.href} className="text-sm font-medium text-foreground hover:text-primary transition-colors">
                {l.label}
              </a>
            )
          ))}
        </div>
        <div className="hidden md:flex items-center gap-3">
          <a href="https://wa.me/237659120916" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm font-semibold text-primary hover:opacity-80 transition">
            <Phone className="h-4 w-4" />
            <span>+237 659 12 09 16</span>
          </a>
          {user ? (
            <button
              onClick={handleLogout}
              className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors ml-2"
            >
              <LogOut className="h-4 w-4" />
              Déconnexion
            </button>
          ) : (
            <Link
              to="/auth"
              className="flex items-center gap-1.5 bg-secondary text-secondary-foreground text-sm font-semibold px-4 py-2 rounded-lg hover:brightness-110 transition ml-2"
            >
              <User className="h-4 w-4" />
              Se connecter
            </Link>
          )}
        </div>
        <button onClick={() => setOpen(!open)} className="md:hidden text-foreground">
          {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>
      {open && (
        <div className="md:hidden bg-card border-t border-border px-4 pb-4">
          {links.map((l) => (
            l.isRoute ? (
              <Link key={l.label} to={l.href} onClick={() => setOpen(false)} className="block py-2 text-sm font-medium text-foreground hover:text-primary">
                {l.label}
              </Link>
            ) : (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)} className="block py-2 text-sm font-medium text-foreground hover:text-primary">
                {l.label}
              </a>
            )
          ))}
          {user ? (
            <button
              onClick={() => { handleLogout(); setOpen(false); }}
              className="block py-2 text-sm font-medium text-destructive"
            >
              Déconnexion
            </button>
          ) : (
            <Link
              to="/auth"
              onClick={() => setOpen(false)}
              className="block py-2 text-sm font-semibold text-primary"
            >
              Connexion / Inscription
            </Link>
          )}
        </div>
      )}
    </nav>
  );
};

export default Navbar;