"use client";

import * as React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { StatCard } from "@/components/dashboard/StatCard";
import {
  FileSpreadsheet,
  Download,
  Printer,
  Users,
  Award,
  CheckCircle,
  BarChart3,
  BookOpen,
} from "lucide-react";

export function AdminReportsClient() {
  const [data, setData] = React.useState<any>(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch("/api/reports")
      .then((res) => res.json())
      .then((res) => {
        if (res.success) {
          setData(res.data);
        }
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <div className="p-12 text-center text-slate-400 text-xs">Memuat laporan akademik...</div>;
  }

  if (!data) {
    return <div className="p-12 text-center text-slate-500">Gagal memuat data laporan.</div>;
  }

  const { counts, schoolAverageGrade, attendanceRate, gradeDistribution, subjectPerformance, classes } = data;

  return (
    <div className="space-y-6">
      {/* Export Bar */}
      <Card className="bg-gradient-to-r from-blue-900 to-indigo-950 text-white border-none shadow-md">
        <CardContent className="p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div>
            <h3 className="text-base font-bold flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5 text-blue-400" />
              Pusat Pengunduhan Data & Rekapitulasi (CSV/Excel)
            </h3>
            <p className="text-xs text-blue-200 mt-1">
              Unduh rekaman data sekolah secara langsung untuk arsip Dapodik atau pelaporan Dinas Pendidikan.
            </p>
          </div>

          <div className="flex items-center gap-2">
            <a href="/api/reports?format=csv&type=students" download>
              <Button size="sm" variant="secondary" className="text-xs bg-white text-slate-900 hover:bg-slate-100">
                <Download className="h-3.5 w-3.5 mr-1.5" />
                Ekspor Data Siswa
              </Button>
            </a>
            <a href="/api/reports?format=csv&type=grades" download>
              <Button size="sm" className="text-xs bg-blue-600 hover:bg-blue-700 text-white">
                <Download className="h-3.5 w-3.5 mr-1.5" />
                Ekspor Nilai Seluruh Rombel
              </Button>
            </a>
          </div>
        </CardContent>
      </Card>

      {/* METRICS */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Rata-rata Nilai Sekolah"
          value={schoolAverageGrade}
          subtitle="Indeks prestasi gabungan"
          iconName="award"
          colorScheme="blue"
        />
        <StatCard
          title="Tingkat Kehadiran"
          value={attendanceRate}
          subtitle="Persentase presensi semester"
          iconName="check"
          colorScheme="emerald"
        />
        <StatCard
          title="Total Siswa Aktif"
          value={counts.students}
          subtitle={`Tersebar di ${counts.classes} rombel`}
          iconName="users"
          colorScheme="purple"
        />
        <StatCard
          title="Mata Pelajaran Aktif"
          value={counts.subjects}
          subtitle={`Diampu ${counts.teachers} guru`}
          iconName="subject"
          colorScheme="amber"
        />
      </div>

      {/* Grade Distribution & Class list */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Distribution Card */}
        <Card className="lg:col-span-1">
          <CardHeader className="pb-3">
            <CardTitle>Distribusi Predikat Nilai Siswa</CardTitle>
            <p className="text-xs text-slate-500 mt-1">
              Sebaran pencapaian huruf mutu akademik
            </p>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div>
                <div className="flex justify-between text-xs font-semibold mb-1">
                  <span className="text-blue-700">Predikat A (Sangat Baik: 85 - 100)</span>
                  <span className="font-bold">{gradeDistribution.A || 0} siswa</span>
                </div>
                <div className="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
                  <div
                    className="bg-blue-600 h-2.5 rounded-full"
                    style={{
                      width: `${((gradeDistribution.A || 0) / (counts.students || 1)) * 100}%`,
                    }}
                  />
                </div>
              </div>

              <div>
                <div className="flex justify-between text-xs font-semibold mb-1">
                  <span className="text-emerald-700">Predikat B (Baik: 75 - 84)</span>
                  <span className="font-bold">{gradeDistribution.B || 0} siswa</span>
                </div>
                <div className="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
                  <div
                    className="bg-emerald-500 h-2.5 rounded-full"
                    style={{
                      width: `${((gradeDistribution.B || 0) / (counts.students || 1)) * 100}%`,
                    }}
                  />
                </div>
              </div>

              <div>
                <div className="flex justify-between text-xs font-semibold mb-1">
                  <span className="text-amber-700">Predikat C (Cukup: 65 - 74)</span>
                  <span className="font-bold">{gradeDistribution.C || 0} siswa</span>
                </div>
                <div className="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
                  <div
                    className="bg-amber-500 h-2.5 rounded-full"
                    style={{
                      width: `${((gradeDistribution.C || 0) / (counts.students || 1)) * 100}%`,
                    }}
                  />
                </div>
              </div>

              <div>
                <div className="flex justify-between text-xs font-semibold mb-1">
                  <span className="text-rose-700">Predikat D (Perlu Remedial: &lt; 65)</span>
                  <span className="font-bold">{gradeDistribution.D || 0} siswa</span>
                </div>
                <div className="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
                  <div
                    className="bg-rose-500 h-2.5 rounded-full"
                    style={{
                      width: `${((gradeDistribution.D || 0) / (counts.students || 1)) * 100}%`,
                    }}
                  />
                </div>
              </div>
            </div>

            <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 text-xs text-slate-600">
              <span className="font-semibold text-slate-800">Keterangan:</span> Nilai kelulusan
              minimal KKTP SMAN 3 OKU adalah <strong>75 (Predikat B)</strong>.
            </div>
          </CardContent>
        </Card>

        {/* Classes Table */}
        <Card className="lg:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between pb-3">
            <div>
              <CardTitle>Ringkasan Rombongan Belajar (Kelas)</CardTitle>
              <p className="text-xs text-slate-500 mt-1">
                Data wali kelas dan jumlah siswa terdaftar per kelas
              </p>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full text-xs text-left">
                <thead className="bg-slate-50 text-slate-700 font-semibold border-y border-slate-200">
                  <tr>
                    <th className="py-2.5 px-4">Nama Rombel</th>
                    <th className="py-2.5 px-4">Tingkat</th>
                    <th className="py-2.5 px-4">Wali Kelas</th>
                    <th className="py-2.5 px-4 text-center">Jumlah Siswa</th>
                    <th className="py-2.5 px-4 text-center">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {classes.map((cls: any) => (
                    <tr key={cls.id} className="hover:bg-slate-50 transition-colors">
                      <td className="py-3 px-4 font-bold text-slate-900">{cls.name}</td>
                      <td className="py-3 px-4">
                        <Badge variant="secondary" className="text-[10px]">
                          Kelas {cls.gradeLevel}
                        </Badge>
                      </td>
                      <td className="py-3 px-4 text-slate-700">{cls.homeroomTeacher}</td>
                      <td className="py-3 px-4 text-center font-bold text-blue-700">
                        {cls.studentCount} Siswa
                      </td>
                      <td className="py-3 px-4 text-center">
                        <Badge variant="success" className="text-[10px]">
                          Aktif
                        </Badge>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Subject Performance Table */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle>Evaluasi Ketercapaian Mutu per Mata Pelajaran</CardTitle>
          <p className="text-xs text-slate-500 mt-1">
            Rata-rata perolehan nilai siswa dan tingkat ketuntasan per pengampu
          </p>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-xs text-left">
              <thead className="bg-slate-50 text-slate-700 font-semibold border-y border-slate-200">
                <tr>
                  <th className="py-3 px-4">Kode</th>
                  <th className="py-3 px-4">Mata Pelajaran</th>
                  <th className="py-3 px-4">Kelas</th>
                  <th className="py-3 px-4">Guru Pengampu</th>
                  <th className="py-3 px-3 text-center">Rerata Nilai</th>
                  <th className="py-3 px-3 text-center">Tingkat Ketuntasan</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {subjectPerformance.map((sp: any) => (
                  <tr key={sp.id} className="hover:bg-slate-50 transition-colors">
                    <td className="py-3 px-4 font-mono font-bold text-slate-600">
                      {sp.subjectCode}
                    </td>
                    <td className="py-3 px-4 font-semibold text-slate-800">
                      {sp.subjectName}
                    </td>
                    <td className="py-3 px-4">
                      <Badge variant="secondary" className="text-[10px]">
                        {sp.className}
                      </Badge>
                    </td>
                    <td className="py-3 px-4 text-slate-700">{sp.teacherName}</td>
                    <td className="py-3 px-3 text-center font-bold text-blue-700 text-sm">
                      {sp.averageScore}
                    </td>
                    <td className="py-3 px-3 text-center">
                      <span className="font-semibold text-emerald-600">
                        {sp.passRate}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}