import { useState, useEffect, useMemo } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { type QuizResult } from '@/lib/db';

export default function AdminDashboardPage() {
  const [results, setResults] = useState<QuizResult[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [classFilter, setClassFilter] = useState('ALL');
  const [levelFilter, setLevelFilter] = useState('ALL');
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [downloadingId, setDownloadingId] = useState<string | null>(null);
  const router = useRouter();

  // Check authentication & Fetch results
  const fetchData = async () => {
    try {
      setIsLoading(true);
      // Check auth
      const authRes = await fetch('/api/admin/check-auth');
      const authData = await authRes.json();
      if (!authData.authenticated) {
        router.push('/admin/login');
        return;
      }

      // Fetch results
      const res = await fetch('/api/quiz-results');
      if (res.ok) {
        const data = await res.json();
        setResults(data.data || []);
      }
    } catch (err) {
      console.error('Error fetching data:', err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [router]);

  const handleLogout = async () => {
    try {
      const res = await fetch('/api/admin/logout', { method: 'POST' });
      if (res.ok) {
        router.push('/admin/login');
      }
    } catch (err) {
      console.error('Failed to logout:', err);
    }
  };

  const handleDelete = async (id: string, name: string) => {
    if (!confirm(`Apakah Anda yakin ingin menghapus data kuis atas nama "${name}"? Tindakan ini tidak bisa dibatalkan.`)) {
      return;
    }

    setDeletingId(id);
    try {
      const res = await fetch(`/api/quiz-results?id=${id}`, {
        method: 'DELETE',
      });
      if (res.ok) {
        setResults(prev => prev.filter(item => item.id !== id));
      } else {
        const data = await res.json();
        alert(data.message || 'Gagal menghapus data.');
      }
    } catch (err) {
      alert('Terjadi kesalahan jaringan.');
    } finally {
      setDeletingId(null);
    }
  };

  const downloadStudentPDF = async (student: QuizResult) => {
    setDownloadingId(student.id);
    try {
      const { jsPDF } = await import('jspdf');

      const pdf = new jsPDF('p', 'mm', 'a4');

      // Header
      pdf.setFontSize(22);
      pdf.setTextColor(15, 23, 42); // Slate 900
      pdf.text('NOGAMEADDICTION', 105, 20, { align: 'center' });

      pdf.setFontSize(10);
      pdf.setTextColor(100, 116, 139); // Slate 500
      pdf.text('LAPORAN HASIL ANALISIS SELF-CONTROL SISWA', 105, 26, { align: 'center' });

      // Line separator
      pdf.setDrawColor(203, 213, 225); // Slate 200
      pdf.line(20, 32, 190, 32);

      // Student Bio
      pdf.setFontSize(12);
      pdf.setTextColor(15, 23, 42);
      pdf.setFont('helvetica', 'bold');
      pdf.text('Informasi Siswa:', 20, 45);

      pdf.setFont('helvetica', 'normal');
      pdf.text(`Nama Lengkap : ${student.studentName.toUpperCase()}`, 20, 52);
      pdf.text(`Kelas                : ${student.studentClass.toUpperCase()}`, 20, 58);
      pdf.text(`Tanggal Periksa : ${new Date(student.createdAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}`, 20, 64);

      // Table Header logic
      const tableTop = 80;
      pdf.setFillColor(241, 245, 249); // Slate 100
      pdf.rect(20, tableTop, 170, 10, 'F');

      pdf.setFont('helvetica', 'bold');
      pdf.text('ASPEK SELF-CONTROL', 25, tableTop + 7);
      pdf.text('SKOR', 160, tableTop + 7);

      // Table Content
      pdf.setFont('helvetica', 'normal');
      const rowHeight = 10;

      pdf.text('1. Behavioral Control (Kontrol Perilaku)', 25, tableTop + rowHeight + 7);
      pdf.text(`${student.behavioralScore} / 15`, 160, tableTop + rowHeight + 7);
      pdf.line(20, tableTop + rowHeight + 10, 190, tableTop + rowHeight + 10);

      pdf.text('2. Cognitive Control (Kontrol Pikiran)', 25, tableTop + (rowHeight * 2) + 7);
      pdf.text(`${student.cognitiveScore} / 15`, 160, tableTop + (rowHeight * 2) + 7);
      pdf.line(20, tableTop + (rowHeight * 2) + 10, 190, tableTop + (rowHeight * 2) + 10);

      pdf.text('3. Decisional Control (Kontrol Keputusan)', 25, tableTop + (rowHeight * 3) + 7);
      pdf.text(`${student.decisionalScore} / 15`, 160, tableTop + (rowHeight * 3) + 7);
      pdf.line(20, tableTop + (rowHeight * 3) + 10, 190, tableTop + (rowHeight * 3) + 10);

      // Total Score Row
      pdf.setFillColor(248, 250, 252);
      pdf.rect(20, tableTop + (rowHeight * 4), 170, 12, 'F');
      pdf.setFont('helvetica', 'bold');
      pdf.text('TOTAL SKOR KUMULATIF', 25, tableTop + (rowHeight * 4) + 8);
      pdf.text(`${student.totalScore} / 45`, 160, tableTop + (rowHeight * 4) + 8);

      // Interpretation
      pdf.setFontSize(14);
      pdf.text('INTERPRETASI HASIL:', 20, 140);
      pdf.setFontSize(16);
      if (student.totalScore >= 36) {
        pdf.setTextColor(34, 197, 94); // Green
      } else if (student.totalScore >= 26) {
        pdf.setTextColor(234, 179, 8); // Yellow
      } else {
        pdf.setTextColor(239, 68, 68); // Red
      }
      pdf.text(student.level.toUpperCase(), 20, 150);

      pdf.setFontSize(11);
      pdf.setTextColor(71, 85, 105); // Slate 600
      pdf.setFont('helvetica', 'normal');
      const splitDesc = pdf.splitTextToSize(student.description, 170);
      pdf.text(splitDesc, 20, 160);

      // Footer / Recommendation
      pdf.setFont('helvetica', 'bold');
      pdf.setTextColor(15, 23, 42);
      pdf.text('Saran:', 20, 185);
      pdf.setFont('helvetica', 'normal');
      pdf.text('Game bisa ditunda, tapi masa depan tidak bisa diulang.', 20, 192);

      // Official stamp-like area
      pdf.setDrawColor(226, 232, 240);
      pdf.rect(140, 220, 40, 40);
      pdf.setFontSize(8);
      pdf.text('Dokumen Sah', 160, 255, { align: 'center' });
      pdf.text('NOGAMEADDICTION', 160, 258, { align: 'center' });

      pdf.save(`Laporan_SelfControl_${student.studentName.replace(/\s+/g, '_')}.pdf`);
    } catch (err) {
      console.error(err);
      alert('Gagal mendownload PDF.');
    } finally {
      setDownloadingId(null);
    }
  };

  // Get unique classes for filter dropdown
  const uniqueClasses = useMemo(() => {
    const classes = results.map(item => item.studentClass.toUpperCase().trim());
    return ['ALL', ...Array.from(new Set(classes)).sort()];
  }, [results]);

  // Statistics calculation
  const stats = useMemo(() => {
    const total = results.length;
    if (total === 0) {
      return { total: 0, avgScore: 0, highCount: 0, medCount: 0, lowCount: 0 };
    }

    const sum = results.reduce((acc, curr) => acc + curr.totalScore, 0);
    const avgScore = Math.round((sum / total) * 10) / 10;

    let highCount = 0;
    let medCount = 0;
    let lowCount = 0;

    results.forEach(item => {
      if (item.totalScore >= 36) highCount++;
      else if (item.totalScore >= 26) medCount++;
      else lowCount++;
    });

    return { total, avgScore, highCount, medCount, lowCount };
  }, [results]);

  // Filtering data logic
  const filteredResults = useMemo(() => {
    return results.filter(item => {
      const matchesSearch = item.studentName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.studentClass.toLowerCase().includes(searchQuery.toLowerCase());

      const matchesClass = classFilter === 'ALL' || item.studentClass.toUpperCase().trim() === classFilter;

      let matchesLevel = true;
      if (levelFilter !== 'ALL') {
        if (levelFilter === 'HIGH') matchesLevel = item.totalScore >= 36;
        else if (levelFilter === 'MED') matchesLevel = item.totalScore >= 26 && item.totalScore < 36;
        else if (levelFilter === 'LOW') matchesLevel = item.totalScore < 26;
      }

      return matchesSearch && matchesClass && matchesLevel;
    });
  }, [results, searchQuery, classFilter, levelFilter]);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-slate-950 flex justify-center items-center text-white font-sans">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-400 font-bold uppercase tracking-widest text-sm">Memuat Data Dashboard...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white font-sans pb-16">
      <Head>
        <title>Dashboard Admin- DiaWeb</title>
      </Head>

      {/* TOP HEADER */}
      <header className="border-b border-white/5 bg-slate-900/40 backdrop-blur-md sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 py-5 flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-3">
            <span className="text-3xl">📊</span>
            <div>
              <h1 className="text-xl font-black tracking-tight text-white">DASHBOARD ADMIN</h1>
              <p className="text-[10px] text-indigo-400 font-bold uppercase tracking-wider">Rekapitulasi Kontrol Diri Siswa (DiaWeb)</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Link href="/" className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-xl text-xs font-bold transition-all">
              Beranda Web
            </Link>
            <button
              onClick={handleLogout}
              className="bg-red-950/40 border border-red-500/30 hover:bg-red-900/40 text-red-200 px-4 py-2 rounded-xl text-xs font-bold transition-all"
            >
              Keluar
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 mt-8">
        {/* STATS OVERVIEW CARDS */}
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
          <div className="bg-slate-900/60 border border-white/5 rounded-2xl p-5 shadow-lg">
            <p className="text-slate-400 text-xs font-bold uppercase tracking-wider">Total Siswa</p>
            <p className="text-3xl font-black mt-2 text-white">{stats.total}</p>
          </div>
          <div className="bg-slate-900/60 border border-white/5 rounded-2xl p-5 shadow-lg">
            <p className="text-slate-400 text-xs font-bold uppercase tracking-wider">Rata-rata Skor</p>
            <p className="text-3xl font-black mt-2 text-indigo-400">{stats.avgScore} <span className="text-xs text-slate-500 font-normal">/ 45</span></p>
          </div>
          <div className="bg-slate-900/60 border border-white/5 rounded-2xl p-5 shadow-lg">
            <p className="text-slate-400 text-xs font-bold uppercase tracking-wider text-green-400">Kontrol Tinggi</p>
            <p className="text-3xl font-black mt-2 text-green-400">{stats.highCount}</p>
          </div>
          <div className="bg-slate-900/60 border border-white/5 rounded-2xl p-5 shadow-lg">
            <p className="text-slate-400 text-xs font-bold uppercase tracking-wider text-yellow-400">Kontrol Sedang</p>
            <p className="text-3xl font-black mt-2 text-yellow-400">{stats.medCount}</p>
          </div>
          <div className="bg-slate-900/60 border border-white/5 rounded-2xl p-5 shadow-lg col-span-2 lg:col-span-1">
            <p className="text-slate-400 text-xs font-bold uppercase tracking-wider text-red-400">Kontrol Rendah</p>
            <p className="text-3xl font-black mt-2 text-red-400">{stats.lowCount}</p>
          </div>
        </div>

        {/* CONTROLS (SEARCH & FILTERS) */}
        <div className="bg-slate-900/40 border border-white/5 rounded-3xl p-6 mb-8 flex flex-col md:flex-row gap-4 justify-between items-center">
          <div className="flex-1 w-full relative">
            <input
              type="text"
              placeholder="Cari nama siswa atau kelas..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-slate-950/80 border border-slate-700/50 rounded-2xl px-5 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 text-white placeholder-slate-500 text-sm font-medium"
            />
          </div>
          <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
            {/* Class Filter */}
            <div className="flex-1 sm:flex-initial">
              <select
                value={classFilter}
                onChange={(e) => setClassFilter(e.target.value)}
                className="w-full bg-slate-950/80 border border-slate-700/50 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 font-semibold"
              >
                <option value="ALL">Semua Kelas</option>
                {uniqueClasses.filter(c => c !== 'ALL').map(cls => (
                  <option key={cls} value={cls}>Kelas {cls}</option>
                ))}
              </select>
            </div>
            {/* Level Filter */}
            <div className="flex-1 sm:flex-initial">
              <select
                value={levelFilter}
                onChange={(e) => setLevelFilter(e.target.value)}
                className="w-full bg-slate-950/80 border border-slate-700/50 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 font-semibold"
              >
                <option value="ALL">Semua Kategori</option>
                <option value="HIGH">Kontrol Tinggi (skor ≥ 36)</option>
                <option value="MED">Kontrol Sedang (skor 26–35)</option>
                <option value="LOW">Kontrol Rendah (skor &lt; 26)</option>
              </select>
            </div>
          </div>
        </div>

        {/* RESULTS TABLE */}
        <div className="bg-slate-900/40 border border-white/5 rounded-3xl overflow-hidden shadow-xl">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-white/10 bg-slate-900/80 text-[10px] uppercase tracking-wider font-black text-slate-400">
                  <th className="py-4 px-6 text-center w-12">No</th>
                  <th className="py-4 px-6">Nama Siswa</th>
                  <th className="py-4 px-6 w-28">Kelas</th>
                  <th className="py-4 px-6 w-36">Tanggal</th>
                  <th className="py-4 px-6 w-48 text-center">Skor Aspek (B | C | D)</th>
                  <th className="py-4 px-6 w-24 text-center">Total Skor</th>
                  <th className="py-4 px-6 w-48 text-center">Kategori Hasil</th>
                  <th className="py-4 px-6 text-center w-48">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5 text-sm">
                {filteredResults.length > 0 ? (
                  filteredResults.map((item, index) => {
                    const dateFormatted = new Date(item.createdAt).toLocaleDateString('id-ID', {
                      day: 'numeric',
                      month: 'short',
                      year: 'numeric'
                    });

                    let levelBadge = '';
                    if (item.totalScore >= 36) {
                      levelBadge = 'bg-green-500/10 border-green-500/20 text-green-400';
                    } else if (item.totalScore >= 26) {
                      levelBadge = 'bg-yellow-500/10 border-yellow-500/20 text-yellow-400';
                    } else {
                      levelBadge = 'bg-red-500/10 border-red-500/20 text-red-400';
                    }

                    return (
                      <motion.tr
                        key={item.id}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        className="hover:bg-slate-900/30 transition-colors"
                      >
                        <td className="py-4 px-6 text-center text-slate-500 font-bold font-mono">{index + 1}</td>
                        <td className="py-4 px-6 font-bold text-white uppercase">{item.studentName}</td>
                        <td className="py-4 px-6 uppercase font-semibold text-slate-300">{item.studentClass}</td>
                        <td className="py-4 px-6 text-slate-400 font-mono text-xs">{dateFormatted}</td>
                        <td className="py-4 px-6 text-center font-mono text-slate-300">
                          <span className="text-purple-400 font-bold">{item.behavioralScore}</span>
                          <span className="text-slate-600"> | </span>
                          <span className="text-blue-400 font-bold">{item.cognitiveScore}</span>
                          <span className="text-slate-600"> | </span>
                          <span className="text-pink-400 font-bold">{item.decisionalScore}</span>
                        </td>
                        <td className="py-4 px-6 text-center font-black text-white">{item.totalScore}</td>
                        <td className="py-4 px-6 text-center">
                          <span className={`inline-block border px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider ${levelBadge}`}>
                            {item.emoji} {item.level.replace(" (Ringan)", "")}
                          </span>
                        </td>
                        <td className="py-4 px-6">
                          <div className="flex gap-2 justify-center">
                            <button
                              onClick={() => downloadStudentPDF(item)}
                              disabled={downloadingId === item.id}
                              className="bg-white hover:bg-slate-100 text-slate-900 px-3 py-1.5 rounded-lg text-xs font-bold shadow-md transition-all active:scale-95 disabled:opacity-50"
                            >
                              {downloadingId === item.id ? 'Mengunduh...' : 'Unduh PDF'}
                            </button>
                            <button
                              onClick={() => handleDelete(item.id, item.studentName)}
                              disabled={deletingId === item.id}
                              className="bg-red-950/40 border border-red-500/30 hover:bg-red-900/40 text-red-200 px-3 py-1.5 rounded-lg text-xs font-bold transition-all active:scale-95 disabled:opacity-50"
                            >
                              {deletingId === item.id ? 'Menghapus...' : 'Hapus'}
                            </button>
                          </div>
                        </td>
                      </motion.tr>
                    );
                  })
                ) : (
                  <tr>
                    <td colSpan={8} className="py-12 text-center text-slate-500 font-semibold italic">
                      Tidak ada data siswa ditemukan
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* Legend block for scores explanation */}
        <div className="mt-6 bg-slate-900/30 border border-white/5 rounded-2xl p-5 text-xs text-slate-400 leading-relaxed max-w-2xl">
          <p className="font-bold text-slate-300 uppercase tracking-widest mb-2">Petunjuk Skor Aspek (B | C | D):</p>
          <ul className="list-disc list-inside space-y-1">
            <li><strong className="text-purple-400">B (Behavioral Control)</strong>: Skor kontrol perilaku siswa dalam mengelola aktivitas harian (skor maksimal 15).</li>
            <li><strong className="text-blue-400">C (Cognitive Control)</strong>: Skor kontrol pikiran siswa dalam menyadari dampak negatif game (skor maksimal 15).</li>
            <li><strong className="text-pink-400">D (Decisional Control)</strong>: Skor kontrol keputusan siswa dalam membatasi waktu bermain (skor maksimal 15).</li>
          </ul>
        </div>
      </main>
    </div>
  );
}