import React, { useState } from 'react';
import { Menu, X, Bookmark } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import { Category, City } from '../../types';
import { Logo } from './Logo';
import { SearchBar } from './SearchBar';
import { Navigation } from './Navigation';
import { CitySelector } from './CitySelector';
import { MobileMenu } from './MobileMenu';
import { useBookmarkStore } from '../../stores/bookmarkStore';

const categories: Category[] = ['Film', 'Theater', 'Music', 'Sports', 'Art', 'Legends', 'Anniversaries', 'Memory'];
const cities: City[] = ['New York', 'London'];

export function Header() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const currentCategory = searchParams.get('category');
  const currentCity = searchParams.get('city');
  const { bookmarks } = useBookmarkStore();

  const handleCityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const city = event.target.value;
    const params = new URLSearchParams(location.search);
    
    if (city) {
      params.set('city', city);
    } else {
      params.delete('city');
    }
    
    window.location.href = `/?${params.toString()}`;
  };

  return (
    <header className="sticky top-0 z-50 bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <button 
              className="p-2 rounded-md text-gray-500 lg:hidden hover:bg-gray-100"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
            <div className="ml-2">
              <Logo />
            </div>
          </div>
          
          <nav className="hidden lg:flex items-center space-x-8">
            <div className="flex items-center space-x-4">
              <span className="text-sm font-medium text-gray-500"></span>
              <CitySelector cities={cities} currentCity={currentCity} />
            </div>

            <div className="h-6 w-px bg-gray-200" />

            <Navigation 
              categories={categories} 
              currentCategory={currentCategory} 
              currentCity={currentCity} 
            />
          </nav>

          <div className="flex items-center space-x-4">
            <SearchBar />
            <Link
              to="/bookmarks"
              className="relative p-2 rounded-full hover:bg-gray-100 transition-colors"
            >
              <Bookmark size={20} className="text-gray-500" />
              {bookmarks.length > 0 && (
                <span className="absolute -top-1 -right-1 bg-blue-600 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">
                  {bookmarks.length}
                </span>
              )}
            </Link>
          </div>
        </div>
      </div>

      <MobileMenu 
        isOpen={isMobileMenuOpen}
        categories={categories}
        cities={cities}
        currentCategory={currentCategory}
        currentCity={currentCity}
        onCityChange={handleCityChange}
      />
    </header>
  );
}