import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { UserMeResponse } from '../types/api';
import { NAV_ITEMS, SETTINGS_ID } from './navItems';
import SettingsPanel from './SettingsPanel';

interface BottomNavProps {
  activeItem: string;
  onNavigate: (id: string) => void;
  userInfo?: UserMeResponse | null;
  onLogout?: () => void;
  credits?: number | null;
  isGuest: boolean;
  onLoginClick: () => void;
}

const BottomNav: React.FC<BottomNavProps> = ({ activeItem, onNavigate, userInfo, onLogout, credits, isGuest, onLoginClick }) => {
  const { t } = useTranslation();
  const [settingsOpen, setSettingsOpen] = useState(false);
  const settingsAnchorRef = useRef<HTMLButtonElement>(null);

  const handleItemClick = (id: string) => {
    if (id === SETTINGS_ID) {
      setSettingsOpen(v => !v);
      return;
    }
    onNavigate(id);
  };

  return (
    <>
      {settingsOpen && <div className="settings-backdrop" onClick={() => setSettingsOpen(false)} />}
      {settingsOpen && (
        <SettingsPanel
          variant="bottom"
          onClose={() => setSettingsOpen(false)}
          onNavigate={onNavigate}
          activeItem={activeItem}
          userInfo={userInfo}
          credits={credits}
          isGuest={isGuest}
          onLogout={onLogout}
          onLoginClick={onLoginClick}
          anchorRef={settingsAnchorRef}
        />
      )}
      <nav className="bottom-nav">
        {NAV_ITEMS.map(item => {
          const isActive = item.id === SETTINGS_ID ? settingsOpen : activeItem === item.id;
          return (
            <button
              key={item.id}
              ref={item.id === SETTINGS_ID ? settingsAnchorRef : undefined}
              className={`bottom-nav-item ${isActive ? 'active' : ''}`}
              onClick={() => handleItemClick(item.id)}
            >
              {item.icon}
              <span>{t(item.labelKey)}</span>
            </button>
          );
        })}
      </nav>
    </>
  );
};

export default BottomNav;