import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Menu, X, User, Plus, Sun, Moon, Globe } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { useCart } from "@/contexts/CartContext";
import CartSidebar from "@/components/CartSidebar";

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isDark, setIsDark] = useState(false);
  const { user, isAuthenticated, logout } = useAuth();
  const { language, setLanguage, t } = useLanguage();
  const { getTotalItems } = useCart();
  const navigate = useNavigate();

  const toggleTheme = () => {
    setIsDark(!isDark);
    document.documentElement.classList.toggle('dark');
  };

  const handleAuthAction = () => {
    if (isAuthenticated) {
      navigate('/dashboard');
    } else {
      navigate('/sign-in');
    }
  };

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  const languages = [
    { code: 'es', name: 'ES', flag: '🇪🇸' },
    { code: 'en', name: 'EN', flag: '🇺🇸' },
    { code: 'fr', name: 'FR', flag: '🇫🇷' }
  ];

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
      <div className="container mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          {/* Logo */}
<Link to="/" className="flex items-center">
  <img 
    src="https://karibeo.com/desktop/assets/images/logo.png" 
    alt="Karibeo" 
    className="h-8 w-auto"
  />
</Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link 
              to="/" 
              className="text-white hover:text-orange-400 font-medium transition-colors relative py-2"
              style={{
                borderBottom: '3px solid #F84525',
                paddingBottom: '8px'
              }}
            >
              Home
            </Link>
            <Link 
              to="/explore" 
              className="text-white hover:text-orange-400 font-medium transition-colors py-2"
            >
              Explore
            </Link>
            <Link 
              to="/" 
              className="text-white hover:text-orange-400 font-medium transition-colors py-2"
            >
              About
            </Link>
          </nav>

          {/* Desktop Actions */}
          <div className="hidden md:flex items-center space-x-4">
            {/* Language/Theme Controls */}
            <div className="flex items-center space-x-2">
              <Button 
                variant="ghost" 
                size="sm" 
                className="text-white hover:text-orange-400 rounded-full w-10 h-10 p-0"
                onClick={toggleTheme}
              >
                {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
              </Button>
              
              <CartSidebar />
              
              <Button variant="ghost" size="sm" className="text-white hover:text-orange-400 rounded-full w-10 h-10 p-0">
                <User className="w-4 h-4" />
              </Button>
            </div>

            {isAuthenticated ? (
              <div className="flex items-center space-x-3">
                <Button 
                  onClick={handleAuthAction}
                  className="text-white rounded-full px-6 py-2"
                  style={{backgroundColor: '#F84525'}}
                >
                  Dashboard
                </Button>
                <Button 
                  onClick={handleLogout}
                  variant="outline" 
                  className="rounded-full text-white border-white hover:bg-white hover:text-gray-900"
                >
                  Sign Out
                </Button>
              </div>
            ) : (
              <Button 
                onClick={() => navigate('/sign-up')}
                className="text-white rounded-full px-6 py-2"
                style={{backgroundColor: '#F84525'}}
              >
                <Plus className="w-4 h-4 mr-2" />
                Add Listing
              </Button>
            )}
          </div>

          {/* Mobile Menu Button */}
          <Button
            variant="ghost"
            size="sm"
            className="md:hidden text-white"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </Button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden mt-6 pb-6 bg-white/10 backdrop-blur-md rounded-lg">
            <nav className="flex flex-col space-y-4 p-6">
              <Link to="/" className="text-white hover:text-orange-400 font-medium transition-colors">
                Home
              </Link>
              <Link to="/explore" className="text-white hover:text-orange-400 font-medium transition-colors">
                Explore
              </Link>
              <Link to="/" className="text-white hover:text-orange-400 font-medium transition-colors">
                About
              </Link>
              <div className="flex flex-col space-y-3 pt-4 border-t border-white/20">
                {isAuthenticated ? (
                  <>
                    <Button 
                      onClick={handleAuthAction}
                      style={{backgroundColor: '#F84525'}}
                      className="text-white"
                    >
                      Dashboard
                    </Button>
                    <Button 
                      onClick={handleLogout}
                      variant="outline"
                      className="text-white border-white"
                    >
                      Sign Out
                    </Button>
                  </>
                ) : (
                  <Button 
                    onClick={() => navigate('/sign-up')}
                    style={{backgroundColor: '#F84525'}}
                    className="text-white"
                  >
                    Add Listing
                  </Button>
                )}
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;