'use client';

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

interface BelmawaItem {
  id: string;
  lomba: string;
  prestasi: string;
  tahun: string;
  pt: string;
  keterangan: string;
}

export default function PrestasiBelmawaPage() {
  const [list, setList] = useState<BelmawaItem[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  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<BelmawaItem | null>(null);

  const fetchList = async () => {
    try {
      const res = await axios.get('/api/prestasi?jenis_kegiatan=Belmawa');
      if (res.data.success) {
        const mapped = res.data.data.map((item: any) => ({
          id: item.id,
          lomba: item.nama_kegiatan,
          prestasi: item.capaian,
          tahun: item.tanggal_kegiatan ? new Date(item.tanggal_kegiatan).getFullYear().toString() : '2016',
          pt: item.penyelenggara,
          keterangan: item.keterangan || '',
        }));
        setList(mapped);
      } else {
        toast.error(res.data.message || 'Gagal mengambil data prestasi Belmawa');
      }
    } catch (error: any) {
      console.error(error);
      toast.error('Gagal mengambil data prestasi Belmawa');
    }
  };

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

  const [editingItem, setEditingItem] = useState<BelmawaItem | null>(null);

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

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

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

  const [formData, setFormData] = useState({
    id: '',
    lomba: '',
    prestasi: '',
    tahun: new Date().getFullYear().toString(),
    pt: '',
    keterangan: '',
  });

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

  const handleOpenAdd = () => {
    setEditingItem(null);
    setFormData({
      id: '',
      lomba: '',
      prestasi: '',
      tahun: new Date().getFullYear().toString(),
      pt: '',
      keterangan: '',
    });
    setIsModalOpen(true);
  };

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

  const handleOpenEdit = (item: BelmawaItem) => {
    setEditingItem(item);
    setFormData({
      id: item.id,
      lomba: item.lomba,
      prestasi: item.prestasi,
      tahun: item.tahun,
      pt: item.pt,
      keterangan: item.keterangan,
    });
    setIsModalOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.lomba || !formData.prestasi || !formData.pt || !formData.keterangan) {
      toast.error('Harap isi semua kolom formulir.');
      return;
    }

    try {
      const payload = {
        id: editingItem ? editingItem.id : (formData.id.trim() || undefined),
        jenis_kegiatan: 'Belmawa',
        nama_kegiatan: formData.lomba,
        capaian: formData.prestasi,
        tanggal_kegiatan: `${formData.tahun}-01-01`,
        penyelenggara: formData.pt,
        keterangan: formData.keterangan,
        status: 'terverifikasi', // matching mock status
      };

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

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

  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 mb-6">
        <div className="space-y-1">
          <h1 className="text-2xl font-bold text-slate-800 tracking-tight">Prestasi Belmawa</h1>
          <p className="text-sm text-slate-500 font-medium">
            Kelola prestasi belmawa, peserta mahasiswa, dan dosen pendamping.
          </p>
        </div>
        <div>
          <button
            onClick={handleOpenAdd}
            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 Prestasi
          </button>
        </div>
      </div>

      {/* Table Card */}
      <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 Prestasi Belmawa
          </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 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-48">Lomba/Kompetisi</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-36">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">Keterangan</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-wider w-28 text-center">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100/70">
              {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-800">{item.id}</td>
                    <td className="px-6 py-5 text-sm text-slate-700 font-bold">{item.lomba}</td>
                    <td className="px-6 py-5 text-sm text-slate-600 font-medium">
                      <span className="inline-flex items-center px-2.5 py-1 rounded-md bg-primary/5 text-primary text-xs font-bold border border-primary/10">
                        {item.prestasi}
                      </span>
                    </td>
                    <td className="px-6 py-5 text-sm text-slate-500 font-bold">{item.tahun}</td>
                    <td className="px-6 py-5 text-sm text-slate-600 font-semibold">{item.pt}</td>
                    <td className="px-6 py-5 text-sm text-slate-500 font-medium leading-relaxed max-w-md">
                      {item.keterangan}
                    </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-4 w-4" />
                        </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-4 w-4" />
                        </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-4 w-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center text-slate-400 font-medium">
                    Tidak ada data prestasi Belmawa. Klik tombol Tambah Prestasi 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-55 border border-slate-200 rounded-lg text-slate-600 font-bold transition-all disabled:opacity-50"
                >
                  Selanjutnya
                </button>
              </div>
            )}
        </div>
      </div>

      {/* CRUD Add/Edit Modal */}
      {isModalOpen && 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-lg shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
              {/* Modal Header */}
              <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <h3 className="text-lg font-bold text-slate-800">
                  {editingItem ? 'Edit Prestasi Belmawa' : 'Tambah Prestasi Belmawa'}
                </h3>
                <button
                  onClick={() => setIsModalOpen(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>

              {/* Modal Form */}
              <form onSubmit={handleSubmit} className="p-6 space-y-4">
                <div>
                  <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">ID (Opsional)</label>
                  <input
                    type="text"
                    name="id"
                    value={formData.id}
                    onChange={handleInputChange}
                    disabled={!!editingItem}
                    placeholder={editingItem ? "ID tidak dapat diubah" : "Contoh: 123456 (Biarkan kosong untuk otomatis)"}
                    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 disabled:bg-slate-100 disabled:text-slate-400"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Lomba / Kompetisi</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="lomba"
                      value={formData.lomba}
                      onChange={handleInputChange}
                      placeholder="Contoh: Pimnas Daftar Peserta"
                      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 className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Prestasi / Capaian</label>
                    <input
                      type="text"
                      name="prestasi"
                      value={formData.prestasi}
                      onChange={handleInputChange}
                      placeholder="Contoh: Hibah PKM"
                      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-500 uppercase tracking-wider mb-2">Tahun</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="number"
                        name="tahun"
                        value={formData.tahun}
                        onChange={handleInputChange}
                        placeholder="Contoh: 2016"
                        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>

                <div>
                  <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Perguruan Tinggi (PT)</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="Contoh: Universitas Muhammadiyah Jember"
                      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-500 uppercase tracking-wider mb-2">Keterangan Tambahan / Nama Peserta</label>
                  <div className="relative">
                    <textarea
                      name="keterangan"
                      value={formData.keterangan}
                      onChange={handleInputChange}
                      placeholder="Masukkan nama peserta, kelas, judul karya, dst..."
                      rows={3}
                      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 resize-none"
                    />
                  </div>
                </div>

                {/* Modal Footer Actions */}
                <div className="pt-4 border-t border-slate-100 flex items-center justify-end gap-3">
                  <button
                    type="button"
                    onClick={() => setIsModalOpen(false)}
                    className="px-4 py-2.5 rounded-xl border border-slate-200 text-sm font-semibold text-slate-600 hover:bg-slate-50 transition-colors"
                  >
                    Batal
                  </button>
                  <button
                    type="submit"
                    className="bg-primary hover:bg-primary-dark text-white rounded-xl px-5 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"
                  >
                    {editingItem ? 'Simpan Perubahan' : 'Tambah Prestasi'}
                  </button>
                </div>
              </form>
            </div>
          </div>,
          document.body
        )
      ) : null}

      {/* 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 Prestasi Belmawa</h3>
                <span className="text-xs text-slate-400 font-semibold">ID: {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">
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Lomba / Kompetisi</span>
                <div className="font-bold text-slate-800 leading-relaxed">{selectedItem.lomba}</div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Capaian Prestasi</span>
                <div>
                  <span className="inline-flex items-center px-2.5 py-1 rounded-md bg-primary/5 text-primary text-xs font-bold border border-primary/10">
                    {selectedItem.prestasi}
                  </span>
                </div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Penyelenggara / PT</span>
                <div className="font-bold text-slate-700">{selectedItem.pt}</div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Tahun Pelaksanaan</span>
                <div className="font-extrabold text-slate-700">{selectedItem.tahun}</div>
              </div>
              <div className="space-y-1">
                <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Keterangan / Peserta</span>
                <div className="font-medium text-slate-600 leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100">
                  {selectedItem.keterangan || '-'}
                </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-955 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 Prestasi Belmawa"
        description="Apakah Anda yakin ingin menghapus data prestasi Belmawa ini? Tindakan ini tidak dapat dibatalkan."
        confirmLabel="Ya, Hapus"
        isDestructive
      />
    </div>
  );
}