'use client';

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import Link from 'next/link';
import { ChevronRight, Plus, Trash2, Edit3, Eye, Search, X, Trophy, Landmark, Calendar, Globe, FileText, ArrowUpRight, Upload, Users, Save, ArrowLeft, Package, Link2 } from 'lucide-react';
import { ConfirmDialog } from '@/components/common/ConfirmDialog';
import { toast } from '@/lib/stores/notificationStore';
import axios from 'axios';

interface SertifikasiItem {
  id: string;
  nama: string;
  link: string;
  penyelenggara: string;
  level: string;
  tahun: string;
  pt: string;
  status: 'Submitted' | 'Draft' | 'Approved' | 'Rejected';
  urlSertifikasi?: string;
  tanggalSertifikat?: string;
  linkFoto?: string;
  linkUndangan?: string;
  keterangan?: string;
  mahasiswaList?: { nim: string; nama: string }[];
  dosenList?: { nidn: string; nama: string; urlSuratTugas: string }[];
}

export default function SertifikasiPage() {
  const [list, setList] = useState<SertifikasiItem[]>([]);
  const [showForm, setShowForm] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const [mahasiswaList, setMahasiswaList] = useState<{ nim: string; nama: string }[]>([
    { nim: '', nama: '' }
  ]);
  const [dosenList, setDosenList] = useState<{ nidn: string; nama: string; urlSuratTugas: string }[]>([
    { nidn: '', nama: '', urlSuratTugas: '' }
  ]);

  const fetchList = async () => {
    try {
      const res = await axios.get('/api/prestasi?jenis_kegiatan=Sertifikasi');
      if (res.data.success) {
        const mapped = res.data.data.map((item: any) => {
          let uiStatus: 'Submitted' | 'Draft' | 'Approved' | 'Rejected' = 'Submitted';
          if (item.status === 'draft') uiStatus = 'Draft';
          else if (item.status === 'menunggu_verifikasi') uiStatus = 'Submitted';
          else if (item.status === 'terverifikasi') uiStatus = 'Approved';
          else if (item.status === 'ditolak') uiStatus = 'Rejected';

          let parsedKeterangan = { keterangan: '', mahasiswa: [] as any[], dosen: [] as any[], linkUndangan: '' };
          try {
            if (item.keterangan && (item.keterangan.trim().startsWith('{') || item.keterangan.trim().startsWith('['))) {
              const parsed = JSON.parse(item.keterangan);
              parsedKeterangan.keterangan = parsed.keterangan || '';
              parsedKeterangan.mahasiswa = parsed.mahasiswa || [];
              parsedKeterangan.dosen = parsed.dosen || [];
              parsedKeterangan.linkUndangan = parsed.linkUndangan || '';
            } else {
              parsedKeterangan.keterangan = item.keterangan || '';
            }
          } catch (e) {
            parsedKeterangan.keterangan = item.keterangan || '';
          }

          const displayPt = parsedKeterangan.keterangan && !parsedKeterangan.keterangan.startsWith('{')
            ? parsedKeterangan.keterangan
            : 'Universitas Muhammadiyah Jember';

          return {
            id: item.id.startsWith('#') ? item.id : `#${item.id}`,
            nama: item.nama_kegiatan,
            link: item.dokumen_path || '',
            penyelenggara: item.penyelenggara,
            level: item.tingkat,
            tahun: item.tanggal_kegiatan ? new Date(item.tanggal_kegiatan).getFullYear().toString() : '2025',
            pt: displayPt,
            status: uiStatus,
            urlSertifikasi: item.cabang_sub || '',
            tanggalSertifikat: item.tanggal_kegiatan ? item.tanggal_kegiatan.slice(0, 10) : '',
            linkFoto: item.cabang_nama || '',
            linkUndangan: parsedKeterangan.linkUndangan || '',
            keterangan: parsedKeterangan.keterangan,
            mahasiswaList: parsedKeterangan.mahasiswa,
            dosenList: parsedKeterangan.dosen,
          };
        });
        setList(mapped);
      } else {
        toast.error(res.data.message || 'Gagal mengambil data sertifikasi');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengambil data sertifikasi');
    }
  };

  useEffect(() => {
    setMounted(true);
    fetchList();
  }, []);

  const [searchQuery, setSearchQuery] = useState('');
  const [filterYear, setFilterYear] = useState('Semua');
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<SertifikasiItem | null>(null);
  const [editingItem, setEditingItem] = useState<SertifikasiItem | null>(null);

  const [formData, setFormData] = useState({
    level: '',
    nama: '',
    penyelenggara: '',
    urlSertifikasi: '',
    linkSertifikat: '',
    tanggalSertifikat: '',
    linkFoto: '',
    linkUndangan: '',
    keterangan: '',
    status: 'Submitted' as 'Submitted' | 'Draft',
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSearch = () => {
    toast.info(`Menyaring data berdasarkan kata kunci: "${searchQuery}"`);
  };

  const handleOpenAdd = () => {
    setEditingItem(null);
    setFormData({
      level: '',
      nama: '',
      penyelenggara: '',
      urlSertifikasi: '',
      linkSertifikat: '',
      tanggalSertifikat: '',
      linkFoto: '',
      linkUndangan: '',
      keterangan: '',
      status: 'Submitted',
    });
    setMahasiswaList([{ nim: '', nama: '' }]);
    setDosenList([{ nidn: '', nama: '', urlSuratTugas: '' }]);
    setShowForm(true);
  };

  const handleOpenEdit = (item: SertifikasiItem) => {
    setEditingItem(item);
    setFormData({
      level: item.level || '',
      nama: item.nama || '',
      penyelenggara: item.penyelenggara || '',
      urlSertifikasi: item.urlSertifikasi || '',
      linkSertifikat: item.link || '',
      tanggalSertifikat: item.tanggalSertifikat || '',
      linkFoto: item.linkFoto || '',
      linkUndangan: item.linkUndangan || '',
      keterangan: item.keterangan || '',
      status: item.status === 'Approved' || item.status === 'Rejected' ? 'Submitted' : item.status,
    });
    setMahasiswaList(
      item.mahasiswaList && item.mahasiswaList.length > 0
        ? item.mahasiswaList
        : [{ nim: '', nama: '' }]
    );
    setDosenList(
      item.dosenList && item.dosenList.length > 0
        ? item.dosenList
        : [{ nidn: '', nama: '', urlSuratTugas: '' }]
    );
    setShowForm(true);
  };

  const handleOpenDetail = (item: SertifikasiItem) => {
    setSelectedItem(item);
    setIsDetailOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.nama || !formData.level || !formData.penyelenggara || !formData.tanggalSertifikat || !formData.linkSertifikat || !formData.urlSertifikasi) {
      toast.error('Harap isi semua kolom formulir.');
      return;
    }

    const validMahasiswa = mahasiswaList.filter(m => m.nim.trim() && m.nama.trim());
    if (validMahasiswa.length === 0) {
      toast.error('Minimal satu data mahasiswa wajib diisi lengkap.');
      return;
    }

    try {
      const existingIds = list.map(item => item.id.replace('#', ''));
      let generatedId = '';
      do {
        generatedId = String(Math.floor(Math.random() * 900000) + 100000);
      } while (existingIds.includes(generatedId));

      let dbStatus = editingItem ? editingItem.status : 'draft';

      const payload = {
        id: editingItem ? editingItem.id.replace('#', '') : generatedId,
        jenis_kegiatan: 'Sertifikasi',
        nama_kegiatan: formData.nama,
        dokumen_path: formData.linkSertifikat,
        dokumen_name: formData.linkSertifikat ? formData.linkSertifikat.split('/').pop() : 'placeholder.pdf',
        penyelenggara: formData.penyelenggara,
        tingkat: formData.level,
        tanggal_kegiatan: formData.tanggalSertifikat,
        keterangan: JSON.stringify({
          keterangan: formData.keterangan,
          mahasiswa: validMahasiswa,
          dosen: dosenList.filter(d => d.nidn.trim() || d.nama.trim()),
          linkUndangan: formData.linkUndangan,
        }),
        capaian: formData.nama,
        status: dbStatus,
        cabang_sub: formData.urlSertifikasi || null,
        cabang_nama: formData.linkFoto || null,
      };

      const res = await axios.post('/api/prestasi', payload);
      if (res.data.success) {
        toast.success(editingItem ? 'Data sertifikasi berhasil diperbarui!' : 'Sertifikasi baru berhasil didaftarkan sebagai Draft!');
        setShowForm(false);
        setEditingItem(null);
        setFormData({
          level: '',
          nama: '',
          penyelenggara: '',
          urlSertifikasi: '',
          linkSertifikat: '',
          tanggalSertifikat: '',
          linkFoto: '',
          linkUndangan: '',
          keterangan: '',
          status: 'Submitted',
        });
        fetchList();
      } else {
        toast.error(res.data.message || 'Gagal menyimpan data sertifikasi');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal menyimpan data sertifikasi');
    }
  };

  const handleDelete = async (id: string) => {
    try {
      const rawId = id.replace('#', '');
      const res = await axios.delete(`/api/prestasi?id=${rawId}`);
      if (res.data.success) {
        toast.success('Data sertifikasi berhasil dihapus.');
        fetchList();
      } else {
        toast.error(res.data.message || 'Gagal menghapus data sertifikasi');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal menghapus data sertifikasi');
    }
  };

  // Filter list
  const filteredList = list.filter((item) => {
    const matchesSearch =
      item.nama.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.penyelenggara.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.pt.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.level.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesYear = filterYear === 'Semua' ? true : item.tahun === filterYear;
    return matchesSearch && matchesYear;
  });

  // Pagination states
  const [currentPage, setCurrentPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState<number | 'all'>(10);

  // Reset pagination when search query or filter year changes
  useEffect(() => {
    setCurrentPage(1);
  }, [searchQuery, filterYear]);

  const totalRows = filteredList.length;
  const totalPages = rowsPerPage === 'all' ? 1 : Math.ceil(totalRows / rowsPerPage);
  const startIndex = (currentPage - 1) * (rowsPerPage === 'all' ? 0 : rowsPerPage);
  const endIndex = rowsPerPage === 'all' ? totalRows : Math.min(startIndex + rowsPerPage, totalRows);
  const paginatedSertifikasi = filteredList.slice(startIndex, endIndex);

  return (
    <div className="space-y-6">
      {showForm ? (
        <form onSubmit={handleSubmit} className="space-y-6 animate-in fade-in duration-200">
          {/* Breadcrumb Header */}
          <div className="pb-4 border-b border-slate-100">
            <h1 className="text-2xl font-bold text-slate-800 tracking-tight">Sertifikasi</h1>
            <p className="text-sm text-slate-500 font-medium mt-1">
              Lengkapi data sertifikasi, mahasiswa, dan dosen pendamping dalam satu alur.
            </p>
          </div>

          {/* Banner */}
          <div className="bg-gradient-to-r from-emerald-50/50 via-teal-50/20 to-sky-50/40 border border-teal-100/60 rounded-2xl p-6 shadow-sm relative overflow-hidden flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="space-y-1 relative z-10 max-w-xl">
              <span className="inline-flex items-center px-3 py-1 bg-blue-50/80 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">
                Tambah Sertifikasi
              </span>
              <h2 className="text-lg font-extrabold text-slate-800 mt-2">Form sertifikasi terpadu</h2>
              <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-1">
                Data mahasiswa dan dosen kini diisi langsung di form ini, sehingga tidak perlu berpindah halaman setelah data sertifikasi tersimpan.
              </p>
            </div>
          </div>

          {/* Section 1: Data Sertifikasi */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] space-y-6">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-blue-50 text-blue-600 rounded-2xl shadow-inner">
                <FileText className="h-6 w-6" />
              </div>
              <div>
                <h3 className="font-extrabold text-slate-800 text-base">Data Sertifikasi</h3>
                <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Informasi sertifikasi, penyelenggara, dan dokumen bukti.</p>
              </div>
            </div>

            <div className="space-y-4">
              {/* Row 1: Level & Nama Sertifikasi */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Level<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="level"
                    value={formData.level}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all appearance-none"
                  >
                    <option value="">Pilih Level</option>
                    <option value="Kabupaten/Kota">Kabupaten/Kota</option>
                    <option value="Provinsi">Provinsi</option>
                    <option value="Nasional">Nasional</option>
                    <option value="Internasional">Internasional</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Nama Sertifikasi<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <Package className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="nama"
                      value={formData.nama}
                      onChange={handleInputChange}
                      placeholder="Nama Sertifikasi"
                      className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                </div>
              </div>

              {/* Row 2: Nama Penyelenggara */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                  Nama Penyelenggara<span className="text-rose-500 ml-0.5">*</span>
                </label>
                <div className="relative">
                  <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                    <Landmark className="h-4 w-4" />
                  </span>
                  <input
                    type="text"
                    name="penyelenggara"
                    value={formData.penyelenggara}
                    onChange={handleInputChange}
                    placeholder="Penyelenggara"
                    className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                  />
                </div>
              </div>

              {/* Row 3: URL Sertifikasi */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                  URL Sertifikasi<span className="text-rose-500 ml-0.5">*</span>
                </label>
                <div className="relative">
                  <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                    <Link2 className="h-4 w-4" />
                  </span>
                  <input
                    type="text"
                    name="urlSertifikasi"
                    value={formData.urlSertifikasi}
                    onChange={handleInputChange}
                    placeholder="URL Sertifikasi"
                    className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                  />
                </div>
              </div>

              {/* Row 4: Link Dokumen Sertifikat & Tanggal Sertifikat */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Link Dokumen Sertifikat<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <Link2 className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="linkSertifikat"
                      value={formData.linkSertifikat}
                      onChange={handleInputChange}
                      placeholder="URL Sertifikat"
                      className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Tanggal Sertifikat<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <Calendar className="h-4 w-4" />
                    </span>
                    <input
                      type="date"
                      name="tanggalSertifikat"
                      value={formData.tanggalSertifikat}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                </div>
              </div>

              {/* Row 5: Link Foto Kegiatan & Link Dokumen Undangan */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5">Link Foto Kegiatan</label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <Link2 className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="linkFoto"
                      value={formData.linkFoto}
                      onChange={handleInputChange}
                      placeholder="URL Foto Kegiatan"
                      className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5">Link Dokumen Undangan</label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <Link2 className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="linkUndangan"
                      value={formData.linkUndangan}
                      onChange={handleInputChange}
                      placeholder="URL Dokumen"
                      className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                </div>
              </div>

              {/* Row 6: Keterangan */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5">Keterangan</label>
                <div className="relative">
                  <span className="absolute top-3 left-3.5 text-slate-400">
                    <FileText className="h-4 w-4" />
                  </span>
                  <textarea
                    name="keterangan"
                    value={formData.keterangan}
                    onChange={handleInputChange}
                    placeholder="Keterangan tambahan"
                    rows={3}
                    className="w-full pl-10 pr-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all resize-none"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Section 2: Data Mahasiswa */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] space-y-6">
            <div className="flex items-center justify-between">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-blue-50 text-blue-600 rounded-2xl shadow-inner">
                  <Users className="h-6 w-6" />
                </div>
                <div>
                  <h3 className="font-extrabold text-slate-800 text-base">Data Mahasiswa</h3>
                  <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Minimal satu mahasiswa wajib diisi sebelum data dapat disimpan.</p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setMahasiswaList([...mahasiswaList, { nim: '', nama: '' }])}
                className="bg-blue-50 hover:bg-blue-100/80 text-blue-600 border border-blue-100 rounded-lg px-3.5 py-1.5 text-xs font-bold transition-all flex items-center gap-1 shadow-sm"
              >
                <Plus className="h-3.5 w-3.5" />
                Tambah
              </button>
            </div>

            <div className="space-y-4">
              {mahasiswaList.map((mhs, idx) => (
                <div key={idx} className="bg-slate-50/50 border border-slate-100 rounded-2xl p-4 flex flex-col md:flex-row gap-4 items-end animate-in fade-in duration-200">
                  <div className="w-full md:w-1/3">
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      NIM<span className="text-rose-500 ml-0.5">*</span>
                    </label>
                    <input
                      type="text"
                      value={mhs.nim}
                      onChange={(e) => {
                        const val = e.target.value;
                        setMahasiswaList(prev => prev.map((item, i) => i === idx ? { ...item, nim: val } : item));
                      }}
                      placeholder="NIM"
                      className="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                  <div className="w-full md:w-2/3">
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      Nama Mahasiswa<span className="text-rose-500 ml-0.5">*</span>
                    </label>
                    <input
                      type="text"
                      value={mhs.nama}
                      onChange={(e) => {
                        const val = e.target.value;
                        setMahasiswaList(prev => prev.map((item, i) => i === idx ? { ...item, nama: val } : item));
                      }}
                      placeholder="Nama Mahasiswa"
                      className="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                  <button
                    type="button"
                    onClick={() => {
                      if (mahasiswaList.length > 1) {
                        setMahasiswaList(prev => prev.filter((_, i) => i !== idx));
                      } else {
                        toast.error('Minimal satu mahasiswa wajib diisi.');
                      }
                    }}
                    className="p-2.5 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-xl border border-rose-100/40 transition-all"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Section 3: Data Dosen Pendamping */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] space-y-6">
            <div className="flex items-center justify-between">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-blue-50 text-blue-600 rounded-2xl shadow-inner">
                  <Users className="h-6 w-6" />
                </div>
                <div>
                  <h3 className="font-extrabold text-slate-800 text-base">Data Dosen Pendamping</h3>
                  <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Isi dosen pendamping beserta tautan surat tugasnya.</p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setDosenList([...dosenList, { nidn: '', nama: '', urlSuratTugas: '' }])}
                className="bg-blue-50 hover:bg-blue-100/80 text-blue-600 border border-blue-100 rounded-lg px-3.5 py-1.5 text-xs font-bold transition-all flex items-center gap-1 shadow-sm"
              >
                <Plus className="h-3.5 w-3.5" />
                Tambah
              </button>
            </div>

            <div className="space-y-4">
              {dosenList.map((dsn, idx) => (
                <div key={idx} className="bg-slate-50/50 border border-slate-100 rounded-2xl p-4 flex flex-col md:flex-row gap-4 items-end animate-in fade-in duration-200">
                  <div className="w-full md:w-1/4">
                    <label className="block text-xs font-bold text-slate-700 mb-1.5">NIDN/NUPTK</label>
                    <input
                      type="text"
                      value={dsn.nidn}
                      onChange={(e) => {
                        const val = e.target.value;
                        setDosenList(prev => prev.map((item, i) => i === idx ? { ...item, nidn: val } : item));
                      }}
                      placeholder="NIDN/NUPTK"
                      className="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                  <div className="w-full md:w-1/3">
                    <label className="block text-xs font-bold text-slate-700 mb-1.5">Nama Dosen</label>
                    <input
                      type="text"
                      value={dsn.nama}
                      onChange={(e) => {
                        const val = e.target.value;
                        setDosenList(prev => prev.map((item, i) => i === idx ? { ...item, nama: val } : item));
                      }}
                      placeholder="Nama Dosen"
                      className="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                  <div className="w-full md:w-5/12">
                    <label className="block text-xs font-bold text-slate-700 mb-1.5">URL Surat Tugas</label>
                    <input
                      type="text"
                      value={dsn.urlSuratTugas}
                      onChange={(e) => {
                        const val = e.target.value;
                        setDosenList(prev => prev.map((item, i) => i === idx ? { ...item, urlSuratTugas: val } : item));
                      }}
                      placeholder="URL Surat Tugas"
                      className="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                    />
                  </div>
                  <button
                    type="button"
                    onClick={() => {
                      setDosenList(prev => prev.filter((_, i) => i !== idx));
                    }}
                    className="p-2.5 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-xl border border-rose-100/40 transition-all"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex items-center justify-between pt-4 border-t border-slate-100">
            <button
              type="button"
              onClick={() => {
                setShowForm(false);
                setEditingItem(null);
              }}
              className="flex items-center gap-2 px-5 py-2.5 bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold transition-all hover:shadow-sm"
            >
              <ArrowLeft className="h-4 w-4" />
              Kembali
            </button>
            <button
              type="submit"
              className="flex items-center gap-2 px-6 py-2.5 bg-[#0f172a] hover:bg-slate-800 text-white rounded-xl text-sm font-semibold shadow-md transition-all"
            >
              <Save className="h-4 w-4" />
              Simpan Data
            </button>
          </div>
        </form>
      ) : isDetailOpen && selectedItem ? (
        <div className="bg-white border border-slate-200/80 rounded-2xl p-6 sm:p-8 shadow-sm space-y-6 animate-in fade-in duration-200 text-slate-800 text-sm">
          <div className="pb-4 border-b border-slate-200/60">
            <h2 className="text-xl font-bold text-slate-800">View Data</h2>
          </div>

          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
              {/* Level */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Level</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center">
                  {selectedItem.level || '-'}
                </div>
              </div>

              {/* Nama Sertifikasi */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Nama Sertifikasi</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center">
                  {selectedItem.nama || '-'}
                </div>
              </div>

              {/* Penyelenggara */}
              <div className="space-y-1.5 md:col-span-2">
                <label className="block text-sm font-bold text-slate-800">Penyelenggara</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center">
                  {selectedItem.penyelenggara || '-'}
                </div>
              </div>

              {/* URL Sertifikasi */}
              <div className="space-y-1.5 md:col-span-2">
                <label className="block text-sm font-bold text-slate-800">URL Sertifikasi</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center break-all">
                  {selectedItem.urlSertifikasi ? (
                    <a href={selectedItem.urlSertifikasi} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.urlSertifikasi}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>

              {/* Link Dokumen Sertifikat */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Link Dokumen Sertifikat</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center break-all">
                  {selectedItem.link ? (
                    <a href={selectedItem.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.link}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>

              {/* Tanggal Sertifikat */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Tanggal Sertifikat</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center">
                  {selectedItem.tanggalSertifikat || '-'}
                </div>
              </div>

              {/* Link Foto */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Link Foto</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center break-all">
                  {selectedItem.linkFoto ? (
                    <a href={selectedItem.linkFoto} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.linkFoto}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>

              {/* Link Dokumen Undangan */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Link Dokumen Undangan</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center break-all">
                  {selectedItem.linkUndangan ? (
                    <a href={selectedItem.linkUndangan} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.linkUndangan}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>

              {/* Keterangan */}
              <div className="space-y-1.5 md:col-span-2">
                <label className="block text-sm font-bold text-slate-800">Keterangan</label>
                <div className="w-full px-4 py-3 bg-[#f8f9fa] border border-slate-200/30 rounded-md text-sm text-slate-700 font-medium min-h-[46px] flex items-center">
                  {selectedItem.keterangan || '-'}
                </div>
              </div>
            </div>

            {/* Data Mahasiswa Table */}
            <div className="space-y-3 pt-4">
              <h3 className="text-sm font-bold text-slate-800">Data Mahasiswa</h3>
              <div className="border border-slate-200/80 rounded-lg overflow-hidden shadow-sm">
                <table className="w-full border-collapse text-left text-sm bg-white">
                  <thead>
                    <tr className="bg-white border-b border-slate-200">
                      <th className="px-6 py-3 text-sm font-bold text-slate-800 w-16">No</th>
                      <th className="px-6 py-3 text-sm font-bold text-slate-800 w-44">NIM</th>
                      <th className="px-6 py-3 text-sm font-bold text-slate-800">Nama Mahasiswa</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {selectedItem.mahasiswaList && selectedItem.mahasiswaList.length > 0 ? (
                      selectedItem.mahasiswaList.map((mhs, idx) => (
                        <tr key={idx} className="hover:bg-slate-50/30 transition-colors">
                          <td className="px-6 py-3.5 font-bold text-slate-800">{idx + 1}</td>
                          <td className="px-6 py-3.5 text-slate-600 font-medium">{mhs.nim || '-'}</td>
                          <td className="px-6 py-3.5 text-slate-700 font-bold">{mhs.nama || '-'}</td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan={3} className="px-6 py-4 text-center text-slate-400 font-medium">
                          Tidak ada data mahasiswa.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Data Dosen Table */}
            <div className="space-y-3 pt-4">
              <h3 className="text-sm font-bold text-slate-800">Data Dosen</h3>
              <div className="border border-slate-200/80 rounded-lg overflow-hidden shadow-sm">
                <table className="w-full border-collapse text-left text-sm bg-white">
                  <thead>
                    <tr className="bg-white border-b border-slate-200">
                      <th className="px-6 py-3 text-sm font-bold text-slate-800 w-16">No</th>
                      <th className="px-6 py-3 text-sm font-bold text-slate-800 w-56">NUPTK/NIDN</th>
                      <th className="px-6 py-3 text-sm font-bold text-slate-800 w-64">Nama Dosen</th>
                      <th className="px-6 py-3 text-sm font-bold text-slate-800">Surat Tugas</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {selectedItem.dosenList && selectedItem.dosenList.length > 0 ? (
                      selectedItem.dosenList.map((dsn, idx) => (
                        <tr key={idx} className="hover:bg-slate-50/30 transition-colors">
                          <td className="px-6 py-3.5 font-bold text-slate-800">{idx + 1}</td>
                          <td className="px-6 py-3.5 text-slate-600 font-medium">{dsn.nidn || '-'}</td>
                          <td className="px-6 py-3.5 text-slate-700 font-bold">{dsn.nama || '-'}</td>
                          <td className="px-6 py-3.5 text-slate-600 font-medium break-all">
                            {dsn.urlSuratTugas ? (
                              <a href={dsn.urlSuratTugas} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                                {dsn.urlSuratTugas}
                              </a>
                            ) : (
                              '-'
                            )}
                          </td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan={4} className="px-6 py-4 text-center text-slate-400 font-medium">
                          Tidak ada data dosen pendamping.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Cancel Button */}
            <div className="pt-4 flex justify-start">
              <button
                type="button"
                onClick={() => {
                  setIsDetailOpen(false);
                  setSelectedItem(null);
                }}
                className="px-6 py-2.5 bg-[#ea580c] hover:bg-[#c2410c] text-white text-sm font-semibold rounded-lg transition-all shadow-sm cursor-pointer"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      ) : (
        <>
          {/* Page Header */}
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-200">
            <div className="space-y-1">
              <h1 className="text-2xl font-bold text-slate-800 tracking-tight">Sertifikasi</h1>
              <p className="text-sm text-slate-500 font-medium">
                Kelola sertifikasi, peserta mahasiswa, dan dosen pendamping.
              </p>
            </div>
          </div>

          {/* Info & Integrated Search Card */}
          <div className="bg-gradient-to-r from-emerald-50/50 via-teal-50/20 to-sky-50/40 border border-teal-100/60 rounded-2xl p-6 shadow-sm flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 relative overflow-hidden">
            <div className="space-y-2 relative z-10 max-w-xl">
              <span className="inline-flex items-center px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full border border-primary/10">
                Sertifikasi
              </span>
              <h2 className="text-lg font-extrabold text-slate-800">Form terpadu untuk sertifikasi dan peserta</h2>
              <p className="text-xs text-slate-400 font-semibold leading-relaxed">
                Gunakan tombol tambah atau edit untuk mengisi data sertifikasi, mahasiswa, dan dosen dalam satu form.
              </p>
            </div>

            {/* Search Panel inside the banner */}
            <div className="flex items-center gap-2.5 w-full lg:w-auto relative z-10">
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Cari nama, level, tahun, atau PT"
                className="w-full lg:w-64 px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all shadow-sm"
              />
              <select
                value={filterYear}
                onChange={(e) => setFilterYear(e.target.value)}
                className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm text-slate-700 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all shadow-sm appearance-none min-w-[120px]"
              >
                <option value="Semua">Semua Tahun</option>
                <option value="2025">2025</option>
                <option value="2024">2024</option>
                <option value="2023">2023</option>
              </select>
              <button
                onClick={handleSearch}
                className="p-3 bg-primary/10 hover:bg-primary/20 text-primary border border-primary/10 rounded-xl transition-all shadow-sm cursor-pointer"
              >
                <Search className="h-4 w-4" />
              </button>
            </div>
          </div>

          {/* Table Section */}
          <div className="bg-white border border-slate-100 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.02)] overflow-hidden">
            {/* Table Title and Add Button */}
            <div className="p-6 border-b border-slate-100/80 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
              <div className="space-y-1">
                <h3 className="text-lg font-bold text-slate-800">Daftar Sertifikasi</h3>
                <p className="text-xs text-slate-400 font-medium">
                  Menampilkan data sesuai cakupan perguruan tinggi pengguna untuk semua tahun.
                </p>
              </div>
              <div className="flex flex-wrap items-center gap-4 w-full sm:w-auto justify-between sm:justify-end">
                <div className="flex items-center gap-2 text-xs font-semibold text-slate-500">
                  <span>Tampilkan</span>
                  <select
                    value={rowsPerPage}
                    onChange={(e) => {
                      const val = e.target.value;
                      setRowsPerPage(val === 'all' ? 'all' : parseInt(val));
                      setCurrentPage(1);
                    }}
                    className="px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-700 font-bold focus:outline-none focus:border-primary transition-all shadow-sm"
                  >
                    <option value={10}>10</option>
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value="all">Semua</option>
                  </select>
                  <span>baris per halaman</span>
                </div>
                <button
                  onClick={handleOpenAdd}
                  className="bg-[#0f172a] hover:bg-slate-800 text-white rounded-xl px-5 py-2.5 text-xs font-bold flex items-center gap-2 shadow-lg shadow-slate-900/10 hover:shadow-slate-900/25 transition-all duration-200"
                >
                  <Plus className="h-4 w-4" />
                  Tambah Data
                </button>
              </div>
            </div>

            {/* The Grid Table */}
            <div className="overflow-x-auto">
              <table className="w-full border-collapse text-left">
                <thead>
                  <tr className="bg-slate-50/50 border-b border-slate-100">
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-24">ID</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">Nama Sertifikasi</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-64">Penyelenggara</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-32">Level</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-24">Tahun</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-56">PT</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-32">Status</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-24 text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100/70">
                  {paginatedSertifikasi.length > 0 ? (
                    paginatedSertifikasi.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50/50 transition-colors align-top">
                        <td className="px-6 py-5 text-sm font-semibold text-slate-400">{item.id}</td>
                        <td className="px-6 py-5 text-sm max-w-sm">
                          <div className="font-bold text-slate-800 leading-relaxed">{item.nama}</div>
                          <Link href={item.link} className="text-xs text-primary font-semibold hover:underline block mt-1 truncate">
                            {item.link}
                          </Link>
                        </td>
                        <td className="px-6 py-5 text-sm text-slate-600 font-bold leading-relaxed">{item.penyelenggara}</td>
                        <td className="px-6 py-5 text-sm">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-600 border border-indigo-100">
                            {item.level}
                          </span>
                        </td>
                        <td className="px-6 py-5 text-sm text-slate-500 font-extrabold">{item.tahun}</td>
                        <td className="px-6 py-5 text-sm text-slate-600 font-bold">{item.pt}</td>
                        <td className="px-6 py-5 text-sm">
                          <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${item.status === 'Submitted' ? 'bg-orange-50 text-orange-500 border-orange-100' :
                              item.status === 'Approved' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' :
                                item.status === 'Rejected' ? 'bg-red-50 text-red-600 border-red-100' :
                                  'bg-slate-50 text-slate-500 border-slate-100'
                            }`}>
                            <span className="w-1.5 h-1.5 rounded-full mr-1.5 bg-current animate-pulse" />
                            {item.status}
                          </span>
                        </td>
                        <td className="px-6 py-5 text-sm text-center">
                          <div className="flex flex-col items-center justify-center gap-1.5">
                            <button
                              onClick={() => handleOpenDetail(item)}
                              className="p-1.5 bg-transparent border border-transparent text-slate-400 hover:bg-cyan-50 hover:border-cyan-100/40 hover:text-cyan-600 rounded-lg transition-all"
                              title="Detail"
                            >
                              <Eye className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => handleOpenEdit(item)}
                              className="p-1.5 bg-transparent border border-transparent text-slate-400 hover:bg-indigo-50 hover:border-indigo-100/40 hover:text-indigo-600 rounded-lg transition-all"
                              title="Edit"
                            >
                              <Edit3 className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => {
                                setDeleteTargetId(item.id);
                                setIsConfirmOpen(true);
                              }}
                              className="p-1.5 bg-transparent border border-transparent text-slate-400 hover:bg-rose-50 hover:border-rose-100/40 hover:text-rose-600 rounded-lg transition-all"
                              title="Hapus"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={8} className="px-6 py-12 text-center text-slate-400 font-medium">
                        Tidak ada data sertifikasi. Coba ganti kata kunci pencarian atau klik tombol Tambah Data.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination Footer */}
            <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs font-semibold text-slate-500 bg-slate-50/50">
              <span>
                Menampilkan {totalRows > 0 ? startIndex + 1 : 0} - {endIndex} dari {totalRows} data
              </span>

              {totalPages > 1 && (
                <div className="flex items-center gap-1.5">
                  <button
                    type="button"
                    disabled={currentPage === 1}
                    onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                    className="p-1.5 bg-white hover:bg-slate-50 border border-slate-200 rounded-lg text-slate-600 font-bold transition-all disabled:opacity-50"
                  >
                    Sebelumnya
                  </button>
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
                    <button
                      key={pageNum}
                      type="button"
                      onClick={() => setCurrentPage(pageNum)}
                      className={`w-7 h-7 rounded-lg text-xs font-bold transition-all ${currentPage === pageNum
                          ? "bg-[#0f172a] text-white"
                          : "bg-white hover:bg-slate-50 border border-slate-200 text-slate-600"
                        }`}
                    >
                      {pageNum}
                    </button>
                  ))}
                  <button
                    type="button"
                    disabled={currentPage === totalPages}
                    onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                    className="p-1.5 bg-white hover:bg-slate-50 border border-slate-200 rounded-lg text-slate-600 font-bold transition-all disabled:opacity-50"
                  >
                    Selanjutnya
                  </button>
                </div>
              )}
            </div>
          </div>
        </>
      )}

      {/* Detail View Modal has been replaced by the inline View Data panel above */}

      <ConfirmDialog
        isOpen={isConfirmOpen}
        onClose={() => {
          setIsConfirmOpen(false);
          setDeleteTargetId(null);
        }}
        onConfirm={async () => {
          if (deleteTargetId) {
            await handleDelete(deleteTargetId);
          }
        }}
        title="Hapus Sertifikasi"
        description="Apakah Anda yakin ingin menghapus data sertifikasi ini? Tindakan ini tidak dapat dibatalkan."
        confirmLabel="Ya, Hapus"
        isDestructive
      />
    </div>
  );
}