import React, { useState, useContext } from 'react';
import { NavigationContext } from '../App';
import SearchNavBar from '../components/SearchNavBar';
import AdvancedSearchBar from '../components/AdvancedSearchBar';
import SearchFilters from '../components/SearchFilters';
import Footer from '../components/Footer';
import { categories } from '../data/mockData';

const SearchPage: React.FC = () => {
  const [activeNavItem, setActiveNavItem] = useState('search');
  const [query, setQuery] = useState<string>('');
  const [_, setActiveFilters] = useState<{
    categories: number[];
    rating: number | null;
    distance: number | null;
  }>({
    categories: [],
    rating: null,
    distance: null
  });
  const { navigateTo } = useContext(NavigationContext);

  const handleSearch = (searchQuery: string) => {
    setQuery(searchQuery);
    console.log('Iskanje:', searchQuery);
    // Implementacija iskalne logike
  };

  const handleResetClick = () => {
    setQuery('');
    setActiveFilters({
      categories: [],
      rating: null,
      distance: null
    });
    console.log('Filtri so bili ponastavljeni');
  };

  const handleHelpClick = () => {
    alert('Pomoč za iskanje');
    console.log('Pomoč za iskanje');
  };

  const handleFilterChange = (filters: {
    categories: number[];
    rating: number | null;
    distance: number | null;
  }) => {
    setActiveFilters(filters);
    console.log('Filtri so bili posodobljeni:', filters);
  };

  const handleNavItemClick = (itemId: string) => {
    setActiveNavItem(itemId);
    if (itemId === 'home') {
      navigateTo('home');
    } else if (itemId === 'reservations') {
      navigateTo('reservations');
    } else if (itemId === 'profile') {
      alert('Stran za profil še ni implementirana.');
    }
  };

  return (
    <div className="h-full gradient-bg relative">
      {/* Skip to content link za dostopnost */}
      <a href="#search-content" className="sr-only focus:not-sr-only focus:absolute focus:bg-white focus:text-black focus:p-2 focus:z-50">
        Preskoči na vsebino
      </a>
      
      <SearchNavBar 
        onResetClick={handleResetClick}
        onHelpClick={handleHelpClick}
      />
      
      {/* Vsebina začne tukaj - main content z dodatnim padding-bottom za sticky footer */}
      <div className="content-container overflow-y-auto hide-scrollbar h-full has-sticky-footer">
        <main id="search-content">
          <AdvancedSearchBar 
            onSearch={handleSearch}
            initialQuery={query}
            placeholder="Išči restavracije, jedi..."
          />
          
          <div className="px-5 py-4">
            <SearchFilters 
              categories={categories}
              onFilterChange={handleFilterChange}
            />
          </div>
          
          {/* Rezultati iskanja - za implementacijo kasneje */}
          <div className="px-5 py-4">
            <h2 className="text-lg font-semibold text-black mb-3">Rezultati iskanja</h2>
            {query ? (
              <p className="text-sm text-black">Iskalni niz: "{query}"</p>
            ) : (
              <p className="text-sm text-black opacity-70">Vnesite iskalni niz za prikaz rezultatov</p>
            )}
          </div>
        </main>
      </div>
      
      <Footer activeItem={activeNavItem} onNavItemClick={handleNavItemClick} />
    </div>
  );
};

export default SearchPage;