import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { useFavorites } from '../hooks/useFavorites';

interface Props {
  language: Language;
  onOpenSettings: () => void;
  isMobileMenuOpen?: boolean;
  onCloseMobileMenu?: () => void;
}

const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu }: Props) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const dict = t[language].sidebar;
  const { favorites } = useFavorites();

  const isOverview = location.pathname === '/';
  const isFavoritesPage = location.pathname === '/favorites';
  const isMap = location.pathname === '/map';

  const handleNavigate = (path: string) => {
    navigate(path);
    if (onCloseMobileMenu) onCloseMobileMenu();
  };

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''} ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
      <div className="sidebar-logo">
        <FiDroplet size={28} color="var(--color-cyan)" />
        <div className="sidebar-text">
          <span style={{ fontWeight: 'bold', letterSpacing: '0.5px', fontSize: '1.1rem' }}>HLADINATOR</span>
          <small>v1.0</small>
        </div>
      </div>
      
      {/* Toggle Button */}
      <div style={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', marginBottom: '1.5rem', marginTop: isCollapsed ? '1rem' : '-0.5rem' }}>
        <button 
          onClick={() => setIsCollapsed(!isCollapsed)}
          style={{
            background: 'var(--bg-card)', border: '1px solid var(--border-color)', color: 'var(--text-main)',
            borderRadius: '50%', width: '32px', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', zIndex: 10, boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
          }}
        >
          {isCollapsed ? <FiChevronRight size={18} /> : <FiChevronLeft size={18} />}
        </button>
      </div>
      
      <div className="nav-links">
        {/* Favourites */}
        <div className={`nav-item ${isFavoritesPage ? 'active' : ''}`} onClick={() => handleNavigate('/favorites')} style={{ position: 'relative' }}>
          <div style={{ position: 'relative', display: 'flex' }}>
            <FiStar fill={favorites.length > 0 ? '#f59e0b' : 'none'} color={favorites.length > 0 ? '#f59e0b' : 'currentColor'} />
            {favorites.length > 0 && (
              <span style={{
                position: 'absolute',
                top: '-8px',
                right: '-12px',
                backgroundColor: '#f59e0b',
                color: '#000',
                borderRadius: '999px',
                fontSize: '0.65rem',
                fontWeight: 'bold',
                minWidth: '16px',
                height: '16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: '0 4px',
                border: '2px solid var(--bg-card)'
              }}>
                {favorites.length}
              </span>
            )}
          </div>
          <span className="sidebar-text">{dict.favorites}</span>
        </div>

        {/* Lakes & Reservoirs */}
        <div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
          <FiDatabase />
          <span className="sidebar-text">{dict.lakes}</span>
        </div>

        {/* Map */}
        <div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
          <FiMap />
          <span className="sidebar-text">{dict.map}</span>
        </div>
      </div>

      <div className="sidebar-footer">
        <div className="nav-item" onClick={onOpenSettings}>
          <FiSettings />
          <span className="sidebar-text">{dict.settings}</span>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;