import { motion, AnimatePresence } from 'motion/react';
import { X, MessageSquare } from 'lucide-react';
import { Leader, EvaluationResponse, Aspect, Question } from '../../types';
import { getInterpretation, getQuestionRubric } from '../../data/questionnaire';

interface EvaluationDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  activeResponseDetail: EvaluationResponse | undefined;
  leaders: Leader[];
  aspects: Aspect[];
  questions: Question[];
}

export default function EvaluationDetailModal({
  isOpen,
  onClose,
  activeResponseDetail,
  leaders,
  aspects,
  questions
}: EvaluationDetailModalProps) {
  if (!isOpen || !activeResponseDetail) return null;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 bg-slate-900/70 dark:bg-slate-950/80 backdrop-blur-xs flex items-center justify-center p-4 z-50 overflow-y-auto">
        <motion.div
          initial={{ scale: 0.95, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.95, opacity: 0 }}
          className="bg-white dark:bg-slate-800 max-w-3xl w-full rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 overflow-hidden my-8"
        >
          {/* Modal Header */}
          <div className="p-6 bg-slate-100 border-b border-slate-200 text-slate-800 flex justify-between items-center">
            <div>
              <div className="flex items-center gap-2">
                <span className="text-[10px] font-bold bg-blue-600 text-white px-2 py-0.5 rounded tracking-widest uppercase">
                  DETAIL EVALUASI {activeResponseDetail.id}
                </span>
                <span className="text-slate-500 text-xs">
                  {new Date(activeResponseDetail.timestamp).toLocaleString('id-ID')}
                </span>
              </div>
              <h3 className="font-bold text-lg mt-1 text-slate-800">
                Evaluasi bagi {
                  (() => {
                    const l = leaders.find(l => l.id === activeResponseDetail.leaderId);
                    if (!l) return 'Pimpinan Terhapus';
                    return l.name === l.position ? `${l.position} (${l.department})` : `${l.name} (${l.position})`;
                  })()
                }
              </h3>
            </div>
            <button
              onClick={onClose}
              className="p-1.5 bg-slate-200 hover:bg-slate-300 text-slate-600 hover:text-slate-800 rounded-full transition cursor-pointer"
            >
              <X className="h-5 w-5" />
            </button>
          </div>

          {/* Modal Content */}
          <div className="p-6 max-h-[70vh] overflow-y-auto space-y-6">
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 bg-slate-50 dark:bg-slate-900/50 p-4 rounded-xl border border-slate-100 dark:border-slate-700">
              <div>
                <span className="text-[10px] text-slate-400 font-bold uppercase block tracking-wider">Status Responden:</span>
                <span className="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5 block">{activeResponseDetail.status}</span>
              </div>
              <div>
                <span className="text-[10px] text-slate-400 font-bold uppercase block tracking-wider">Unit Kerja / Prodi:</span>
                <span className="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5 block">{activeResponseDetail.unit}</span>
              </div>
              <div>
                <span className="text-[10px] text-slate-400 font-bold uppercase block tracking-wider">Nilai Rerata:</span>
                <span className="text-sm font-bold text-slate-800 dark:text-slate-100 mt-0.5 flex items-center gap-1.5 font-mono">
                  {activeResponseDetail.averageScore.toFixed(2)} / 5.00 
                  <span className={`text-[9px] px-1.5 py-0.5 font-bold uppercase rounded ${getInterpretation(activeResponseDetail.averageScore).bg} ${getInterpretation(activeResponseDetail.averageScore).color}`}>
                    {activeResponseDetail.category}
                  </span>
                </span>
              </div>
            </div>

            <div className="space-y-4">
              <h4 className="font-extrabold text-xs text-slate-400 tracking-wider uppercase mb-2">Pemberian Nilai Butir Kuesioner:</h4>
              {aspects.map(asp => {
                const aspQuestions = questions.filter(q => q.aspectId === asp.id);
                return (
                  <div key={asp.id} className="border border-slate-100 dark:border-slate-700 px-4 py-3 rounded-xl">
                    <strong className="text-xs text-slate-800 dark:text-slate-200 block mb-2">{asp.title}</strong>
                    <div className="space-y-2">
                      {aspQuestions.map(q => {
                        const givenScore = activeResponseDetail.scores[q.id] || 0;
                        return (
                          <div key={q.id} className="flex justify-between items-start text-xs border-b border-dashed border-slate-100 dark:border-slate-700 last:border-0 pb-1.5 last:pb-0 gap-4">
                            <span className="text-slate-600 dark:text-slate-300 flex gap-2">
                              <span className="font-bold text-[10px] text-slate-400">{q.id}.</span> 
                              <span>{q.text}</span>
                            </span>
                            <span className="font-bold shrink-0 font-mono flex flex-col items-end gap-0.5 max-w-[280px] text-right">
                              <div className="flex items-center gap-1.5 justify-end">
                                <span className="text-blue-600 dark:text-blue-400 font-black text-sm">{givenScore}</span>
                                <span className="text-[9px] text-slate-400 font-semibold uppercase">
                                  {givenScore === 5 && 'Sangat Setuju'}
                                  {givenScore === 4 && 'Setuju'}
                                  {givenScore === 3 && 'Cukup Setuju'}
                                  {givenScore === 2 && 'Tidak Setuju'}
                                  {givenScore === 1 && 'Sangat Tidak Setuju'}
                                </span>
                              </div>
                              <span className="text-[9.5px] text-slate-500 font-medium normal-case block leading-normal italic">
                                "{getQuestionRubric(q.id, givenScore)}"
                              </span>
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="space-y-4 pt-2">
              <h4 className="font-extrabold text-xs text-slate-400 tracking-wider uppercase">Tanggapan Kualitatif Terbuka (Aspirasi):</h4>
              
              <div className="bg-emerald-50/50 dark:bg-emerald-950/10 p-4 border border-emerald-100/60 dark:border-emerald-900/40 rounded-xl">
                <span className="text-[10px] text-emerald-800 dark:text-emerald-400 font-bold block uppercase tracking-wide flex items-center gap-1">
                  <MessageSquare className="h-3 w-3" />
                  <span>Kekuatan Utama Pimpinan:</span>
                </span>
                <p className="text-xs text-slate-800 dark:text-slate-200 italic mt-1.5 leading-relaxed">
                  {activeResponseDetail.openStrengths ? `"${activeResponseDetail.openStrengths}"` : '— Responden tidak meninggalkan tulisan.'}
                </p>
              </div>

              <div className="bg-orange-50/50 dark:bg-orange-950/10 p-4 border border-orange-100/60 dark:border-orange-900/40 rounded-xl">
                <span className="text-[10px] text-orange-800 dark:text-orange-400 font-bold block uppercase tracking-wide flex items-center gap-1">
                  <MessageSquare className="h-3 w-3" />
                  <span>Kekurangan / Hal Perlu Diperbaiki:</span>
                </span>
                <p className="text-xs text-slate-800 dark:text-slate-200 italic mt-1.5 leading-relaxed">
                  {activeResponseDetail.openImprovements ? `"${activeResponseDetail.openImprovements}"` : '— Responden tidak meninggalkan tulisan.'}
                </p>
              </div>

              <div className="bg-blue-50/50 dark:bg-blue-950/10 p-4 border border-blue-100/60 dark:border-slate-700 rounded-xl">
                <span className="text-[10px] text-blue-800 dark:text-blue-400 font-bold block uppercase tracking-wide flex items-center gap-1">
                  <MessageSquare className="h-3 w-3" />
                  <span>Saran untuk Pengembangan Institusi:</span>
                </span>
                <p className="text-xs text-slate-800 dark:text-slate-200 italic mt-1.5 leading-relaxed">
                  {activeResponseDetail.openSuggestions ? `"${activeResponseDetail.openSuggestions}"` : '— Responden tidak meninggalkan tulisan.'}
                </p>
              </div>
            </div>
          </div>

          {/* Modal Footer */}
          <div className="p-4 bg-slate-50 dark:bg-slate-900 border-t border-slate-100 dark:border-slate-700/60 text-right">
            <button
              onClick={onClose}
              className="px-5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-800 dark:hover:bg-slate-700 rounded-xl font-bold text-xs cursor-pointer transition shadow-md"
            >
              Tutup Rincian
            </button>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
}