"use client";

import { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  User, 
  Loader2, 
  Calendar, 
  MapPin, 
  GraduationCap, 
  Trophy, 
  DollarSign,
  Mail,
  Phone,
  BookOpen,
  Award
} from "lucide-react";

// Interface definitions
interface MahasiswaData {
  nim: string;
  nama: string;
  jk: "Pria" | "Wanita";
  agama: string | null;
  kabupaten: string | null;
  provinsi: string | null;
  jenis_pendaftaran: string | null;
  tahun_angkatan: string;
  ipk: number | null;
  id_kelompok_keahlian: number | null;
  nama_kelompok_keahlian: string | null;
  status_kuliah: "Aktif" | "Cuti" | "Lulus" | "Non-Aktif";
  semester: number;
  created_at: string;
  updated_at: string;
}

interface BeasiswaData {
  id_beasiswa: number;
  nim: string;
  nama: string;
  nama_beasiswa: string;
  sumber_beasiswa: string;
  jenis_beasiswa: "Pemerintah" | "Non-Pemerintah";
  created_at: string;
}

interface PrestasiData {
  id_prestasi: number;
  nim: string;
  nama: string;
  jenis_prestasi: "Akademik" | "Non-Akademik";
  nama_prestasi: string;
  tingkat_prestasi: "Kabupaten" | "Provinsi" | "Nasional" | "Internasional";
  peringkat: string;
  tanggal_prestasi: string;
  keterangan: string | null;
  created_at: string;
}

interface BiodataMahasiswaDialogProps {
  nim: string;
  nama: string;
}

