'use client';

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import Link from 'next/link';
import { ChevronRight, Plus, Folder, Trash2, X, Globe, Landmark, MapPin, Calendar, Check, Info, Eye, Edit3, ArrowLeft, Save, Users, FileText, Award } 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 KejuaraanItem {
  id: string;
  penyelenggara: string;
  nama: string;
  bentuk: string;
  tingkat: string;
  tempat: string;
  tanggal: string;
  status: 'draft' | 'menunggu_verifikasi' | 'terverifikasi' | 'ditolak';
  jenis_penyelenggaraan?: string;
  kategori?: string;
  url_ajang?: string;
  url_laporan?: string;
  tahun?: string;
}

export default function KejuaraanPage() {
  const [kejuaraanList, setKejuaraanList] = useState<KejuaraanItem[]>([]);
  const [mounted, setMounted] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<KejuaraanItem | null>(null);
  const [editingItem, setEditingItem] = useState<KejuaraanItem | null>(null);
  const [showForm, setShowForm] = useState(false);

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

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

  const totalRows = kejuaraanList.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 paginatedKejuaraan = kejuaraanList.slice(startIndex, endIndex);

  const fetchKejuaraan = async () => {
    try {
      const res = await axios.get('/api/kejuaraan');
      if (res.data.success) {
        setKejuaraanList(res.data.data);
      } else {
        toast.error(res.data.message || 'Gagal mengambil data kejuaraan');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengambil data kejuaraan');
    }
  };

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

  const [formData, setFormData] = useState({
    penyelenggara: '',
    nama: '',
    bentuk: '',
    tingkat: 'Nasional' as string,
    tempat: '',
    tanggal: '',
    status: 'draft' as 'draft' | 'menunggu_verifikasi' | 'terverifikasi' | 'ditolak',
    jenis_penyelenggaraan: 'Penyelenggara Kompetisi/Ajang Mandiri',
    kategori: '',
    url_ajang: '',
    url_laporan: '',
    tahun: '2026',
  });

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.jenis_penyelenggaraan || !formData.nama || !formData.bentuk || !formData.tempat || !formData.url_ajang || !formData.tahun || !formData.url_laporan || !formData.kategori) {
      toast.error('Harap isi semua kolom formulir.');
      return;
    }

    try {
      const payload = {
        ...formData,
        id: editingItem ? editingItem.id : undefined,
        penyelenggara: formData.jenis_penyelenggaraan,
        tanggal: `${formData.tahun}-01-01`,
        status: formData.status
      };
      const res = await axios.post('/api/kejuaraan', payload);
      if (res.data.success) {
        toast.success(editingItem ? 'Kejuaraan berhasil diperbarui!' : 'Kejuaraan baru berhasil ditambahkan!');
        setShowForm(false);
        setFormData({
          penyelenggara: '',
          nama: '',
          bentuk: '',
          tingkat: 'nasional',
          tempat: '',
          tanggal: '',
          status: 'draft',
          jenis_penyelenggaraan: 'Penyelenggara Kompetisi/Ajang Mandiri',
          kategori: '',
          url_ajang: '',
          url_laporan: '',
          tahun: '2026',
        });
        setEditingItem(null);
        fetchKejuaraan();
      } else {
        toast.error(res.data.message || 'Gagal menyimpan data kejuaraan');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal menyimpan data kejuaraan');
    }
  };

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

  const formatTingkat = (tingkat: string) => {
    if (!tingkat) return '';
    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;
    }
  };

  const getPTName = (tempat: string) => {
    if (!tempat) return 'Semua PT';
    if (tempat.includes('Universitas') || tempat.includes('Univ') || tempat.includes('Institut') || tempat.includes('Bina Nusantara')) {
      return tempat.split(',')[0];
    }
    return 'Semua PT';
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      {!showForm && (
        <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">Kejuaraan</h1>
            <p className="text-sm text-slate-500 font-medium">
              Kelola data kejuaraan resmi, ajang kompetisi, dan tingkat partisipasi mahasiswa.
            </p>
          </div>
          <div>
            <button
              onClick={() => {
                setEditingItem(null);
                setFormData({
                  penyelenggara: '',
                  nama: '',
                  bentuk: '',
                  tingkat: 'nasional',
                  tempat: '',
                  tanggal: '',
                  status: 'draft',
                  jenis_penyelenggaraan: 'Penyelenggara Kompetisi/Ajang Mandiri',
                  kategori: '',
                  url_ajang: '',
                  url_laporan: '',
                  tahun: '2026',
                });
                setShowForm(true);
              }}
              className="bg-primary hover:bg-primary-dark text-white rounded-xl px-4 py-2.5 text-sm font-semibold flex items-center gap-2 shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0"
            >
              <Plus className="h-4 w-4" />
              Tambah Kejuaraan
            </button>
          </div>
        </div>
      )}

      {/* Form View (when active) */}
      {showForm ? (
        <form onSubmit={handleSubmit} className="space-y-6 animate-in fade-in duration-200">
          {/* Pills Bar */}
          <div className="flex flex-wrap items-center gap-3 p-4 bg-slate-50 border border-slate-100 rounded-2xl mb-6">
            <div className="flex items-center gap-2 bg-white px-3.5 py-1.5 rounded-full border border-slate-200/60 text-xs font-semibold text-slate-600 shadow-sm">
              <Calendar className="h-4 w-4 text-slate-400" />
              <span>Tahun aktif: 2026 dan 2025</span>
            </div>
            <div className="flex items-center gap-2 bg-white px-3.5 py-1.5 rounded-full border border-slate-200/60 text-xs font-semibold text-slate-600 shadow-sm">
              <FileText className="h-4 w-4 text-slate-400" />
              <span>Tautan dokumen wajib di setiap tahun</span>
            </div>
            <div className="flex items-center gap-2 bg-white px-3.5 py-1.5 rounded-full border border-slate-200/60 text-xs font-semibold text-slate-600 shadow-sm">
              <Users className="h-4 w-4 text-slate-400" />
              <span>Hasil peserta diisi terpisah</span>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Left Column (Data Ajang) */}
            <div className="lg:col-span-2 space-y-6">
              {/* Card Data Ajang */}
              <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">
                {/* Card Title Header */}
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-indigo-50 text-indigo-600 rounded-2xl shadow-inner">
                    <Award className="h-6 w-6" />
                  </div>
                  <div>
                    <h3 className="font-extrabold text-slate-800 text-base">Data Ajang</h3>
                    <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Informasi utama penyelenggaraan ajang atau lomba.</p>
                  </div>
                </div>

                {/* Form Fields Grid */}
                <div className="space-y-4">
                  {/* Row 1 */}
                  <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 Penyelenggaraan<span className="text-rose-500 ml-0.5">*</span>
                      </label>
                      <select
                        name="jenis_penyelenggaraan"
                        value={formData.jenis_penyelenggaraan}
                        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="Penyelenggara Kompetisi/Ajang Mandiri">Penyelenggara Kompetisi/Ajang Mandiri</option>
                        <option value="Penyelenggara Kompetisi/Ajang Mandiri Terverifikasi">Penyelenggara Kompetisi/Ajang Mandiri Terverifikasi</option>
                      </select>
                      <p className="text-[10px] text-slate-400 font-semibold mt-1">Pilih jenis penyelenggara ajang yang dilaporkan.</p>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                        Tingkat / Level<span className="text-rose-500 ml-0.5">*</span>
                      </label>
                      <select
                        name="tingkat"
                        value={formData.tingkat}
                        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>
                      <p className="text-[10px] text-slate-400 font-semibold mt-1">Gunakan level yang paling sesuai dengan cakupan ajang.</p>
                    </div>
                  </div>

                  {/* Row 2 */}
                  <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">
                        Kategori<span className="text-rose-500 ml-0.5">*</span>
                      </label>
                      <select
                        name="kategori"
                        value={formData.kategori}
                        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 Kategori</option>
                        <option value="Riset dan Inovasi : STEM">Riset dan Inovasi : STEM</option>
                        <option value="Riset dan Inovasi : 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>
                      <p className="text-[10px] text-slate-400 font-semibold mt-1">Kategori mengikuti referensi prestasi mandiri.</p>
                    </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.bentuk}
                        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 Bentuk</option>
                        <option value="Luring">Luring</option>
                        <option value="Daring">Daring</option>
                        <option value="Hibrid">Hibrid</option>
                      </select>
                      <p className="text-[10px] text-slate-400 font-semibold mt-1">Menjelaskan moda pelaksanaan kompetisi/ajang.</p>
                    </div>
                  </div>

                  {/* Row 3 */}
                  <div>
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      Nama Ajang / 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">
                        <Award className="h-4 w-4" />
                      </span>
                      <input
                        type="text"
                        name="nama"
                        value={formData.nama}
                        onChange={handleInputChange}
                        placeholder="Nama Ajang / 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>
                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Gunakan nama resmi kompetisi atau ajang mandiri.</p>
                  </div>

                  {/* Row 4 */}
                  <div>
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      Tempat<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">
                        <MapPin className="h-4 w-4" />
                      </span>
                      <input
                        type="text"
                        name="tempat"
                        value={formData.tempat}
                        onChange={handleInputChange}
                        placeholder="Tempat penyelenggaraan"
                        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>
                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Contoh: Jakarta, daring nasional, atau kampus penyelenggara.</p>
                  </div>

                  {/* Row 5 */}
                  <div>
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      URL Ajang<span className="text-rose-500 ml-0.5">*</span>
                    </label>
                    <input
                      type="text"
                      name="url_ajang"
                      value={formData.url_ajang}
                      onChange={(e) => {
                        const val = e.target.value;
                        setFormData(prev => ({
                          ...prev,
                          url_ajang: val,
                          url_laporan: prev.url_laporan || val // auto-sync initially
                        }));
                      }}
                      placeholder="https://..."
                      className="w-full px-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"
                    />
                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Tautan resmi halaman ajang, pengumuman, atau microsite kegiatan.</p>
                  </div>

                  {/* Row 6 */}
                  <div>
                    <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                      Tahun<span className="text-rose-500 ml-0.5">*</span>
                    </label>
                    <select
                      name="tahun"
                      value={formData.tahun}
                      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="2026">2026</option>
                      <option value="2025">2025</option>
                      <option value="2024">2024</option>
                      <option value="2023">2023</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Column (Panduan) */}
            <div className="lg:col-span-1 bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] space-y-4 animate-in slide-in-from-right-5 duration-300 h-full">
              <h3 className="font-extrabold text-slate-800 text-base border-b border-slate-100 pb-3">Panduan Pengisian</h3>
              <ul className="space-y-4 text-xs font-semibold text-slate-500 leading-relaxed list-disc pl-4">
                <li>Ajang biasa membentuk 1 laporan tahun dari tahun yang dipilih.</li>
                <li>Ajang terverifikasi membentuk 3 tahun berurutan secara otomatis.</li>
                <li>Setiap tahun wajib memiliki URL Ajang dan URL Laporan Kegiatan.</li>
                <li>Data peserta dan juara diisi pada halaman terpisah setelah diverifikasi.</li>
              </ul>
            </div>
          </div>

          {/* Card Laporan Kegiatan (Full Width) */}
          <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-sky-50 text-[#0284c7] rounded-xl shadow-inner">
                <FileText className="h-6 w-6" />
              </div>
              <div>
                <h3 className="font-extrabold text-slate-800 text-base">Laporan Kegiatan</h3>
                <p className="text-xs text-slate-400 font-semibold leading-relaxed mt-0.5">Tahun kegiatan akan terbentuk otomatis dari tahun kegiatan terakhir yang dipilih.</p>
              </div>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                <span className="bg-blue-50 text-blue-600 text-xs font-extrabold px-3.5 py-1.5 rounded-full border border-blue-100">
                  {formData.tahun}
                </span>
                <span className="bg-emerald-50 text-emerald-600 text-[10px] font-extrabold px-2.5 py-1 rounded-full border border-emerald-100 uppercase tracking-wider">
                  Tahun Kegiatan Terakhir
                </span>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5">Tahun</label>
                  <input
                    type="text"
                    disabled
                    value={formData.tahun}
                    className="w-full px-4 py-2.5 bg-slate-100 border border-slate-200 rounded-xl text-sm text-slate-500 font-semibold focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    URL Ajang<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <input
                    type="text"
                    name="url_ajang"
                    value={formData.url_ajang}
                    onChange={(e) => setFormData(prev => ({ ...prev, url_ajang: e.target.value }))}
                    placeholder="https://..."
                    className="w-full px-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>
                  <label className="block text-xs font-bold text-slate-700 mb-1.5 flex items-center">
                    URL Laporan Kegiatan<span className="text-rose-500 ml-0.5">*</span>
                  </label>
                  <input
                    type="text"
                    name="url_laporan"
                    value={formData.url_laporan}
                    onChange={(e) => setFormData(prev => ({ ...prev, url_laporan: e.target.value }))}
                    placeholder="https://..."
                    className="w-full px-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>
          </div>

          {/* Form Actions (Full Width) */}
          <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-primary hover:bg-primary-dark text-white rounded-xl text-sm font-semibold shadow-md shadow-primary/20 transition-all"
            >
              <Save className="h-4 w-4" />
              Simpan Data
            </button>
          </div>
        </form>
      ) : (
        <>
          {/* Table Section */}
          <div className="bg-white border border-slate-100 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.02)] overflow-hidden">
            {/* Card Header */}
            <div className="p-6 border-b border-slate-100 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
              <h3 className="text-lg font-bold text-slate-800">
                Daftar Kejuaraan
              </h3>
              <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/75 border-b border-slate-100">
                    <th className="px-4 py-4 text-xs font-bold text-slate-600 w-16">ID</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Ajang / Lomba</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Jenis Ajang</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Level</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Tempat</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Tahun Kegiatan</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">PT</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Status</th>
                    <th className="px-4 py-4 text-xs font-bold text-slate-600">Peserta</th>
                    <th className="px-2 py-4 text-xs font-bold text-slate-700 text-center uppercase tracking-wider w-14">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100/70">
                  {paginatedKejuaraan.length > 0 ? (
                    paginatedKejuaraan.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50/50 transition-colors">
                        <td className="px-4 py-4 text-sm font-semibold text-slate-800">{item.id}</td>
                        <td className="px-4 py-4 text-sm text-slate-800 font-semibold">{item.nama}</td>
                        <td className="px-4 py-4 text-sm text-slate-600 font-medium">{item.jenis_penyelenggaraan || item.penyelenggara}</td>
                        <td className="px-4 py-4 text-sm">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${
                            item.tingkat?.toLowerCase() === 'internasional' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' :
                            item.tingkat?.toLowerCase() === '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-4 py-4 text-sm text-slate-500 font-medium">{item.tempat}</td>
                        <td className="px-4 py-4 text-sm text-slate-500 font-medium whitespace-nowrap">
                          {item.tahun || (item.tanggal ? item.tanggal.split('-')[0] : '')}
                        </td>
                        <td className="px-4 py-4 text-sm text-slate-600 font-medium whitespace-nowrap">
                          {getPTName(item.tempat)}
                        </td>
                        <td className="px-4 py-4 text-sm">
                          <StatusBadge status={item.status} />
                        </td>
                        <td className="px-4 py-4 text-sm">
                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-50 text-slate-600 border border-slate-100 text-xs font-bold shadow-sm cursor-pointer hover:bg-slate-100 transition-all">
                            <Users className="h-3.5 w-3.5 text-slate-400" />
                            Kelola
                          </span>
                        </td>
                        <td className="px-2 py-3 text-sm text-center">
                          <div className="flex flex-col items-center justify-center gap-1.5">
                            <button
                              onClick={() => {
                                setSelectedItem(item);
                                setIsDetailOpen(true);
                              }}
                              className="p-0.5 bg-transparent text-slate-400/80 hover:text-cyan-600 transition-colors"
                              title="Detail"
                            >
                              <Eye className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => {
                                setEditingItem(item);
                                setFormData({
                                  penyelenggara: item.penyelenggara,
                                  nama: item.nama,
                                  bentuk: item.bentuk,
                                  tingkat: item.tingkat as string,
                                  tempat: item.tempat,
                                  tanggal: item.tanggal ? item.tanggal.split('T')[0] : '',
                                  status: item.status === 'terverifikasi' ? 'terverifikasi' : 'draft',
                                  jenis_penyelenggaraan: item.jenis_penyelenggaraan || item.penyelenggara || 'Penyelenggara Kompetisi/Ajang Mandiri',
                                  kategori: item.kategori || '',
                                  url_ajang: item.url_ajang || '',
                                  url_laporan: item.url_laporan || '',
                                  tahun: item.tahun || (item.tanggal ? item.tanggal.split('-')[0] : '2026'),
                                });
                                setShowForm(true);
                              }}
                              className="p-0.5 bg-transparent text-slate-400/80 hover:text-indigo-600 transition-colors"
                              title="Edit"
                            >
                              <Edit3 className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => {
                                setDeleteTargetId(item.id);
                                setIsConfirmOpen(true);
                              }}
                              className="p-0.5 bg-transparent text-slate-400/80 hover:text-rose-600 transition-colors"
                              title="Hapus"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={10} className="px-6 py-12 text-center text-slate-400 font-medium">
                        Belum ada kejuaraan terdaftar. Klik tombol Tambah Kejuaraan 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-primary text-white"
                            : "bg-white hover:bg-slate-50 border border-slate-200 text-slate-600"
                        }`}
                      >
                        {pageNum}
                      </button>
                    ))}
                    <button
                      type="button"
                      disabled={currentPage === totalPages}
                      onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                      className="p-1.5 bg-white hover:bg-slate-50 border border-slate-200 rounded-lg text-slate-600 font-bold transition-all disabled:opacity-50"
                    >
                      Selanjutnya
                    </button>
                  </div>
                )}
            </div>
          </div>
        </>
      )}

      {/* Detail View Modal */}
      {isDetailOpen && selectedItem && mounted && typeof document !== 'undefined' ? createPortal(
        <div className="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-200">
          <div className="bg-white border border-slate-100 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
            <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
              <div className="space-y-0.5">
                <h3 className="text-md font-bold text-slate-800">Detail Kejuaraan</h3>
                <span className="text-xs text-slate-400 font-semibold">{selectedItem.id}</span>
              </div>
              <button
                onClick={() => setIsDetailOpen(false)}
                className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            
            <div className="p-6 space-y-4 text-sm max-h-[70vh] overflow-y-auto">
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Nama Kejuaraan</span>
                <div className="font-bold text-slate-800 leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100">{selectedItem.nama}</div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Jenis Penyelenggaraan</span>
                <div className="font-medium text-slate-700 leading-relaxed">{selectedItem.jenis_penyelenggaraan || selectedItem.penyelenggara}</div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Tingkat</span>
                  <div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${
                      selectedItem.tingkat === 'internasional' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' :
                      selectedItem.tingkat === 'nasional' ? 'bg-sky-50 text-sky-600 border border-sky-100' :
                      'bg-slate-50 text-slate-600 border border-slate-100'
                    }`}>
                      {formatTingkat(selectedItem.tingkat)}
                    </span>
                  </div>
                </div>
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Status</span>
                  <div>
                    <StatusBadge status={selectedItem.status} />
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Kategori</span>
                  <div className="font-bold text-slate-600">{selectedItem.kategori || '-'}</div>
                </div>
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Bentuk</span>
                  <div className="font-bold text-slate-600">{selectedItem.bentuk}</div>
                </div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Tempat Pelaksanaan</span>
                <div className="font-bold text-slate-600">{selectedItem.tempat}</div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">URL Ajang</span>
                <div className="font-bold text-slate-600 break-all">{selectedItem.url_ajang || '-'}</div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Tahun</span>
                  <div className="font-bold text-slate-600">{selectedItem.tahun || (selectedItem.tanggal ? selectedItem.tanggal.split('-')[0] : '-')}</div>
                </div>
                <div className="space-y-1">
                  <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Tanggal</span>
                  <div className="font-bold text-slate-600">{formatDate(selectedItem.tanggal)}</div>
                </div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">URL Laporan Kegiatan</span>
                <div className="font-bold text-slate-600 break-all">{selectedItem.url_laporan || '-'}</div>
              </div>
            </div>
            
            <div className="px-6 py-4 border-t border-slate-100 flex justify-end bg-slate-50/30">
              <button
                type="button"
                onClick={() => setIsDetailOpen(false)}
                className="px-5 py-2 rounded-xl bg-slate-800 hover:bg-slate-900 text-white text-xs font-bold transition-colors shadow-md hover:scale-[1.02]"
              >
                Tutup Detail
              </button>
            </div>
          </div>
        </div>,
        document.body
      ) : null}

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