'use client';

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

interface RekognisiItem {
  id: string;
  dbId?: string;
  jenis: string;
  judul: string;
  tingkat: 'internasional' | 'nasional' | 'wilayah';
  tempat: string;
  tanggal: string;
  buktiLink: string;
  status: 'draft' | 'menunggu_verifikasi' | 'terverifikasi' | 'ditolak';
  linkFoto?: string;
  linkUndangan?: string;
  keterangan?: string;
  mahasiswaList?: { nim: string; nama: string }[];
  dosenList?: { nidn: string; nama: string; urlSuratTugas: string }[];
  urlRekognisi?: string;
}

export default function RekognisiPage() {
  const [rekognisiList, setRekognisiList] = useState<RekognisiItem[]>([]);
  const [showForm, setShowForm] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const [editingItem, setEditingItem] = useState<RekognisiItem | null>(null);

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

  useEffect(() => {
    setCurrentPage(1);
  }, [rekognisiList.length]);

  const totalRows = rekognisiList.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 paginatedRekognisi = rekognisiList.slice(startIndex, endIndex);
  const [selectedItem, setSelectedItem] = useState<RekognisiItem | null>(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [showDetail, setShowDetail] = useState(false);
  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=Rekognisi');
      if (res.data.success) {
        const mapped = res.data.data.map((item: any) => {
          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 cleanId = item.id.replace('RKG-', '');
          let displayId = cleanId;
          const parsedId = parseInt(cleanId, 10);
          if (!isNaN(parsedId) && parsedId < 10000) {
            displayId = String(25380 + parsedId);
          }

          return {
            id: displayId.startsWith('#') ? displayId : `#${displayId}`,
            dbId: item.id,
            jenis: item.lomba_sub || 'Publikasi Jurnal Ilmiah (Sinta 2)',
            judul: item.nama_kegiatan,
            tingkat: item.tingkat ? item.tingkat.toLowerCase() : 'nasional',
            tempat: item.penyelenggara,
            tanggal: item.tanggal_kegiatan ? item.tanggal_kegiatan.slice(0, 10) : '',
            buktiLink: item.dokumen_path || '#',
            status: 'menunggu_verifikasi',
            linkFoto: item.cabang_nama || '',
            linkUndangan: parsedKeterangan.linkUndangan || '',
            keterangan: parsedKeterangan.keterangan,
            mahasiswaList: parsedKeterangan.mahasiswa,
            dosenList: parsedKeterangan.dosen,
            urlRekognisi: item.cabang_sub || '',
          };
        });
        setRekognisiList(mapped);
      } else {
        toast.error(res.data.message || 'Gagal mengambil data rekognisi');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengambil data rekognisi');
    }
  };

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

  const [formData, setFormData] = useState({
    level: '',
    namaRekognisi: '',
    jenis: '',
    penyelenggara: '',
    urlRekognisi: '',
    linkSertifikat: '',
    tanggalSertifikat: '',
    linkFoto: '',
    linkUndangan: '',
    keterangan: '',
  });

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

  const handleOpenEdit = (item: RekognisiItem) => {
    setEditingItem(item);
    setFormData({
      level: item.tingkat ? (item.tingkat.charAt(0).toUpperCase() + item.tingkat.slice(1)) : '',
      namaRekognisi: item.judul,
      jenis: item.jenis,
      penyelenggara: item.tempat,
      urlRekognisi: item.urlRekognisi || '',
      linkSertifikat: item.buktiLink === '#' ? '' : item.buktiLink,
      tanggalSertifikat: item.tanggal,
      linkFoto: item.linkFoto || '',
      linkUndangan: item.linkUndangan || '',
      keterangan: item.keterangan || '',
    });
    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: RekognisiItem) => {
    setSelectedItem(item);
    setShowDetail(true);
  };

  const jenisOptions = [
    'Publikasi Jurnal Ilmiah (Sinta 2)',
    'Jurnal Internasional Bereputasi',
    'Pemakalah / Speaker Seminar',
    'Penulis Buku (ISBN)',
    'Karya Teknologi Tepat Guna',
    'Paten / Hak Kekayaan Intelektual (HKI)',
    'Juri / Wasit / Pelatih Kompetisi',
    'Narasumber / Keynote Speaker',
    'Peserta Pameran Seni / Budaya',
  ];

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.namaRekognisi || !formData.level || !formData.jenis || !formData.penyelenggara || !formData.tanggalSertifikat || !formData.urlRekognisi || !formData.linkSertifikat) {
      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 = rekognisiList
        .map(item => parseInt(item.id.replace('#', '').replace('RKG-', ''), 10))
        .filter(num => !isNaN(num));
      let generatedId = '';
      do {
        generatedId = String(Math.floor(Math.random() * 90000) + 10000);
      } while (existingIds.includes(parseInt(generatedId, 10)));

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

      const res = await axios.post('/api/prestasi', payload);
      if (res.data.success) {
        toast.success(editingItem ? 'Klaim rekognisi berhasil diperbarui!' : 'Klaim rekognisi baru berhasil didaftarkan sebagai Draft!');
        setShowForm(false);
        setEditingItem(null);
        setFormData({
          level: '',
          namaRekognisi: '',
          jenis: '',
          penyelenggara: '',
          urlRekognisi: '',
          linkSertifikat: '',
          tanggalSertifikat: '',
          linkFoto: '',
          linkUndangan: '',
          keterangan: '',
        });
        fetchList();
      } else {
        toast.error(res.data.message || 'Gagal mengirim pengajuan rekognisi');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengirim pengajuan rekognisi');
    }
  };

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

  const formatTingkat = (tingkat: string) => {
    return tingkat.charAt(0).toUpperCase() + tingkat.slice(1);
  };

  const formatDate = (dateStr: string) => {
    try {
      const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
      return new Date(dateStr).toLocaleDateString('id-ID', options);
    } catch (e) {
      return dateStr;
    }
  };

  return (
    <div className="space-y-6">
      {showForm ? (
        <form onSubmit={handleSubmit} className="space-y-6 animate-in fade-in duration-200">
          {/* Banner Tambah Rekognisi */}
          <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 Rekognisi
              </span>
              <h2 className="text-lg font-extrabold text-slate-800 mt-2">Form rekognisi 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 rekognisi tersimpan.
              </p>
            </div>
          </div>

          {/* Section 1: Data Rekognisi */}
          <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">
                <Globe className="h-6 w-6" />
              </div>
              <div>
                <h3 className="font-extrabold text-slate-800 text-base">Data Rekognisi</h3>
                <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Informasi rekognisi, mitra penyelenggara, dan dokumen bukti.</p>
              </div>
            </div>

            <div className="space-y-4">
              {/* Row 1: Level & Nama Rekognisi */}
              <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 Rekognisi<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">
                      <Globe className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="namaRekognisi"
                      value={formData.namaRekognisi}
                      onChange={handleInputChange}
                      placeholder="Nama Rekognisi"
                      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: Jenis & Nama Penyelenggara */}
              <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">
                    Jenis<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="jenis"
                    value={formData.jenis}
                    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 Jenis</option>
                    {jenisOptions.map((opt) => (
                      <option key={opt} value={opt}>{opt}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Nama Penyelenggara/Mitra<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/Mitra"
                      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 3: URL Rekognisi */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                  URL Rekognisi<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">
                    <FileText className="h-4 w-4" />
                  </span>
                  <input
                    type="text"
                    name="urlRekognisi"
                    value={formData.urlRekognisi}
                    onChange={handleInputChange}
                    placeholder="URL Rekognisi"
                    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">
                      <FileText 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">
                      <FileText 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/Bukti Lain</label>
                  <div className="relative">
                    <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400">
                      <FileText 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 animate-none"
              >
                <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 shadow-inner"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Form Actions Footer */}
          <div className="flex items-center justify-between pt-4">
            <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>
      ) : showDetail && 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.tingkat ? (selectedItem.tingkat.charAt(0).toUpperCase() + selectedItem.tingkat.slice(1)) : '-'}
                </div>
              </div>

              {/* Nama Rekognisi */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Nama Rekognisi</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.judul || '-'}
                </div>
              </div>

              {/* Jenis */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Jenis</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.jenis || '-'}
                </div>
              </div>

              {/* Penyelenggara */}
              <div className="space-y-1.5">
                <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.tempat || '-'}
                </div>
              </div>

              {/* URL Rekognisi */}
              <div className="space-y-1.5 md:col-span-2">
                <label className="block text-sm font-bold text-slate-800">URL Rekognisi</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.urlRekognisi ? (
                    <a href={selectedItem.urlRekognisi} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.urlRekognisi}
                    </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.buktiLink && selectedItem.buktiLink !== '#' ? (
                    <a href={selectedItem.buktiLink} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.buktiLink}
                    </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.tanggal || '-'}
                </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/Bukti Lain */}
              <div className="space-y-1.5">
                <label className="block text-sm font-bold text-slate-800">Link Dokumen/Undangan/Bukti Lain</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={() => {
                  setShowDetail(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 mb-6">
            <div className="space-y-1">
              <h1 className="text-2xl font-bold text-slate-800 tracking-tight">Rekognisi Mahasiswa</h1>
              <p className="text-sm text-slate-500 font-medium">
                Kelola rekognisi mahasiswa, peserta mahasiswa, dan dosen pendamping.
              </p>
            </div>
            <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 hover:-translate-y-0.5 active:translate-y-0 cursor-pointer"
              >
                <Plus className="h-4 w-4" />
                Tambah Rekognisi
              </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">
            <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 Rekognisi</h3>
                <p className="text-xs text-slate-400 font-medium">
                  Menampilkan data rekognisi mahasiswa untuk semua tahun.
                </p>
              </div>
              <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>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full border-collapse text-left">
                <thead>
                  <tr className="bg-slate-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 Rekognisi</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">Jenis</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">Level</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">Tahun</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">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-28 text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100/70">
                  {paginatedRekognisi.length > 0 ? (
                    paginatedRekognisi.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50/50 transition-colors">
                        <td className="px-6 py-4 text-sm font-semibold text-slate-800">{item.id}</td>
                        <td className="px-6 py-4 text-sm text-slate-800 font-semibold max-w-xs whitespace-normal break-words" title={item.judul}>
                          {item.judul}
                        </td>
                        <td className="px-6 py-4 text-sm text-slate-600 font-bold">{item.jenis}</td>
                        <td className="px-6 py-4 text-sm">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${
                            item.tingkat === 'internasional' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' :
                            item.tingkat === 'nasional' ? 'bg-sky-50 text-sky-600 border border-sky-100' :
                            'bg-slate-50 text-slate-600 border border-slate-100'
                          }`}>
                            {formatTingkat(item.tingkat)}
                          </span>
                        </td>
                        <td className="px-6 py-4 text-sm text-slate-500 font-medium">
                          {item.tanggal ? new Date(item.tanggal).getFullYear() : '-'}
                        </td>
                        <td className="px-6 py-4 text-sm text-slate-600 font-bold">{item.tempat}</td>
                        <td className="px-6 py-4 text-sm">
                          <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${
                            item.status === 'draft' ? 'bg-slate-50 text-slate-500 border-slate-100' :
                            item.status === 'menunggu_verifikasi' ? 'bg-orange-50 text-orange-500 border-orange-100' :
                            item.status === 'terverifikasi' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' :
                            'bg-red-50 text-red-600 border-red-100'
                          }`}>
                            <span className="w-1.5 h-1.5 rounded-full mr-1.5 bg-current animate-pulse" />
                            {item.status === 'draft' ? 'Draft' :
                             item.status === 'menunggu_verifikasi' ? 'Submitted' :
                             item.status === 'terverifikasi' ? 'Approved' :
                             'Rejected'}
                          </span>
                        </td>
                        <td className="px-6 py-4 text-sm text-center">
                          <div className="flex flex-col items-center justify-center gap-1.5">
                            <button
                              onClick={() => handleOpenDetail(item)}
                              className="p-2 bg-transparent border border-transparent text-slate-400 hover:bg-cyan-50 hover:border-cyan-100/40 hover:text-cyan-600 rounded-xl transition-all"
                              title="Detail"
                            >
                              <Eye className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => handleOpenEdit(item)}
                              className="p-2 bg-transparent border border-transparent text-slate-400 hover:bg-indigo-50 hover:border-indigo-100/40 hover:text-indigo-600 rounded-xl transition-all"
                              title="Edit"
                            >
                              <Edit3 className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => {
                                setDeleteTargetId(item.dbId || item.id);
                                setIsConfirmOpen(true);
                              }}
                              className="p-2 bg-transparent border border-transparent text-slate-400 hover:bg-rose-50 hover:border-rose-100/40 hover:text-rose-600 rounded-xl 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">
                        Belum ada pengajuan rekognisi. Klik tombol Ajukan Rekognisi untuk memulai.
                      </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>
        </>
      )}



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