import { CheckCircle2, LogIn } from 'lucide-react';
import { WAInvitation } from '../../types';

interface VerificationCompletedProps {
  activeInvite: WAInvitation;
  onGoToAdmin: () => void;
  isAdminLoggedIn?: boolean;
}

export default function VerificationCompleted({
  activeInvite,
  onGoToAdmin,
  isAdminLoggedIn
}: VerificationCompletedProps) {
  return (
    <div className="max-w-2xl mx-auto px-4 py-16 text-center font-sans">
      <div className="bg-white border border-slate-200 dark:border-slate-800 shadow-xl rounded-3xl p-10 md:p-14">
        <div className="flex justify-center mb-6">
          <div className="bg-emerald-50 dark:bg-emerald-950/25 p-5 rounded-full border border-emerald-100 dark:border-emerald-900/30 shadow-md">
            <CheckCircle2 className="h-16 w-16 text-emerald-600 dark:text-emerald-400" />
          </div>
        </div>
        
        <h1 className="text-2xl md:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
          Partisipasi Telah Selesai
        </h1>
        
        <p className="mt-4 text-slate-600 dark:text-slate-300 text-base leading-relaxed">
          Halo, kuesioner evaluasi pimpinan Anda telah berhasil diisi dan terekam secara aman dalam sistem kami.
        </p>
        
        <div className="my-8 p-6 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800 text-left space-y-3">
          <div className="flex justify-between items-center text-xs border-b border-slate-100 dark:border-slate-800/60 pb-2.5">
            <span className="text-slate-400 font-bold uppercase tracking-wider">Status / Peran</span>
            <span className="font-mono font-bold text-slate-700 dark:text-slate-300">{activeInvite.role}</span>
          </div>
          <div className="flex justify-between items-center text-xs border-b border-slate-100 dark:border-slate-800/60 pb-2.5">
            <span className="text-slate-400 font-bold uppercase tracking-wider">Unit / Departemen</span>
            <span className="font-bold text-slate-800 dark:text-white truncate max-w-[200px]" title={activeInvite.unit}>{activeInvite.unit}</span>
          </div>
          <div className="flex justify-between items-center text-xs pt-1">
            <span className="text-slate-400 font-bold uppercase tracking-wider">Metode Pengisian</span>
            <span className="text-emerald-600 dark:text-emerald-400 font-bold">Personal Invite Link (Anonim)</span>
          </div>
        </div>

        <p className="text-xs text-slate-400 leading-relaxed max-w-md mx-auto">
          Sistem evaluasi dijamin bersifat <strong className="text-slate-700 dark:text-slate-300">ANONIM</strong> tanpa melampirkan profil identitas responden perorangan demi kenyamanan Anda seluruh civitas akademik Institut Kesehatan Immanuel.
        </p>

        <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
          <button
            onClick={onGoToAdmin}
            className="px-5 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold rounded-xl shadow-md transition cursor-pointer flex items-center justify-center gap-2"
          >
            <LogIn className="h-4 w-4" />
            <span>{isAdminLoggedIn ? 'Kembali ke Dashboard' : 'Masuk Portal Admin'}</span>
          </button>
        </div>
      </div>
    </div>
  );
}