import React from 'react';
import { motion } from 'motion/react';
import { CheckCircle2, ChevronRight } from 'lucide-react';
import { Leader, WAInvitation } from '../../types';

interface EvaluationSuccessProps {
  leaderId: string;
  lastSubmittedName: string;
  leaders: Leader[];
  submittedLeaders: string[];
  activeInvite: WAInvitation | null;
  resetForm: () => void;
  handleLeaderTabChange: (id: string) => void;
  setCurrentStep: (step: number) => void;
  setSubmittedLeaders: React.Dispatch<React.SetStateAction<string[]>>;
}

export default function EvaluationSuccess({
  leaderId,
  lastSubmittedName,
  leaders,
  submittedLeaders,
  activeInvite,
  resetForm,
  handleLeaderTabChange,
  setCurrentStep,
  setSubmittedLeaders
}: EvaluationSuccessProps) {
  const ratedCount = leaders.filter(l => submittedLeaders.includes(l.id)).length;
  const totalCount = leaders.length;
  const nextUnsubmitted = leaders.find(l => !submittedLeaders.includes(l.id));

  return (
    <motion.div
      key={`step-success-${leaderId}`}
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      className="text-center py-6"
    >
      <div className="flex justify-center mb-5">
        <div className="bg-emerald-50 p-4.5 rounded-full border border-emerald-100 shadow-3xs">
          <CheckCircle2 className="h-12 w-12 text-emerald-600 animate-pulse" />
        </div>
      </div>
      
      <h2 id="success-header" className="text-xl font-extrabold text-slate-900 tracking-tight">
        Evaluasi {lastSubmittedName} Terkirim!
      </h2>
      
      <p className="mt-3 text-slate-600 max-w-md mx-auto text-xs sm:text-sm leading-relaxed px-4">
        Terima kasih banyak! Penilaian kuesioner Anda untuk posisi <strong className="text-slate-900">{lastSubmittedName}</strong> telah berhasil disimpan secara anonim demi kemajuan Yayasan Perguruan Tinggi - GKP.
      </p>

      {/* Progression Router Box */}
      <div className="mt-8 p-6 bg-slate-50 border border-slate-200 rounded-2xl max-w-lg mx-auto shadow-3xs text-center font-sans">
        {ratedCount === totalCount ? (
          <div className="space-y-4">
            <p className="text-sm font-black text-emerald-700">🎉 Semua Pimpinan ({ratedCount}/{totalCount}) Telah Selesai Anda Evaluasi!</p>
            <p className="text-xs text-slate-500 leading-relaxed px-2">
              Aspirasi kritis serta kontribusi tulus Anda sangat berharga bagi peningkatan tata kelola instansi secara fungsional di Yayasan Perguruan Tinggi - GKP.
            </p>
            {activeInvite && (
              <div className="p-3 bg-emerald-50 text-emerald-800 rounded-xl border border-emerald-200 text-xs font-bold leading-relaxed">
                Tautan terkirim Anda kini berhasil di-update menjadi Selesai. Pengisian form telah selesai dan tidak dapat dilakukan kembali.
              </div>
            )}
            <div className="pt-2">
              <button
                type="button"
                onClick={resetForm}
                className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold text-xs transition cursor-pointer shadow-md shadow-blue-500/10"
              >
                Buka Baru (Kosongkan Sesi)
              </button>
            </div>
          </div>
        ) : (
          <div>
            <p className="text-xs font-extrabold text-blue-700 uppercase tracking-widest">Selesai {ratedCount} dari {totalCount} Pimpinan</p>
            <p className="text-xs text-slate-600 mt-1 pb-4 leading-relaxed">
              Untuk menyelesaikan kuesioner penjaminan mutu, Anda sangat diharapkan mengevaluasi pimpinan lainnya di bawah ini:
            </p>
            
            <div className="flex flex-col sm:flex-row justify-center gap-3 pt-2">
              {nextUnsubmitted && (
                <button
                  type="button"
                  onClick={() => handleLeaderTabChange(nextUnsubmitted.id)}
                  className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold text-xs transition cursor-pointer shadow-md shadow-blue-500/10 inline-flex items-center justify-center gap-1.5"
                >
                  <span>Lanjut Evaluasi: {nextUnsubmitted.position}</span>
                  <ChevronRight className="h-4 w-4" />
                </button>
              )}
              <button
                type="button"
                onClick={() => {
                  setSubmittedLeaders(p => p.filter(id => id !== leaderId));
                  setCurrentStep(1);
                }}
                className="px-5 py-2.5 bg-white border border-slate-200 text-slate-600 hover:bg-slate-55 rounded-xl font-bold text-xs transition cursor-pointer shadow-xs"
              >
                Ubah Nilai {lastSubmittedName}
              </button>
            </div>
          </div>
        )}
      </div>
    </motion.div>
  );
}