"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2, Upload, Download } from "lucide-react";
import { toast } from "sonner";
import * as XLSX from "xlsx";

export function SklData() {
  const [file, setFile] = useState<File | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadResult, setUploadResult] = useState<any>(null);

  const handleDownloadTemplate = async () => {
    try {
      toast.info("Sedang menyiapkan template...");

      // Fetch Students
      const studentsRes = await fetch("/api/skl/students");
      const studentsResult = await studentsRes.json();

      // Fetch Mapels
      const mapelRes = await fetch("/api/mapel"); // Assuming GET /api/mapel returns { success: true, data: [...] }
      const mapelResult = await mapelRes.json();

      const mapels = mapelResult.success ? mapelResult.data : [];
      if (mapels.length === 0) {
        toast.warning("Data mata pelajaran kosong. Template akan menggunakan kolom default.");
      }

      let data = [];

      if (studentsResult.success && studentsResult.data.length > 0) {
        data = studentsResult.data.map((s: any) => {
          const row: any = {
            NIS: s.nis,
            Nama: s.nama,
            Kelas: s.rombel,
            Status: "LULUS",
            RataRata: 0,
          };

          // Dynamic Mapel Columns
          mapels.forEach((m: any) => {
            row[`Rapor ${m.namaMapel}`] = 0;
            row[`Ujian ${m.namaMapel}`] = 0;
          });

          // Fallback if no mapels
          if (mapels.length === 0) {
            row["Rapor PAI"] = 0;
            row["Ujian PAI"] = 0;
          }

          return row;
        });
      } else {
        // Fallback if no students found
        const row: any = {
          NIS: "123456",
          Nama: "Contoh Siswa",
          Kelas: "XII RPL 1",
          Status: "LULUS",
          RataRata: 85.5,
        };

        if (mapels.length > 0) {
          mapels.forEach((m: any) => {
            row[`Rapor ${m.namaMapel}`] = 0;
            row[`Ujian ${m.namaMapel}`] = 0;
          });
        } else {
          row["Rapor PAI"] = 80;
          row["Ujian PAI"] = 85;
        }

        data = [row];
        toast.warning("Tidak ada data siswa kelas 12 ditemukan. Menggunakan data contoh.");
      }

      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Template");
      XLSX.writeFile(wb, "Template_Nilai_SKL.xlsx");
      toast.success("Template berhasil diunduh");
    } catch (error) {
      console.error(error);
      toast.error("Gagal mengunduh template");
    }
  };

  const handleUpload = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) return;

    try {
      setIsUploading(true);
      const formData = new FormData();
      formData.append("file", file);

      const res = await fetch("/api/skl/upload", {
        method: "POST",
        body: formData,
      });
      const result = await res.json();

      if (result.success) {
        toast.success(result.message);
        setUploadResult(result);
        setFile(null);
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      console.error(error);
      toast.error("Upload gagal");
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="bg-muted/50 rounded-lg border p-4 text-sm">
        <p className="mb-2 font-semibold">Petunjuk Upload:</p>
        <ul className="list-disc space-y-1 pl-5">
          <li>Gunakan file Excel (.xlsx).</li>
          <li>
            Pastikan ada kolom: <b>NIS</b>, <b>Nama</b> (Optional), <b>RataRata</b>, <b>Status</b> (LULUS/TIDAK LULUS).
          </li>
          <li>
            Untuk Nilai Rapor, gunakan header dengan prefix "Rapor " (contoh: <b>Rapor PAI</b>, <b>Rapor MTK</b>).
          </li>
          <li>
            Untuk Nilai Ujian, gunakan header dengan prefix "Ujian " (contoh: <b>Ujian PAI</b>).
          </li>
        </ul>
      </div>

      <div className="flex gap-2">
        <Button type="button" variant="outline" onClick={handleDownloadTemplate}>
          <Download className="mr-2 h-4 w-4" /> Download Template
        </Button>
      </div>

      <form onSubmit={handleUpload} className="space-y-4">
        <div className="grid w-full max-w-sm items-center gap-1.5">
          <Label htmlFor="excel">File Excel</Label>
          <Input id="excel" type="file" accept=".xlsx, .xls" onChange={(e) => setFile(e.target.files?.[0] || null)} />
        </div>
        <Button type="submit" disabled={!file || isUploading}>
          {isUploading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Upload className="mr-2 h-4 w-4" />}
          Upload Data
        </Button>
      </form>

      {uploadResult && (
        <div className="rounded-lg border border-green-200 bg-green-50 p-4 text-green-800">
          <p>{uploadResult.message}</p>
          {uploadResult.errors && uploadResult.errors.length > 0 && (
            <div className="mt-2 text-xs text-red-600">
              <p className="font-semibold">Errors:</p>
              <ul className="list-disc pl-5">
                {uploadResult.errors.map((err: string, i: number) => (
                  <li key={i}>{err}</li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </div>
  );
}