export default function BiodataMahasiswaDialog({ nim, nama }: BiodataMahasiswaDialogProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Data states
  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaData | null>(null);
  const [beasiswaData, setBeasiswaData] = useState<BeasiswaData[]>([]);
  const [prestasiData, setPrestasiData] = useState<PrestasiData[]>([]);

  // Fetch all data when dialog opens
  const fetchBiodataData = async () => {
    try {
      setLoading(true);
      setError(null);

      // Fetch mahasiswa data
      const mahasiswaResponse = await fetch(`/api/keloladata/data-mahasiswa`);
      if (!mahasiswaResponse.ok) {
        throw new Error("Failed to fetch mahasiswa data");
      }
      const mahasiswaResult = await mahasiswaResponse.json();
      
      // Find specific student data
      const studentData = Array.isArray(mahasiswaResult) 
        ? mahasiswaResult.find((m: MahasiswaData) => m.nim === nim)
        : null;
      
      setMahasiswaData(studentData);

      // Fetch beasiswa data
      try {
        const beasiswaResponse = await fetch(`/api/keloladata/data-beasiswa-mahasiswa`);
        if (beasiswaResponse.ok) {
          const beasiswaResult = await beasiswaResponse.json();
          const filteredBeasiswa = Array.isArray(beasiswaResult) 
            ? beasiswaResult.filter((b: BeasiswaData) => b.nim === nim)
            : [];
          setBeasiswaData(filteredBeasiswa);
        } else {
          setBeasiswaData([]);
        }
      } catch (err) {
        console.warn("Beasiswa data not available:", err);
        setBeasiswaData([]);
      }

      // Fetch prestasi data
      try {
        const prestasiResponse = await fetch(`/api/keloladata/data-prestasi-mahasiswa`);
        if (prestasiResponse.ok) {
          const prestasiResult = await prestasiResponse.json();
          const filteredPrestasi = Array.isArray(prestasiResult) 
            ? prestasiResult.filter((p: PrestasiData) => p.nim === nim)
            : [];
          setPrestasiData(filteredPrestasi);
        } else {
          setPrestasiData([]);
        }
      } catch (err) {
        console.warn("Prestasi data not available:", err);
        setPrestasiData([]);
      }

    } catch (err) {
      console.error("Error fetching biodata:", err);
      setError(err instanceof Error ? err.message : "Failed to fetch data");
    } finally {
      setLoading(false);
    }
  };

  // Handle dialog open
  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
    if (open) {
      fetchBiodataData();
    } else {
      // Reset data when closing
      setMahasiswaData(null);
      setBeasiswaData([]);
      setPrestasiData([]);
      setError(null);
    }
  };


  // Get status badge color
  const getStatusColor = (status: string) => {
    switch (status?.toLowerCase()) {
      case "aktif":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
      case "cuti":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100";
      case "lulus":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100";
      case "non-aktif":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100";
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100";
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline" className="flex items-center gap-1">
          <User className="h-4 w-4" />
          <span className="hidden sm:inline">Detail</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="w-[95vw] max-w-4xl max-h-[90vh] overflow-y-auto p-4 sm:p-6">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <User className="h-5 w-5" />
            Profil Mahasiswa - {nama}
          </DialogTitle>
        </DialogHeader>

        {loading ? (
          <div className="flex justify-center items-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
            <span className="ml-2">Memuat biodata...</span>
          </div>
        ) : error ? (
          <div className="bg-destructive/10 p-4 rounded-md text-destructive text-center">
            Error: {error}
          </div>
        ) : (
          <div className="space-y-2">
            {/* Data Pribadi */}
            {mahasiswaData && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 dark:text-white">
                    <User className="h-5 w-5" />
                    Data Pribadi
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 dark:text-white">
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">NIM</label>
                      <p className="font-semi">{mahasiswaData.nim}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Nama Lengkap</label>
                      <p className="font-semi">{mahasiswaData.nama}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Jenis Kelamin</label>
                      <p>{mahasiswaData.jk}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Agama</label>
                      <p>{mahasiswaData.agama || "-"}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Kabupaten</label>
                      <p className="flex items-center gap-1">
                        {mahasiswaData.kabupaten || "-"}
                      </p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Provinsi</label>
                      <p className="flex items-center gap-1">
                        {mahasiswaData.provinsi || "-"}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Data Akademik */}
            {mahasiswaData && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 dark:text-white">
                    <GraduationCap className="h-5 w-5" />
                    Data Akademik
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 dark:text-white">
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Tahun Angkatan</label>
                      <p className="flex items-center gap-1">
                        {mahasiswaData.tahun_angkatan}
                      </p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Jenis Pendaftaran</label>
                      <p>{mahasiswaData.jenis_pendaftaran || "-"}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Semester</label>
                      <p className="flex items-center gap-1">
                        {mahasiswaData.semester}
                      </p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">IPK</label>
                      <p className="font-semi text-lg">
                        {mahasiswaData.ipk ? Number(mahasiswaData.ipk).toFixed(2) : "-"}
                      </p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Status Kuliah</label>
                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(mahasiswaData.status_kuliah)}`}>
                        {mahasiswaData.status_kuliah}
                      </span>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Kelompok Keahlian</label>
                      <p>{mahasiswaData.nama_kelompok_keahlian || "-"}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            <div className="border-t border-gray-200 dark:border-gray-700"></div>

            {/* Data Beasiswa */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 dark:text-white">
                  <BookOpen className="h-5 w-5" />
                  Riwayat Beasiswa
                </CardTitle>
              </CardHeader>
              <CardContent>
                {beasiswaData.length === 0 ? (
                  <p className="text-muted-foreground text-center py-4 dark:text-white">
                    Tidak ada riwayat beasiswa
                  </p>
                ) : (
                  <div className="space-y-3">
                    {beasiswaData.map((beasiswa) => (
                      <div key={beasiswa.id_beasiswa} className="border rounded-lg p-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 dark:text-white">
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Nama Beasiswa</label>
                            <p className="font-semibold">{beasiswa.nama_beasiswa}</p>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Sumber Beasiswa</label>
                            <p>{beasiswa.sumber_beasiswa}</p>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Jenis Beasiswa</label>
                            <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                              beasiswa.jenis_beasiswa === "Pemerintah" 
                                ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
                                : "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100"
                            }`}>
                              {beasiswa.jenis_beasiswa}
                            </span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Data Prestasi */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 dark:text-white">
                  <Trophy className="h-5 w-5" />
                  Riwayat Prestasi
                </CardTitle>
              </CardHeader>
              <CardContent>
                {prestasiData.length === 0 ? (
                  <p className="text-muted-foreground text-center py-4 dark:text-white">
                    Tidak ada riwayat prestasi
                  </p>
                ) : (
                  <div className="space-y-3">
                    {prestasiData.map((prestasi) => (
                      <div key={prestasi.id_prestasi} className="border rounded-lg p-4 dark:text-white">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Nama Prestasi</label>
                            <p className="font-semibold">{prestasi.nama_prestasi}</p>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Jenis Prestasi</label>
                            <span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
                              prestasi.jenis_prestasi === "Akademik"
                                ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
                                : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
                            }`}>
                              {prestasi.jenis_prestasi}
                            </span>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Tingkat Prestasi</label>
                            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
                              {prestasi.tingkat_prestasi}
                            </span>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Peringkat</label>
                            <p className="flex items-center gap-1 font-semibold text-orange-600">
                              <Trophy className="h-4 w-4" />
                              {prestasi.peringkat}
                            </p>
                          </div>
                          <div>
                            <label className="text-sm font-medium text-muted-foreground">Tanggal Prestasi</label>
                            <p className="flex items-center gap-1">
                              {new Date(prestasi.tanggal_prestasi).toLocaleDateString('id-ID', {
                                day: '2-digit',
                                month: 'long',
                                year: 'numeric'
                              })}
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}
