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


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="bg-white border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
          <h1 className="text-center text-xl sm:text-2xl font-semibold text-gray-800 tracking-tight bg-gradient-to-b from-white to-gray-100 border-b border-gray-100 pb-2">
            Новая Культура Двух Столиц
          </h1>
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main header row */}
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <button 
              className="p-2 rounded-md text-gray-500 xl:hidden hover:bg-gray-100"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
            <div className="ml-2">
              <Logo />
            </div>
          </div>

          {/* Desktop navigation - single line for large screens */}
          <nav className="hidden xl:flex items-center space-x-8">
            <div className="flex items-center space-x-4">
              <CitySelector cities={CityIds} currentCity={currentCity} />
            </div>

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

            <Navigation 
              categories={CategoryIds}
              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>

        {/* Tablet navigation - two lines for medium screens */}
        <div className="hidden lg:block xl:hidden border-t border-gray-100">
          <div className="py-3">
            <div className="flex flex-col space-y-3">
              {/* First line: City selector */}
              <div className="flex justify-center">
                <CitySelector cities={CityIds} currentCity={currentCity} />
              </div>

              {/* Second line: Categories navigation */}
              <div className="flex justify-center">
                <Navigation
                    categories={CategoryIds}
                    currentCategory={currentCategory}
                    currentCity={currentCity}
                />
              </div>
            </div>
          </div>
        </div>
      </div>

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