import { ClipboardList, Check } from 'lucide-react';
import { Leader } from '../../types';

interface LeaderSidebarProps {
  leaders: Leader[];
  leaderId: string;
  submittedLeaders: string[];
  handleLeaderTabChange: (id: string) => void;
}

export default function LeaderSidebar({
  leaders,
  leaderId,
  submittedLeaders,
  handleLeaderTabChange
}: LeaderSidebarProps) {
  return (
    <div className="bg-slate-50 border border-slate-200 p-5 rounded-2xl shadow-3xs">
      <div className="flex items-center gap-2 mb-3.5">
        <ClipboardList className="h-4.5 w-4.5 text-blue-600" />
        <h2 className="text-xs font-bold text-slate-800 uppercase tracking-widest">
          Daftar Evaluasi Pimpinan
        </h2>
      </div>

      <div className="space-y-2 max-h-[350px] overflow-y-auto scrollbar-thin">
        {leaders.map((leader, idx) => {
          const isActive = leaderId === leader.id;
          const isCompleted = submittedLeaders.includes(leader.id);
          return (
            <button
              key={leader.id}
              type="button"
              onClick={() => handleLeaderTabChange(leader.id)}
              className={`w-full flex items-center justify-between p-3 rounded-xl border transition text-left cursor-pointer ${
                isActive 
                  ? 'border-blue-500 bg-blue-50/70 text-blue-900 shadow-3xs ring-1 ring-blue-500/10' 
                  : isCompleted
                    ? 'border-emerald-200 bg-emerald-50/10 text-slate-700 hover:bg-slate-100/50'
                    : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-100'
              }`}
            >
              <div className="flex items-center gap-3 min-w-0">
                <div className={`h-6.5 w-6.5 rounded-full flex items-center justify-center text-[10px] font-black font-mono shrink-0 ${
                  isActive
                    ? 'bg-blue-600 text-white'
                    : isCompleted
                      ? 'bg-emerald-500 text-white font-extrabold'
                      : 'bg-slate-100 text-slate-500 border border-slate-200'
                }`}>
                  {idx + 1}
                </div>
                <div className="min-w-0">
                  <span className="text-[11px] font-black block text-slate-950 truncate leading-tight">{leader.position}</span>
                  <span className="text-[9px] text-slate-500 block truncate leading-tight mt-0.5">
                    {leader.name === leader.position ? leader.department : leader.name}
                  </span>
                </div>
              </div>

              <div className="shrink-0 pl-1">
                {isCompleted ? (
                  <span className="text-[9px] font-extrabold text-emerald-600 uppercase flex items-center gap-0.5">
                    <Check className="h-3 w-3 stroke-[3.5]" /> Selesai
                  </span>
                ) : isActive ? (
                  <span className="text-[9px] font-extrabold text-blue-600 uppercase animate-pulse">
                    Sedang Dinilai
                  </span>
                ) : (
                  <span className="text-[9px] font-bold text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded uppercase">
                    Belum
                  </span>
                )}
              </div>
            </button>
          );
        })}
      </div>

      <div className="mt-4.5 pt-4.5 border-t border-slate-200/60 flex items-center justify-between text-[10px] text-slate-500">
        <span className="font-bold">Evaluasi Selesai:</span>
        <span className="font-extrabold text-slate-800 bg-slate-200/50 px-2 py-0.5 rounded font-mono">
          {submittedLeaders.length} DARI {leaders.length} SELESAI
        </span>
      </div>
    </div>
  );
}