import React, { useState } from 'react';
import { Logo } from "./Header/Logo";
import { Menu, Search, X, ChevronDown, Bookmark } from 'lucide-react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { CategoryIds, CategoryTitles, CityIds, CityTitles } from '../types';
import { useBookmarkStore } from "../stores/bookmarkStore";


export function HeaderMono() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const location = useLocation();
  const navigate = useNavigate();
  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');
    }
    
    navigate(`/?${params.toString()}`);
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
    }
  };

  const handleSearchKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch(e);
    }
  };

  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">
        <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>
              <div className="relative">
                <select
                  value={currentCity || ''}
                  onChange={handleCityChange}
                  className="appearance-none bg-white pl-3 pr-8 py-2 text-sm font-medium rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                >
                  <option value="">Все столицы</option>
                  {CityIds.map((city) => (
                    <option key={city} value={city}>
                      {CityTitles[city]}
                    </option>
                  ))}
                </select>
                <ChevronDown 
                  size={16} 
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" 
                />
              </div>
            </div>

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

            {/* Menu */}
            <div className="flex items-center space-x-4 overflow-x-auto">
              {CategoryIds.map((category) => (
                <Link
                  key={category}
                  to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
                  className={`px-3 py-2 font-medium transition-colors whitespace-nowrap ${
                    Number(currentCategory) === category
                        ? 'text-base md:text-lg lg:text-xl font-semibold text-blue-600 hover:text-blue-800 bg-gray-200'
                        : 'text-sm md:text-base lg:text-lg font-medium text-gray-600 hover:text-gray-900'
                  }`}
                >
                  {CategoryTitles[category]}
                </Link>
              ))}
            </div>
          </nav>

          <div className="flex items-center space-x-4">
            <form onSubmit={handleSearch} className="relative">
              <input
                type="text"
                placeholder="Поиск..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyDown={handleSearchKeyPress}
                className="w-40 lg:w-60 pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <button
                type="submit"
                className="absolute left-3 top-2.5 text-gray-400 hover:text-gray-600"
              >
                <Search size={18} />
              </button>
            </form>
            <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>

      {/* Mobile menu */}
      <div
        className={`lg:hidden ${
          isMobileMenuOpen ? 'block' : 'hidden'
        } border-b border-gray-200`}
      >
        <div className="px-2 pt-2 pb-3 space-y-1">
          <div className="px-3 py-2">
            <h3 className="text-sm font-medium text-gray-500 mb-2">Столицы</h3>
            <select
              value={currentCity || ''}
              onChange={handleCityChange}
              className="w-full bg-white px-3 py-2 text-base font-medium rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="">Все столицы</option>
              {CityIds.map((city) => (
                <option key={city} value={city}>
                  {CityTitles[city]}
                </option>
              ))}
            </select>
          </div>

          <div className="px-3 py-2">
            <h3 className="text-sm font-medium text-gray-500 mb-2">Разделы</h3>
            <div className="space-y-0">
              {CategoryIds.map((category) => (
                <Link
                  key={category}
                  to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
                  className={`block px-3 py-2 rounded-md text-base font-medium ${
                    Number(currentCategory) === category
                      ? 'bg-blue-50 text-blue-600'
                      : 'text-gray-600 hover:bg-gray-50'
                  }`}
                >
                  {CategoryTitles[category]}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}