import { Menu, X, Facebook, Instagram, Linkedin } from 'lucide-react';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export default function Layout({ children }: { children: React.ReactNode }) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { user, signOut } = useAuth();
  const navigate = useNavigate();

  const handleSignOut = async () => {
    await signOut();
    setIsMenuOpen(false);
    navigate('/');
  };

  return (
    <div className="flex flex-col min-h-screen bg-white">
      {/* HEADER */}
      <header className="bg-brand-blue text-white shadow-md relative z-50">
        <div className="container mx-auto px-4 h-20 flex items-center justify-between">
          {/* Logos */}
          <Link to="/" className="flex items-center gap-4" onClick={() => setIsMenuOpen(false)}>
            <img src={`${import.meta.env.BASE_URL}images/logo-nestle.png`} alt="Nestlé" className="h-10 auto object-contain" />
            <img src={`${import.meta.env.BASE_URL}images/logo-maggi.png`} alt="Maggi" className="h-10 auto object-contain" />
          </Link>
          
          <button 
            className="md:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-6 font-bold text-sm">
             <Link to="/" className="hover:text-brand-yellow transition-colors">Inicio</Link>
             {user ? (
               <>
                 <Link to="/dashboard" className="hover:text-brand-yellow transition-colors">Mi cuenta</Link>
                 <Link to="/upload" className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
                 <button onClick={handleSignOut} className="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full transition-colors">Cerrar Sesión</button>
               </>
             ) : (
               <>
                 <Link to="/upload" className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
                 <Link to="/auth" className="bg-brand-yellow text-brand-blue px-6 py-2 rounded-full hover:bg-brand-yellow/90 transition-colors shadow-md">Iniciar sesión</Link>
                 <Link to="/auth" className="border border-white px-6 py-2 rounded-full hover:bg-white/10 transition-colors">Registrarte</Link>
               </>
             )}
          </nav>
        </div>
      </header>

      {/* Mobile Menu Overlay */}
      {isMenuOpen && (
        <div className="md:hidden fixed inset-0 top-20 z-40 bg-brand-blue/95 backdrop-blur-xl flex flex-col p-6 animate-in fade-in slide-in-from-top-4 duration-200">
          <nav className="flex flex-col gap-6 text-xl font-bold text-center mt-8 text-white">
            <Link to="/" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Inicio</Link>
            {user ? (
              <>
                 <Link to="/dashboard" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Mi cuenta</Link>
                 <Link to="/upload" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
                 <button onClick={handleSignOut} className="text-white hover:text-brand-yellow transition-colors">Cerrar Sesión</button>
              </>
            ) : (
              <>
                 <Link to="/upload" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
                 <Link to="/auth" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Iniciar sesión / Registro</Link>
              </>
            )}
          </nav>
        </div>
      )}

      {/* MAIN CONTENT */}
      <main className="flex-1 flex flex-col relative w-full overflow-hidden">
        {children}
      </main>

      {/* FOOTER */}
      <footer className="bg-brand-blue text-white py-6 mt-auto">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4">
           {/* Footer Logos */}
           <div className="flex items-center gap-4">
              <img src={`${import.meta.env.BASE_URL}images/logo-nestle.png`} alt="Nestlé" className="h-8 auto object-contain" />
              <img src={`${import.meta.env.BASE_URL}images/logo-maggi.png`} alt="Maggi" className="h-8 auto object-contain" />
           </div>

           <div className="text-xs md:text-sm text-center font-medium">
             <Link to="#" className="hover:underline">Términos y condiciones</Link>
           </div>

           <div className="flex items-center gap-4">
              <a href="#" className="hover:text-brand-yellow transition-colors"><Facebook size={24} fill="currentColor" /></a>
              <a href="#" className="hover:text-brand-yellow transition-colors"><Instagram size={24} /></a>
              <a href="#" className="hover:text-brand-yellow transition-colors"><Linkedin size={24} fill="currentColor" /></a>
           </div>
        </div>
      </footer>
    </div>
  );
}