import { Fragment } from 'react';
import { motion } from 'motion/react';
import Swal from 'sweetalert2';
import { Search, Trash2, User } from 'lucide-react';
import { Leader, EvaluationResponse, WAInvitation } from '../../types';
import { getInterpretation } from '../../data/questionnaire';

interface EvaluationResultsProps {
  searchUnit: string;
  setSearchUnit: (val: string) => void;
  filterLeaderId: string;
  setFilterLeaderId: (val: string) => void;
  filterStatus: string;
  setFilterStatus: (val: string) => void;
  leaders: Leader[];
  invitations: WAInvitation[];
  filteredResponses: EvaluationResponse[];
  setSelectedResponseId: (val: string | null) => void;
  onDeleteResponse: (id: string) => void;
  triggerBanner: (msg: string) => void;
}

export default function EvaluationResults({
  searchUnit,
  setSearchUnit,
  filterLeaderId,
  setFilterLeaderId,
  filterStatus,
  setFilterStatus,
  leaders,
  invitations,
  filteredResponses,
  setSelectedResponseId,
  onDeleteResponse,
  triggerBanner
}: EvaluationResultsProps) {

  // Group responses by respondentId (or fallback to legacy ID if respondentId is missing)
  const grouped: Record<string, EvaluationResponse[]> = {};
  filteredResponses.forEach(res => {
    const key = res.respondentId || `LEGACY-${res.id}`;
    if (!grouped[key]) {
      grouped[key] = [];
    }
    grouped[key].push(res);
  });

  return (
    <motion.div
      key="tab-results"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      className="space-y-6"
    >
      {/* Filter Drawer Card */}
      <div className="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm flex flex-col md:flex-row gap-4">
        
        {/* Filter 1: Search unit */}
        <div className="flex-1">
          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-widest mb-1.5">Pencarian Unit</label>
          <div className="relative">
            <span className="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400 pointer-events-none">
              <Search className="h-4 w-4" />
            </span>
            <input
              type="text"
              value={searchUnit}
              onChange={(e) => setSearchUnit(e.target.value)}
              placeholder="Cari Unit / Prodi..."
              className="w-full text-xs pl-9 pr-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
        </div>

        {/* Filter 2: Select target leader */}
        <div className="w-full md:w-64">
          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-widest mb-1.5">Filter Pimpinan</label>
          <select
            value={filterLeaderId}
            onChange={(e) => setFilterLeaderId(e.target.value)}
            className="w-full text-xs px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
          >
            <option value="">Semua Pimpinan ({leaders.length})</option>
            {leaders.map(l => (
              <option key={l.id} value={l.id}>
                {l.name === l.position ? l.position : `${l.position} — ${l.name}`}
              </option>
            ))}
          </select>
        </div>

        {/* Filter 3: Respondent Status */}
        <div className="w-full md:w-52">
          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-widest mb-1.5">Filter Status</label>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="w-full text-xs px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
          >
            <option value="">Semua Status</option>
            <option value="Dosen">Dosen</option>
            <option value="Tenaga Kependidikan">Tendik</option>
          </select>
        </div>

      </div>

      {/* Results interactive list and Table */}
      <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm overflow-hidden">
        {filteredResponses.length === 0 ? (
          <div className="p-12 text-center text-slate-400 dark:text-slate-500 text-sm">
            Tidak ditemukan data penilaian yang cocok dengan kriteria filter aktif.
          </div>
        ) : (
          <div className="space-y-4">
            {/* Tampilan Desktop (Tabel) */}
            <div className="hidden md:block overflow-x-auto">
              <table className="w-full border-collapse text-left">
                <thead>
                  <tr className="bg-slate-50/50 dark:bg-slate-900/40 border-b border-slate-100 dark:border-slate-700/80 text-[11px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">
                    <th className="py-3.5 px-6">ID / Tanggal</th>
                    <th className="py-3.5 px-6">Pimpinan Dievaluasi</th>
                    <th className="py-3.5 px-6 text-center">Rata-rata</th>
                    <th className="py-3.5 px-6 text-center">Predikat</th>
                    <th className="py-3.5 px-6 text-right">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 dark:divide-slate-700/50 text-xs">
                  {Object.entries(grouped).map(([respId, resList]) => {
                    const first = resList[0];
                    
                    // Look up name in invitations
                    let respondentName = 'Responden Umum / Publik (Anonim)';
                    let isPersonalInvite = false;
                    
                    const matchedInvite = invitations.find(i => i.id === respId);
                    if (matchedInvite) {
                      respondentName = matchedInvite.name;
                      isPersonalInvite = true;
                    } else if (respId.startsWith('INV-')) {
                      respondentName = `Responden Personal (${respId})`;
                      isPersonalInvite = true;
                    } else if (respId.startsWith('PUB-')) {
                      respondentName = 'Responden Publik (Anonim)';
                    } else if (respId.startsWith('LEGACY-')) {
                      respondentName = 'Responden Umum (Legacy)';
                    }
                    
                    return (
                      <Fragment key={respId}>
                        {/* Respondent Group Header Row */}
                        <tr className="bg-blue-50/25 dark:bg-blue-950/20 border-t border-b border-blue-100/40 dark:border-blue-900/40 text-slate-800 dark:text-slate-200">
                          <td colSpan={5} className="py-3.5 px-6 font-bold text-xs">
                            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                              <div className="flex flex-wrap items-center gap-2">
                                <span className={`text-[9px] font-extrabold uppercase px-2 py-0.5 rounded shadow-3xs flex items-center gap-1 ${
                                  isPersonalInvite 
                                    ? 'bg-blue-600 text-white' 
                                    : 'bg-slate-200 dark:bg-slate-750 text-slate-650 dark:text-slate-350'
                                }`}>
                                  <User className="h-3 w-3" />
                                  {isPersonalInvite ? 'Undangan WA' : 'Publik'}
                                </span>
                                <span className="font-extrabold text-slate-900 dark:text-white text-xs sm:text-sm">
                                  {respondentName}
                                </span>
                                <span className="text-slate-350 dark:text-slate-600">|</span>
                                <span className="text-slate-700 dark:text-slate-300 font-bold">{first.unit}</span>
                                <span className="text-slate-350 dark:text-slate-600">|</span>
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">{first.status}</span>
                              </div>
                              <span className="text-[10px] text-slate-400 font-semibold bg-slate-100 dark:bg-slate-850 px-2 py-0.5 rounded-full border border-slate-200/40 dark:border-slate-700/40 shrink-0">
                                Menilai {resList.length} Pimpinan
                              </span>
                            </div>
                          </td>
                        </tr>
                        {/* Respondent Individual evaluations */}
                        {resList.map((res) => {
                          const targetLeader = leaders.find(l => l.id === res.leaderId) || { name: 'Pimpinan Terhapus', position: '-', department: '-' };
                          const inter = getInterpretation(res.averageScore);
                          
                          return (
                            <tr 
                              key={res.id} 
                              className="hover:bg-slate-50/40 dark:hover:bg-slate-700/20 transition-colors"
                            >
                              <td className="py-3.5 px-6 pl-12">
                                <span className="font-bold text-slate-600 dark:text-slate-400 block font-mono text-[10px]">{res.id}</span>
                                <span className="text-[9px] text-slate-400 block mt-0.5">
                                  {new Date(res.timestamp).toLocaleDateString('id-ID')}
                                </span>
                              </td>
                              <td className="py-3.5 px-6">
                                <span className="font-bold text-slate-800 dark:text-white block truncate max-w-[220px]" title={targetLeader.name === targetLeader.position ? targetLeader.position : targetLeader.name}>
                                  {targetLeader.name === targetLeader.position ? targetLeader.position : targetLeader.name}
                                </span>
                                <span className="text-[10px] text-slate-400 block mt-0.5 font-medium">
                                  {targetLeader.name === targetLeader.position ? targetLeader.department : `${targetLeader.position} — ${targetLeader.department}`}
                                </span>
                              </td>
                              <td className="py-3.5 px-6 text-center font-bold font-mono text-sm text-slate-800 dark:text-white">
                                {res.averageScore.toFixed(2)}
                              </td>
                              <td className="py-3.5 px-6 text-center">
                                <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase inline-block ${inter.bg} ${inter.color}`}>
                                  {inter.text}
                                </span>
                              </td>
                              <td className="py-3.5 px-6 text-right">
                                <div className="flex justify-end gap-1.5">
                                  <button
                                    onClick={() => setSelectedResponseId(res.id)}
                                    className="px-2.5 py-1 text-[10px] font-semibold text-blue-600 hover:text-blue-700 bg-blue-50 dark:text-blue-300 dark:bg-blue-950/40 rounded-lg hover:underline transition cursor-pointer"
                                  >
                                    Detail Hasil
                                  </button>
                                  
                                  <button
                                    onClick={() => {
                                      Swal.fire({
                                        title: 'Hapus Respon Evaluasi?',
                                        text: `Apakah Anda yakin ingin menghapus respon evaluasi ini? Tindakan ini tidak bisa dibatalkan.`,
                                        icon: 'warning',
                                        showCancelButton: true,
                                        confirmButtonColor: '#d33',
                                        cancelButtonColor: '#3085d6',
                                        confirmButtonText: 'Ya, Hapus!',
                                        cancelButtonText: 'Batal'
                                      }).then((result) => {
                                        if (result.isConfirmed) {
                                          onDeleteResponse(res.id);
                                          Swal.fire({
                                            icon: 'success',
                                            title: 'Terhapus!',
                                            text: 'Satu baris opini penilaian berhasil dihapus.',
                                            timer: 2000,
                                            showConfirmButton: false
                                          });
                                        }
                                      });
                                    }}
                                    className="p-1 text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 rounded-md hover:bg-rose-50 dark:hover:bg-rose-950/20 transition cursor-pointer"
                                    title="Hapus Respon"
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          );
                        })}
                      </Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* Tampilan Mobile (Daftar Kartu Grup Responden) */}
            <div className="block md:hidden space-y-4 p-2">
              {Object.entries(grouped).map(([respId, resList]) => {
                const first = resList[0];
                
                let respondentName = 'Responden Umum / Publik (Anonim)';
                let isPersonalInvite = false;
                
                const matchedInvite = invitations.find(i => i.id === respId);
                if (matchedInvite) {
                  respondentName = matchedInvite.name;
                  isPersonalInvite = true;
                } else if (respId.startsWith('INV-')) {
                  respondentName = `Responden Personal (${respId})`;
                  isPersonalInvite = true;
                } else if (respId.startsWith('PUB-')) {
                  respondentName = 'Responden Publik (Anonim)';
                } else if (respId.startsWith('LEGACY-')) {
                  respondentName = 'Responden Umum (Legacy)';
                }

                return (
                  <div 
                    key={respId} 
                    className="bg-slate-50 dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800 rounded-2xl p-4.5 space-y-3.5 shadow-xs"
                  >
                    {/* Header Grup Responden */}
                    <div className="border-b border-slate-200/60 dark:border-slate-800 pb-3">
                      <div className="flex flex-wrap items-center gap-2 mb-1.5">
                        <span className={`text-[8px] font-extrabold uppercase px-1.5 py-0.5 rounded shadow-3xs flex items-center gap-0.5 ${
                          isPersonalInvite 
                            ? 'bg-blue-600 text-white' 
                            : 'bg-slate-200 dark:bg-slate-750 text-slate-650 dark:text-slate-350'
                        }`}>
                          <User className="h-2.5 w-2.5" />
                          {isPersonalInvite ? 'Undangan WA' : 'Publik'}
                        </span>
                        <span className={`inline-block px-1.5 py-0.5 rounded-full text-[8px] font-bold uppercase tracking-wider ${
                          first.status === 'Dosen'
                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                            : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400'
                        }`}>
                          {first.status}
                        </span>
                      </div>
                      <h4 className="font-extrabold text-slate-800 dark:text-white text-xs leading-snug">{respondentName}</h4>
                      <p className="text-[10px] text-slate-550 dark:text-slate-400 mt-0.5 font-medium">{first.unit}</p>
                      <span className="text-[9px] text-slate-400 dark:text-slate-500 block mt-2 font-bold uppercase tracking-wider">
                        Hasil Evaluasi ({resList.length} Pimpinan):
                      </span>
                    </div>

                    {/* Daftar Hasil Penilaian Pimpinan */}
                    <div className="space-y-3">
                      {resList.map((res) => {
                        const targetLeader = leaders.find(l => l.id === res.leaderId) || { name: 'Pimpinan Terhapus', position: '-', department: '-' };
                        const inter = getInterpretation(res.averageScore);

                        return (
                          <div 
                            key={res.id} 
                            className="bg-white dark:bg-slate-850 p-3 rounded-xl border border-slate-150/70 dark:border-slate-750 shadow-3xs flex items-center justify-between gap-3"
                          >
                            <div className="min-w-0 flex-1">
                              <h5 className="font-extrabold text-xs text-slate-800 dark:text-white truncate">
                                {targetLeader.name === targetLeader.position ? targetLeader.position : targetLeader.name}
                              </h5>
                              <p className="text-[9px] text-slate-400 dark:text-slate-500 truncate mt-0.5">
                                {targetLeader.name === targetLeader.position ? targetLeader.department : `${targetLeader.position} — ${targetLeader.department}`}
                              </p>
                              <span className="text-[8px] text-slate-400 dark:text-slate-500 block font-mono mt-1.5">
                                ID: {res.id} | {new Date(res.timestamp).toLocaleDateString('id-ID')}
                              </span>
                            </div>

                            <div className="flex items-center gap-2 shrink-0">
                              <div className="text-center">
                                <span className="text-xs font-black text-slate-800 dark:text-white font-mono block">
                                  {res.averageScore.toFixed(2)}
                                </span>
                                <span className={`px-1.5 py-0.5 rounded text-[8px] font-black uppercase block mt-1 tracking-wider ${inter.bg} ${inter.color}`}>
                                  {inter.text}
                                </span>
                              </div>

                              <div className="flex flex-col gap-1 border-l border-slate-100 dark:border-slate-700 pl-2">
                                <button
                                  onClick={() => setSelectedResponseId(res.id)}
                                  className="px-2 py-1 text-[9px] font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/40 rounded-lg text-center cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/40"
                                  title="Detail Hasil"
                                >
                                  Detail
                                </button>
                                <button
                                  onClick={() => {
                                    Swal.fire({
                                      title: 'Hapus Respon?',
                                      text: `Apakah Anda yakin menghapus respon evaluasi dari '${respondentName}' untuk pimpinan ini?`,
                                      icon: 'warning',
                                      showCancelButton: true,
                                      confirmButtonColor: '#d33',
                                      cancelButtonColor: '#3085d6',
                                      confirmButtonText: 'Ya, Hapus!',
                                      cancelButtonText: 'Batal'
                                    }).then((result) => {
                                      if (result.isConfirmed) {
                                        onDeleteResponse(res.id);
                                        Swal.fire({
                                          icon: 'success',
                                          title: 'Terhapus!',
                                          text: 'Respon evaluasi telah dihapus.',
                                          timer: 2000,
                                          showConfirmButton: false
                                        });
                                      }
                                    });
                                  }}
                                  className="p-1 text-slate-450 hover:text-rose-500 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-950/20 text-center flex items-center justify-center cursor-pointer"
                                  title="Hapus"
                                >
                                  <Trash2 className="h-3.5 w-3.5" />
                                </button>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </motion.div>
  );
}