'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, FileText, ArrowLeft, Save, Users } from 'lucide-react';
import { ConfirmDialog } from '@/components/common/ConfirmDialog';
import { toast } from '@/lib/stores/notificationStore';
import axios from 'axios';

interface PrestasiMandiriItem {
  id: string;
  lombaNama: string;
  lombaSub: string;
  cabangNama: string;
  cabangSub: string;
  prestasi: string;
  tahun: string;
  pt: string;
  status: 'Submitted' | 'Draft' | 'Approved' | 'Rejected';
  linkSertifikat?: string;
  tanggalSertifikat?: string;
  keterangan?: string;
  mahasiswaList?: { nim: string; nama: string }[];
  dosenList?: { nidn: string; nama: string; urlSuratTugas: string }[];
  jumlahPt?: string;
  kepesertaan?: string;
  urlKompetisi?: string;
  linkFoto?: string;
  linkUndangan?: string;
}

export default function PrestasiMandiriPage() {
  const [list, setList] = useState<PrestasiMandiriItem[]>([]);
  const [mounted, setMounted] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const [showDetail, setShowDetail] = useState(false);

  const fetchList = async () => {
    try {
      const res = await axios.get('/api/prestasi?jenis_kegiatan=Mandiri');
      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[],
            jumlahPt: '',
            kepesertaan: '',
            urlKompetisi: '',
            linkFoto: '',
            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.jumlahPt = parsed.jumlahPt || '';
              parsedKeterangan.kepesertaan = parsed.kepesertaan || '';
              parsedKeterangan.urlKompetisi = parsed.urlKompetisi || '';
              parsedKeterangan.linkFoto = parsed.linkFoto || '';
              parsedKeterangan.linkUndangan = parsed.linkUndangan || '';
            } else {
              parsedKeterangan.keterangan = item.keterangan || '';
            }
          } catch (e) {
            parsedKeterangan.keterangan = item.keterangan || '';
          }

          return {
            id: item.id.startsWith('#') ? item.id : `#${item.id}`,
            lombaNama: item.nama_kegiatan,
            lombaSub: item.lomba_sub || '',
            cabangNama: item.cabang_nama || 'Lomba',
            cabangSub: item.cabang_sub || '',
            prestasi: item.capaian,
            tahun: item.tanggal_kegiatan ? new Date(item.tanggal_kegiatan).getFullYear().toString() : '2025',
            pt: item.penyelenggara,
            status: uiStatus,
            linkSertifikat: item.dokumen_path || '',
            tanggalSertifikat: item.tanggal_kegiatan ? item.tanggal_kegiatan.slice(0, 10) : '',
            keterangan: parsedKeterangan.keterangan,
            mahasiswaList: parsedKeterangan.mahasiswa,
            dosenList: parsedKeterangan.dosen,
            jumlahPt: parsedKeterangan.jumlahPt,
            kepesertaan: parsedKeterangan.kepesertaan,
            urlKompetisi: parsedKeterangan.urlKompetisi,
            linkFoto: parsedKeterangan.linkFoto,
            linkUndangan: parsedKeterangan.linkUndangan,
          };
        });
        setList(mapped);
      } else {
        toast.error(res.data.message || 'Gagal mengambil data prestasi mandiri');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengambil data prestasi mandiri');
    }
  };

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

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

  const [formData, setFormData] = useState({
    lombaNama: '',
    lombaSub: ' · ',
    cabangNama: '',
    cabangSub: '',
    prestasi: '',
    tahun: '2025',
    pt: '',
    status: 'Submitted' as 'Submitted' | 'Draft',
    linkSertifikat: '',
    tanggalSertifikat: '',
    keterangan: '',
    jumlahPt: '',
    kepesertaan: '',
    urlKompetisi: '',
    linkFoto: '',
    linkUndangan: '',
  });

  const [mahasiswaList, setMahasiswaList] = useState<{ nim: string; nama: string }[]>([
    { nim: '', nama: '' }
  ]);
  const [dosenList, setDosenList] = useState<{ nidn: string; nama: string; urlSuratTugas: string }[]>([
    { nidn: '', nama: '', urlSuratTugas: '' }
  ]);

  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({
      lombaNama: '',
      lombaSub: ' · ',
      cabangNama: '',
      cabangSub: '',
      prestasi: '',
      tahun: '2025',
      pt: '',
      status: 'Submitted',
      linkSertifikat: '',
      tanggalSertifikat: '',
      keterangan: '',
      jumlahPt: '',
      kepesertaan: '',
      urlKompetisi: '',
      linkFoto: '',
      linkUndangan: '',
    });
    setMahasiswaList([{ nim: '', nama: '' }]);
    setDosenList([{ nidn: '', nama: '', urlSuratTugas: '' }]);
    setShowForm(true);
  };

  const handleOpenEdit = (item: PrestasiMandiriItem) => {
    setEditingItem(item);
    setFormData({
      lombaNama: item.lombaNama,
      lombaSub: item.lombaSub || ' · ',
      cabangNama: item.cabangNama || '',
      cabangSub: item.cabangSub || '',
      prestasi: item.prestasi,
      tahun: item.tahun,
      pt: item.pt,
      status: item.status === 'Approved' || item.status === 'Rejected' ? 'Submitted' : item.status,
      linkSertifikat: item.linkSertifikat || '',
      tanggalSertifikat: item.tanggalSertifikat || '',
      keterangan: item.keterangan || '',
      jumlahPt: item.jumlahPt || '',
      kepesertaan: item.kepesertaan || '',
      urlKompetisi: item.urlKompetisi || '',
      linkFoto: item.linkFoto || '',
      linkUndangan: item.linkUndangan || '',
    });
    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: PrestasiMandiriItem) => {
    setSelectedItem(item);
    setShowDetail(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    let level = '';
    let kat = '';
    if (formData.lombaSub.includes(' · ')) {
      [level, kat] = formData.lombaSub.split(' · ');
    } else {
      level = formData.lombaSub;
      kat = 'Lainnya';
    }

    if (!formData.lombaNama || !level || !formData.cabangSub || !formData.prestasi || !formData.pt || !formData.cabangNama || !formData.linkSertifikat || !formData.tanggalSertifikat) {
      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 = 'menunggu_verifikasi';
      if (editingItem) {
        if (editingItem.status === 'Approved') dbStatus = 'terverifikasi';
        else if (editingItem.status === 'Rejected') dbStatus = 'ditolak';
      }

      const payload = {
        id: editingItem ? editingItem.id.replace('#', '') : generatedId,
        jenis_kegiatan: 'Mandiri',
        nama_kegiatan: formData.lombaNama,
        lomba_sub: formData.lombaSub,
        cabang_nama: formData.cabangNama,
        cabang_sub: formData.cabangSub,
        capaian: formData.prestasi,
        tanggal_kegiatan: formData.tanggalSertifikat,
        dokumen_path: formData.linkSertifikat,
        dokumen_name: formData.linkSertifikat ? formData.linkSertifikat.split('/').pop() : 'placeholder.pdf',
        penyelenggara: formData.pt,
        keterangan: JSON.stringify({
          keterangan: formData.keterangan,
          mahasiswa: validMahasiswa,
          dosen: dosenList.filter(d => d.nidn.trim() || d.nama.trim()),
          jumlahPt: formData.jumlahPt,
          kepesertaan: formData.kepesertaan,
          urlKompetisi: formData.urlKompetisi,
          linkFoto: formData.linkFoto,
          linkUndangan: formData.linkUndangan,
        }),
        status: dbStatus,
      };

      const res = await axios.post('/api/prestasi', payload);
      if (res.data.success) {
        toast.success(editingItem ? 'Data prestasi mandiri berhasil diperbarui!' : 'Prestasi mandiri baru berhasil didaftarkan!');
        setShowForm(false);
        setEditingItem(null);
        fetchList();
      } else {
        toast.error(res.data.message || 'Gagal menyimpan data prestasi mandiri');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal menyimpan data prestasi mandiri');
    }
  };

  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 prestasi mandiri berhasil dihapus.');
        fetchList();
      } else {
        toast.error(res.data.message || 'Gagal menghapus data prestasi mandiri');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal menghapus data prestasi mandiri');
    }
  };

  // Filter list
  const filteredList = list.filter((item) => {
    const matchesSearch =
      item.lombaNama.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.cabangSub.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.pt.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.prestasi.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 paginatedList = filteredList.slice(startIndex, endIndex);

  return (
    <div className="space-y-6">
      {/* 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">Prestasi Mandiri</h1>
        </div>
      </div>

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

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

            <div className="space-y-4">
              {/* Row 1: Level & Kategori */}
              <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.lombaSub.split(' · ')[0] || ''}
                    onChange={(e) => {
                      const level = e.target.value;
                      const kat = formData.lombaSub.split(' · ')[1] || '';
                      setFormData(prev => ({ ...prev, lombaSub: `${level} · ${kat}` }));
                    }}
                    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">
                    Kategori<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="kategori"
                    value={formData.lombaSub.split(' · ')[1] || ''}
                    onChange={(e) => {
                      const level = formData.lombaSub.split(' · ')[0] || '';
                      const kat = e.target.value;
                      setFormData(prev => ({ ...prev, lombaSub: `${level} · ${kat}` }));
                    }}
                    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 Kategori</option>
                    <option value="STEM">Riset dan Inovasi : STEM</option>
                    <option value="SSH">Riset dan Inovasi : SSH</option>
                    <option value="Seni dan Budaya">Seni dan Budaya</option>
                    <option value="Olahraga">Olahraga</option>
                    <option value="Minat Khusus">Minat Khusus</option>
                  </select>
                </div>
              </div>

              {/* Row 2: Nama Kompetisi / Lomba */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                  Nama Kompetisi / Lomba<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">
                    <Trophy className="h-4 w-4" />
                  </span>
                  <input
                    type="text"
                    name="lombaNama"
                    value={formData.lombaNama}
                    onChange={handleInputChange}
                    placeholder="Nama Kompetisi / Lomba"
                    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: Nama Cabang & Peringkat */}
              <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">
                    Nama Cabang<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">
                      <Trophy className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="cabangSub"
                      value={formData.cabangSub}
                      onChange={handleInputChange}
                      placeholder="Nama Cabang"
                      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">
                    Peringkat<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="prestasi"
                    value={formData.prestasi}
                    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 Peringkat</option>
                    <option value="Juara I">Juara I</option>
                    <option value="Juara II">Juara II</option>
                    <option value="Juara III">Juara III</option>
                    <option value="Harapan I">Harapan I</option>
                    <option value="Harapan II">Harapan II</option>
                    <option value="Harapan III">Harapan III</option>
                    <option value="Apresiasi Kejuaraan/Penghargaan Tambahan/Juara Umum">Apresiasi Kejuaraan/Penghargaan Tambahan/Juara Umum</option>
                    <option value="Peserta">Peserta</option>
                  </select>
                </div>
              </div>

              {/* Row 4: 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="pt"
                    value={formData.pt}
                    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 5: Jumlah PT Peserta, Kepesertaan, Bentuk */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Jumlah PT Peserta<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">
                      <Users className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="jumlahPt"
                      value={formData.jumlahPt}
                      onChange={handleInputChange}
                      placeholder="Jumlah"
                      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">
                    Kepesertaan<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="kepesertaan"
                    value={formData.kepesertaan}
                    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 Kepesertaan</option>
                    <option value="Individu">Individu</option>
                    <option value="Kelompok">Kelompok</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    Bentuk<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <select
                    name="bentuk"
                    value={formData.cabangNama}
                    onChange={(e) => setFormData(prev => ({ ...prev, cabangNama: e.target.value }))}
                    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 Bentuk</option>
                    <option value="Luring/Hibrida">Luring/Hibrida</option>
                    <option value="Daring">Daring</option>
                  </select>
                </div>
              </div>

              {/* Row 6: URL Kompetisi / Lomba */}
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                  URL Kompetisi / Lomba<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="urlKompetisi"
                    value={formData.urlKompetisi}
                    onChange={handleInputChange}
                    placeholder="URL"
                    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 7: 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"
                      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 8: Link Foto UPP & 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 UPP</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"
                      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">
                      <FileText className="h-4 w-4" />
                    </span>
                    <input
                      type="text"
                      name="linkUndangan"
                      value={formData.linkUndangan}
                      onChange={handleInputChange}
                      placeholder="URL"
                      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 9: 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 animate-none"
              >
                <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-105 text-rose-600 rounded-xl border border-rose-100/40 transition-all shadow-inner"
                  >
                    <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 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-100 rounded-3xl p-6 sm:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.02)] space-y-6 animate-in fade-in duration-200 text-slate-800">
          <div className="pb-4 border-b border-slate-100">
            <h2 className="text-xl font-bold text-slate-800">View Data</h2>
          </div>

          <div className="space-y-6 text-sm">
            {/* Row 1: Level & Kategori */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Level</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.lombaSub.split(' · ')[0] || '-'}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Kategori</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.lombaSub.split(' · ')[1] || '-'}
                </div>
              </div>
            </div>

            {/* Row 2: Nama Kompetisi / Lomba */}
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-slate-500">Nama Kompetisi / Lomba</label>
              <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                {selectedItem.lombaNama || '-'}
              </div>
            </div>

            {/* Row 3: Nama Cabang & Peringkat */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Nama Cabang</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.cabangSub || '-'}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Peringkat</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center leading-relaxed">
                  {selectedItem.prestasi || '-'}
                </div>
              </div>
            </div>

            {/* Row 4: Nama Penyelenggara */}
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-slate-500">Nama Penyelenggara</label>
              <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                {selectedItem.pt || '-'}
              </div>
            </div>

            {/* Row 5: Jumlah PT / Negara Peserta, Kepesertaan, Bentuk */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Jumlah PT / Negara Peserta</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.jumlahPt || '-'}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Kepesertaan</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.kepesertaan || '-'}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Bentuk</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.cabangNama || '-'}
                </div>
              </div>
            </div>

            {/* Row 6: URL Kompetisi / Lomba */}
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-slate-500">URL Kompetisi / Lomba</label>
              <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center break-all">
                {selectedItem.urlKompetisi ? (
                  <a href={selectedItem.urlKompetisi} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                    {selectedItem.urlKompetisi}
                  </a>
                ) : (
                  '-'
                )}
              </div>
            </div>

            {/* Row 7: Link Dokumen Sertifikat & Tanggal Sertifikat */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Link Dokumen Sertifikat</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center break-all">
                  {selectedItem.linkSertifikat ? (
                    <a href={selectedItem.linkSertifikat} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.linkSertifikat}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Tanggal Sertifikat</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                  {selectedItem.tanggalSertifikat || '-'}
                </div>
              </div>
            </div>

            {/* Row 8: Link Foto UPP & Link Dokumen Undangan */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Link Foto UPP</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center break-all">
                  {selectedItem.linkFoto && selectedItem.linkFoto !== '-' ? (
                    <a href={selectedItem.linkFoto} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.linkFoto}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="block text-xs font-bold text-slate-500">Link Dokumen Undangan</label>
                <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center break-all">
                  {selectedItem.linkUndangan && selectedItem.linkUndangan !== '-' ? (
                    <a href={selectedItem.linkUndangan} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      {selectedItem.linkUndangan}
                    </a>
                  ) : (
                    '-'
                  )}
                </div>
              </div>
            </div>

            {/* Row 9: Keterangan */}
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-slate-500">Keterangan</label>
              <div className="w-full px-4 py-2.5 bg-slate-50/70 border border-slate-200/50 rounded-xl text-sm text-slate-800 font-semibold min-h-[42px] flex items-center">
                {selectedItem.keterangan || '-'}
              </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-100 rounded-xl overflow-hidden shadow-sm">
                <table className="w-full border-collapse text-left text-sm bg-white">
                  <thead>
                    <tr className="bg-slate-50 border-b border-slate-100">
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider w-16">No</th>
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider w-44">NIM</th>
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider">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-100 rounded-xl overflow-hidden shadow-sm">
                <table className="w-full border-collapse text-left text-sm bg-white">
                  <thead>
                    <tr className="bg-slate-50 border-b border-slate-100">
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider w-16">No</th>
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider w-56">NUPTK/NIDN</th>
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider w-64">Nama Dosen</th>
                      <th className="px-6 py-3 text-xs font-bold text-slate-600 uppercase tracking-wider">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-xl transition-all shadow-sm cursor-pointer"
              >
                Cancel
              </button>
            </div>
          </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">
                Prestasi Mandiri
              </span>
              <h2 className="text-lg font-extrabold text-slate-800">Form terpadu untuk data prestasi dan peserta</h2>
              <p className="text-xs text-slate-400 font-semibold leading-relaxed">
                Gunakan tombol tambah atau edit untuk mengisi data lomba, 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 lomba, peringkat, level, 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 Prestasi Mandiri</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 w-64">Lomba/Kompetisi</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-40">Cabang</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider">Prestasi</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">
                  {paginatedList.length > 0 ? (
                    paginatedList.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">
                          <div className="font-bold text-slate-800">{item.lombaNama}</div>
                          <div className="text-xs text-slate-400 font-semibold mt-1">{item.lombaSub}</div>
                        </td>
                        <td className="px-6 py-5 text-sm">
                          <div className="font-bold text-slate-700">{item.cabangSub}</div>
                        </td>
                        <td className="px-6 py-5 text-sm text-slate-600 font-semibold leading-relaxed">
                          {item.prestasi}
                        </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 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 prestasi mandiri. 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>
        </>
      )}




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