import React, { useState } from 'react';
import { Home, Plus, Search, Bell, Moon, Sun } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
import UserDropdown from './UserDropdown';
import EditProfileModal from './EditProfileModal';
import PreferencesModal from './PreferencesModal';

interface NavigationProps {
  onCreatePost: () => void;
}

const Navigation: React.FC<NavigationProps> = ({ onCreatePost }) => {
  const { isDarkMode, toggleDarkMode } = useTheme();
  const [showEditProfile, setShowEditProfile] = useState(false);
  const [showPreferences, setShowPreferences] = useState(false);

  const handleThemeToggle = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    console.log('Theme toggle clicked, current mode:', isDarkMode);
    toggleDarkMode();
  };

  return (
    <>
      <nav className="bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 flex items-center justify-center">
                <svg viewBox="0 0 400 400" className="w-8 h-8">
                  <defs>
                    <style>
                      {`.magpie-body { fill: ${isDarkMode ? '#f5f5f5' : '#1a1a1a'}; }
                       .magpie-belly { fill: ${isDarkMode ? '#1a1a1a' : '#f5f5f5'}; }
                       .magpie-book { fill: ${isDarkMode ? '#d1d5db' : '#2a2a2a'}; stroke: ${isDarkMode ? '#f5f5f5' : '#1a1a1a'}; stroke-width: 3; }
                       .magpie-eye { fill: ${isDarkMode ? '#1a1a1a' : '#f5f5f5'}; }`}
                    </style>
                  </defs>
                  
                  {/* Book */}
                  <path d="M150 280 L250 280 L270 320 L130 320 Z" className="magpie-book"/>
                  <path d="M150 280 L250 280 L245 290 L155 290 Z" className="magpie-book"/>
                  
                  {/* Magpie Body */}
                  <ellipse cx="200" cy="220" rx="45" ry="65" className="magpie-body"/>
                  
                  {/* Magpie Belly */}
                  <ellipse cx="200" cy="235" rx="25" ry="35" className="magpie-belly"/>
                  
                  {/* Magpie Head */}
                  <circle cx="200" cy="160" r="35" className="magpie-body"/>
                  
                  {/* Magpie Beak */}
                  <path d="M225 155 L245 160 L225 165 Z" className="magpie-body"/>
                  
                  {/* Magpie Eye */}
                  <circle cx="210" cy="150" r="6" className="magpie-eye"/>
                  
                  {/* Magpie Tail */}
                  <path d="M155 250 L120 280 L140 290 L175 260 Z" className="magpie-body"/>
                  
                  {/* Magpie Wing */}
                  <ellipse cx="185" cy="210" rx="15" ry="30" className="magpie-body" transform="rotate(-20 185 210)"/>
                  
                  {/* Magpie Feet */}
                  <path d="M185 285 L185 295 M190 295 L180 295 M195 295 L185 295" className="magpie-body" stroke={isDarkMode ? '#f5f5f5' : '#1a1a1a'} strokeWidth="2" fill="none"/>
                  <path d="M215 285 L215 295 M220 295 L210 295 M225 295 L215 295" className="magpie-body" stroke={isDarkMode ? '#f5f5f5' : '#1a1a1a'} strokeWidth="2" fill="none"/>
                </svg>
              </div>
              <span className="text-2xl font-bold text-gray-900 dark:text-white">
                Magpie
              </span>
            </div>

            {/* Center Navigation */}
            <div className="hidden md:flex items-center space-x-8">
              <button className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
                <Home size={20} />
                <span className="font-medium">Home</span>
              </button>
              <button className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
                <Search size={20} />
                <span className="font-medium">Explore</span>
              </button>
            </div>

            {/* Right Navigation */}
            <div className="flex items-center space-x-4">
              <button
                onClick={onCreatePost}
                className="bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-full flex items-center space-x-2 hover:bg-gray-800 dark:hover:bg-gray-100 transform hover:scale-105 transition-all duration-200"
              >
                <Plus size={18} />
                <span className="hidden sm:inline font-medium">Create</span>
              </button>
              
              <button
                onClick={handleThemeToggle}
                className="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"
                title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
              >
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
              
              <button className="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
                <Bell size={20} />
              </button>
              
              <UserDropdown 
                onEditProfile={() => setShowEditProfile(true)}
                onPreferences={() => setShowPreferences(true)}
              />
            </div>
          </div>
        </div>
      </nav>

      {/* Modals */}
      <EditProfileModal 
        isOpen={showEditProfile} 
        onClose={() => setShowEditProfile(false)} 
      />
      <PreferencesModal 
        isOpen={showPreferences} 
        onClose={() => setShowPreferences(false)} 
      />
    </>
  );
};

export default Navigation;