import { UserCheck, Check } from 'lucide-react';
import { RespondentStatus, WAInvitation, UnitProdi } from '../../types';

interface RespondentIdentityProps {
  activeInvite: WAInvitation | null;
  status: RespondentStatus | '';
  setStatus: (status: RespondentStatus) => void;
  unit: string;
  setUnit: (unit: string) => void;
  units: UnitProdi[];
}

export default function RespondentIdentity({
  activeInvite,
  status,
  setStatus,
  unit,
  setUnit,
  units
}: RespondentIdentityProps) {
  return (
    <div className="bg-slate-50 border border-slate-200 p-5 rounded-2xl shadow-3xs">
      <div className="flex items-center justify-between gap-2 mb-4.5">
        <div className="flex items-center gap-2">
          <UserCheck className="h-4.5 w-4.5 text-blue-600" />
          <h2 className="text-xs font-bold text-slate-800 uppercase tracking-widest">Identitas Responden</h2>
        </div>
        {activeInvite && (
          <span className="text-[9px] bg-amber-50 text-amber-700 border border-amber-200 px-2.5 py-0.5 rounded-lg font-bold uppercase tracking-widest shadow-3xs">
            Terverifikasi
          </span>
        )}
      </div>

      {activeInvite ? (
        <div className="space-y-4">
          <div className="p-3 bg-emerald-50/60 border border-emerald-100 rounded-xl flex items-center gap-2 text-xs font-bold text-emerald-800">
            <div className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse shrink-0" />
            <span>Undangan Personal Aktif & Terverifikasi (Anonim)</span>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-white border border-slate-200 rounded-xl">
              <span className="text-[9px] text-slate-400 font-extrabold uppercase tracking-widest block">Status</span>
              <span className="text-xs font-bold text-slate-800 block mt-1">{activeInvite.role}</span>
            </div>
            <div className="p-3 bg-white border border-slate-200 rounded-xl min-w-0">
              <span className="text-[9px] text-slate-400 font-extrabold uppercase tracking-widest block">Unit Kerja</span>
              <span className="text-xs font-bold text-slate-800 block mt-1 truncate" title={activeInvite.unit}>{activeInvite.unit}</span>
            </div>
          </div>

          <div className="text-[10px] text-slate-500 leading-relaxed text-center bg-slate-100/50 px-2 py-2 rounded-lg">
            🚨 Tautan dikunci untuk 1 kali berpartisipasi. Kerahasiaan identitas dan transparansi dijamin sepenuhnya <strong>ANONIM</strong>.
          </div>
        </div>
      ) : (
        <div className="space-y-4">
          <div>
            <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">
              Status Responden *
            </label>
            <div className="grid grid-cols-2 gap-2">
              <button
                type="button"
                onClick={() => setStatus('Dosen')}
                className={`py-2 px-3 rounded-xl border text-[11px] font-bold tracking-wide transition cursor-pointer flex justify-center items-center gap-1.5 ${
                  status === 'Dosen'
                    ? 'bg-blue-600 border-blue-600 text-white shadow-sm'
                    : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-100'
                }`}
              >
                <span>Dosen</span>
                {status === 'Dosen' && <Check className="h-3 w-3 stroke-[3]" />}
              </button>

              <button
                type="button"
                onClick={() => setStatus('Tenaga Kependidikan')}
                className={`py-2 px-3 rounded-xl border text-[11px] font-bold tracking-wide transition cursor-pointer flex justify-center items-center gap-1.5 ${
                  status === 'Tenaga Kependidikan'
                    ? 'bg-blue-600 border-blue-600 text-white shadow-sm'
                    : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-100'
                }`}
              >
                <span>Tendik</span>
                {status === 'Tenaga Kependidikan' && <Check className="h-3 w-3 stroke-[3]" />}
              </button>
            </div>
          </div>

          <div>
            <label htmlFor="top-input-unit" className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">
              Unit Kerja / Prodi *
            </label>
            <select
              id="top-input-unit"
              value={unit}
              onChange={(e) => setUnit(e.target.value)}
              className="w-full px-3.5 py-2 text-xs rounded-xl border border-slate-200 bg-white text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition shadow-3xs font-medium cursor-pointer"
            >
              <option value="">-- Pilih Unit Kerja / Prodi --</option>
              {units.map((u) => (
                <option key={u.id} value={u.nama}>
                  {u.nama}
                </option>
              ))}
            </select>
          </div>
        </div>
      )}
    </div>
  );
}