import React from 'react';
import { 
  FileText, 
  User, 
  Book, 
  Key, 
  Library, 
  Moon, 
  LogOut 
} from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface SidebarProps {
  currentView: string;
  setCurrentView: (view: any) => void;
  onLogout: () => void;
}

export const Sidebar: React.FC<SidebarProps> = ({ currentView, setCurrentView, onLogout }) => {
  const { t } = useTranslation();

  return (
    <aside className="w-72 border-r border-black/5 bg-white flex flex-col shadow-editorial">
      <div className="p-8">
        <div className="flex items-center gap-4 group cursor-pointer" onClick={() => setCurrentView('translate')}>
          <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg transition-transform group-hover:rotate-12">
            W
          </div>
          <span className="text-xl font-black tracking-tighter uppercase">Office Translator</span>
        </div>
      </div>

      <nav className="flex-1 px-4 space-y-1 mt-4">
        <button 
          onClick={() => setCurrentView('translate')}
          className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'translate' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
        >
          <FileText size={18} />
          Traduire
        </button>
        <button 
          onClick={() => setCurrentView('profile')}
          className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'profile' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
        >
          <User size={18} />
          Mon Profil
        </button>
        <button 
          onClick={() => setCurrentView('context')}
          className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'context' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
        >
          <Book size={18} />
          Contexte
        </button>
        <button 
          onClick={() => setCurrentView('api-keys')}
          className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'api-keys' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
        >
          <Key size={18} />
          Clés API
        </button>
        <button 
          onClick={() => setCurrentView('glossary')}
          className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'glossary' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
        >
          <Library size={18} />
          Glossaires
        </button>
      </nav>

      <div className="px-6 py-4">
        <div className="bg-brand-muted/50 rounded-3xl p-6 border border-black/5 group cursor-pointer hover:bg-brand-dark transition-all duration-500">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-8 h-8 bg-brand-dark group-hover:bg-brand-accent rounded-lg flex items-center justify-center text-white text-xs font-black shadow-sm transition-all group-hover:rotate-12">M</div>
            <span className="text-[10px] font-black uppercase tracking-widest text-brand-dark group-hover:text-white transition-colors">{t('memento.title')}</span>
          </div>
          <p className="text-[9px] text-brand-dark/40 group-hover:text-white/60 font-medium leading-relaxed mb-6">
            {t('memento.slogan').substring(0, 80)}...
          </p>
          <div className="flex flex-col gap-2">
            <button className="w-full py-2.5 bg-brand-dark group-hover:bg-white text-white group-hover:text-brand-dark rounded-xl text-[8px] font-black uppercase tracking-widest shadow-sm transition-all">
              {t('memento.ctaFree')}
            </button>
            <button className="w-full py-2 text-brand-dark/30 group-hover:text-white/40 text-[8px] font-black uppercase tracking-widest transition-all">
              {t('memento.ctaMore')}
            </button>
          </div>
        </div>
      </div>

      <div className="p-6 border-t border-black/5">
        <div className="flex items-center justify-between group p-4 rounded-2xl hover:bg-brand-muted/50 transition-all">
          <div className="flex items-center gap-3 overflow-hidden">
            <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white text-[11px] font-bold shadow-sm transition-transform group-hover:rotate-6">SR</div>
            <div className="overflow-hidden">
              <p className="text-[11px] font-black uppercase tracking-tight truncate">Sepehr Ramezani</p>
              <p className="text-[9px] text-brand-dark/40 font-bold truncate">sepehr1151@gmail.com</p>
              <div className="flex items-center gap-2 mt-1">
                <span className="accent-pill !px-1.5 !py-0 text-[7px] uppercase tracking-widest bg-brand-accent/10 border-brand-accent/20">pro</span>
                <button className="text-brand-dark/20 hover:text-brand-dark transition-colors"><Moon size={10} /></button>
              </div>
            </div>
          </div>
          <button 
            onClick={onLogout}
            className="p-2 text-brand-dark/20 hover:text-red-500 transition-colors"
            title="Déconnexion"
          >
            <LogOut size={16} />
          </button>
        </div>
      </div>
    </aside>
  );
};
