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';

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 isOverview = location.pathname === '/';
  const isMap = location.pathname === '/map';
  const isDetail = !isOverview && !isMap;

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

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''} ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
      <div className="sidebar-logo" style={{ position: 'relative' }}>
        <FiDroplet />
        <div className="sidebar-text">
          <span>HLADINATOR</span>
          <small>v1.0</small>
        </div>
        
        {/* Toggle Button */}
        <button 
          onClick={() => setIsCollapsed(!isCollapsed)}
          style={{
            position: 'absolute', right: isCollapsed ? '-16px' : '-16px', top: '50%', transform: 'translateY(-50%)',
            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">
        <div className={`nav-item ${isDetail ? 'active' : ''}`} onClick={() => handleNavigate('/lipno-1')}>
          <FiStar />
          <span className="sidebar-text">{dict.favorites}</span>
        </div>
        <div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
          <FiDatabase />
          <span className="sidebar-text">{dict.lakes}</span>
        </div>
        <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;
