"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import {
  Search,
  Plus,
  FileSpreadsheet,
  Download,
  Upload,
  Printer,
  FileText,
  Pencil,
  Trash2,
  Calendar,
  Megaphone,
  ChevronLeft,
  ChevronRight,
  RefreshCw,
  CheckCircle2,
} from "lucide-react";
import * as XLSX from "xlsx";
import { AnnouncementItem, AnnouncementFormData } from "@/types/announcement";
import { AnnouncementModal } from "@/components/pengumuman/AnnouncementModal";
import { AnnouncementImportModal } from "@/components/pengumuman/AnnouncementImportModal";
import { AnnouncementDeleteDialog } from "@/components/pengumuman/AnnouncementDeleteDialog";
import { brandConfig } from "@/config/brand";
import { useSchoolOfficials } from "@/hooks/useSchoolOfficials";

// Fallback initial data if offline / initial hydration
const INITIAL_ANNOUNCEMENTS: AnnouncementItem[] = [
  {
    id: 1,
    namaKegiatan: "Gladi TKA dan AN",
    tanggalAwal: "2026-10-06",
    tanggalAkhir: "2026-10-08",
    targetX: false,
    targetXI: true,
    targetXII: false,
  },
  {
    id: 2,
    namaKegiatan: "Bloking Kokurikuler XI (Disiplin Positif)",
    tanggalAwal: "2026-10-13",
    tanggalAkhir: "2026-10-17",
    targetX: false,
    targetXI: true,
    targetXII: false,
  },
  {
    id: 3,
    namaKegiatan: "Pembagian Rapot Bulanan Ke -2 (ASTS)",
    tanggalAwal: "2026-10-24",
    tanggalAkhir: "2026-10-24",
    targetX: true,
    targetXI: true,
    targetXII: true,
  },
  {
    id: 4,
    namaKegiatan: "Pesantren Kilat Ramadhan 1447 H",
    tanggalAwal: "2026-11-02",
    tanggalAkhir: "2026-11-06",
    targetX: true,
    targetXI: true,
    targetXII: true,
  },
  {
    id: 5,
    namaKegiatan: "Asesmen Sumatif Akhir Jenjang (ASAJ) Kelas XII",
    tanggalAwal: "2026-11-16",
    tanggalAkhir: "2026-11-20",
    targetX: false,
    targetXI: false,
    targetXII: true,
  },
  {
    id: 6,
    namaKegiatan: "Study Tour & Edukasi Lingkungan Hidup",
    tanggalAwal: "2026-12-01",
    tanggalAkhir: "2026-12-03",
    targetX: true,
    targetXI: false,
    targetXII: false,
  },
];

export default function PengumumanPage() {
  const { getOfficial } = useSchoolOfficials();
  const [data, setData] = useState<AnnouncementItem[]>(INITIAL_ANNOUNCEMENTS);
  const [loading, setLoading] = useState<boolean>(true);
  const [search, setSearch] = useState<string>("");
  const [filterBulan, setFilterBulan] = useState<string>(() => {
    return String(new Date().getMonth() + 1);
  });
  const [filterTahun, setFilterTahun] = useState<string>(() => {
    return String(new Date().getFullYear());
  });
  const [currentPage, setCurrentPage] = useState<number>(1);
  const pageSize = 10;

  // Modal states
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [editingItem, setEditingItem] = useState<AnnouncementItem | null>(null);
  const [importModalOpen, setImportModalOpen] = useState<boolean>(false);
  const [deleteItem, setDeleteItem] = useState<AnnouncementItem | null>(null);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => {
      setToastMessage(null);
    }, 3000);
  };

  // Fetch from API
  const fetchAnnouncements = useCallback(async () => {
    try {
      setLoading(true);
      const res = await fetch("/api/announcements");
      if (res.ok) {
        const json = await res.json();
        if (json.success && Array.isArray(json.data) && json.data.length > 0) {
          const mapped: AnnouncementItem[] = json.data.map((row: any) => ({
            id: row.id,
            namaKegiatan: row.nama_kegiatan,
            tanggalAwal: row.tanggal_awal,
            tanggalAkhir: row.tanggal_akhir,
            targetX: Boolean(row.target_x),
            targetXI: Boolean(row.target_xi),
            targetXII: Boolean(row.target_xii),
            createdAt: row.created_at,
          }));
          setData(mapped);
          return;
        }
      }
    } catch {
      // Fallback to initial mock if API fails
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchAnnouncements();
  }, [fetchAnnouncements]);

  // Real-time filter by Nama Kegiatan & Bulan/Tahun
  const filteredData = useMemo(() => {
    let result = data;

    // Filter by year
    if (filterTahun && filterTahun !== "Semua") {
      result = result.filter((item) => {
        const itemYearAwal = item.tanggalAwal ? item.tanggalAwal.slice(0, 4) : "";
        const itemYearAkhir = item.tanggalAkhir ? item.tanggalAkhir.slice(0, 4) : "";
        return itemYearAwal === filterTahun || itemYearAkhir === filterTahun;
      });
    }

    // Filter by month
    if (filterBulan && filterBulan !== "Semua") {
      const padMonth = filterBulan.padStart(2, "0");
      result = result.filter((item) => {
        const itemMonthAwal = item.tanggalAwal ? item.tanggalAwal.slice(5, 7) : "";
        const itemMonthAkhir = item.tanggalAkhir ? item.tanggalAkhir.slice(5, 7) : "";
        return itemMonthAwal === padMonth || itemMonthAkhir === padMonth;
      });
    }

    if (search.trim()) {
      const q = search.toLowerCase().trim();
      result = result.filter((item) => item.namaKegiatan.toLowerCase().includes(q));
    }

    return result;
  }, [data, search, filterBulan, filterTahun]);

  // Pagination calculation
  const totalItems = filteredData.length;
  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));

  // Reset to page 1 if search changes
  useEffect(() => {
    setCurrentPage(1);
  }, [search]);

  const paginatedData = useMemo(() => {
    const start = (currentPage - 1) * pageSize;
    return filteredData.slice(start, start + pageSize);
  }, [filteredData, currentPage, pageSize]);

  // Actions
  const handleOpenAddModal = () => {
    setEditingItem(null);
    setModalOpen(true);
  };

  const handleOpenEditModal = (item: AnnouncementItem) => {
    setEditingItem(item);
    setModalOpen(true);
  };

  const handleSaveAnnouncement = async (formData: AnnouncementFormData) => {
    setIsSubmitting(true);
    try {
      if (editingItem) {
        // Edit existing
        const res = await fetch("/api/announcements", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            id: editingItem.id,
            nama_kegiatan: formData.namaKegiatan,
            tanggal_awal: formData.tanggalAwal,
            tanggal_akhir: formData.tanggalAkhir,
            target_x: formData.targetX ? 1 : 0,
            target_xi: formData.targetXI ? 1 : 0,
            target_xii: formData.targetXII ? 1 : 0,
          }),
        });
        if (res.ok) {
          setData((prev) =>
            prev.map((item) =>
              item.id === editingItem.id ? { ...item, ...formData } : item
            )
          );
          showToast("Pengumuman kegiatan berhasil diperbarui.");
        } else {
          throw new Error("Gagal memperbarui pengumuman.");
        }
      } else {
        // Add new
        const res = await fetch("/api/announcements", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            nama_kegiatan: formData.namaKegiatan,
            tanggal_awal: formData.tanggalAwal,
            tanggal_akhir: formData.tanggalAkhir,
            target_x: formData.targetX ? 1 : 0,
            target_xi: formData.targetXI ? 1 : 0,
            target_xii: formData.targetXII ? 1 : 0,
          }),
        });
        if (res.ok) {
          const json = await res.json();
          const newItem: AnnouncementItem = {
            id: json.data?.id || Date.now(),
            namaKegiatan: formData.namaKegiatan,
            tanggalAwal: formData.tanggalAwal,
            tanggalAkhir: formData.tanggalAkhir,
            targetX: formData.targetX,
            targetXI: formData.targetXI,
            targetXII: formData.targetXII,
          };
          setData((prev) => [newItem, ...prev]);
          showToast("Pengumuman kegiatan baru berhasil ditambahkan.");
        } else {
          throw new Error("Gagal menambahkan pengumuman.");
        }
      }
    } catch {
      // Local optimistic fallback
      if (editingItem) {
        setData((prev) =>
          prev.map((item) =>
            item.id === editingItem.id ? { ...item, ...formData } : item
          )
        );
        showToast("Pengumuman berhasil diperbarui (mode lokal).");
      } else {
        const newItem: AnnouncementItem = {
          id: Date.now(),
          ...formData,
        };
        setData((prev) => [newItem, ...prev]);
        showToast("Pengumuman berhasil ditambahkan (mode lokal).");
      }
    } finally {
      setIsSubmitting(false);
      setModalOpen(false);
    }
  };

  const handleConfirmDelete = async () => {
    if (!deleteItem) return;
    setIsSubmitting(true);
    try {
      await fetch(`/api/announcements?id=${deleteItem.id}`, {
        method: "DELETE",
      });
      setData((prev) => prev.filter((item) => item.id !== deleteItem.id));
      showToast(`Kegiatan "${deleteItem.namaKegiatan}" berhasil dihapus.`);
    } catch {
      setData((prev) => prev.filter((item) => item.id !== deleteItem.id));
      showToast("Data dihapus secara lokal.");
    } finally {
      setIsSubmitting(false);
      setDeleteItem(null);
    }
  };

  // Bulk Import
  const handleBulkImport = async (importedItems: AnnouncementFormData[]) => {
    setIsSubmitting(true);
    try {
      const res = await fetch("/api/announcements", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(
          importedItems.map((item) => ({
            nama_kegiatan: item.namaKegiatan,
            tanggal_awal: item.tanggalAwal,
            tanggal_akhir: item.tanggalAkhir,
            target_x: item.targetX ? 1 : 0,
            target_xi: item.targetXI ? 1 : 0,
            target_xii: item.targetXII ? 1 : 0,
          }))
        ),
      });

      if (res.ok) {
        await fetchAnnouncements();
        showToast(`Berhasil mengimpor ${importedItems.length} kegiatan.`);
      } else {
        throw new Error("Gagal mengimpor ke server");
      }
    } catch {
      // Optimistic local add
      const newItems: AnnouncementItem[] = importedItems.map((item, idx) => ({
        id: Date.now() + idx,
        ...item,
      }));
      setData((prev) => [...newItems, ...prev]);
      showToast(`Berhasil mengimpor ${importedItems.length} kegiatan (mode lokal).`);
    } finally {
      setIsSubmitting(false);
    }
  };

  // Excel Template Download
  const handleDownloadTemplate = () => {
    const templateRows = [
      {
        No: 1,
        "Nama Kegiatan": "Gladi TKA dan AN",
        "Tanggal Awal": "2026-10-06",
        "Tanggal Akhir": "2026-10-08",
        "Kelas X": "Tidak",
        "Kelas XI": "Ya",
        "Kelas XII": "Tidak",
      },
      {
        No: 2,
        "Nama Kegiatan": "Bloking Kokurikuler XI (Disiplin Positif)",
        "Tanggal Awal": "2026-10-13",
        "Tanggal Akhir": "2026-10-17",
        "Kelas X": "Tidak",
        "Kelas XI": "Ya",
        "Kelas XII": "Tidak",
      },
      {
        No: 3,
        "Nama Kegiatan": "Pembagian Rapot Bulanan Ke -2 (ASTS)",
        "Tanggal Awal": "2026-10-24",
        "Tanggal Akhir": "2026-10-24",
        "Kelas X": "Ya",
        "Kelas XI": "Ya",
        "Kelas XII": "Ya",
      },
    ];

    const ws = XLSX.utils.json_to_sheet(templateRows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Template Pengumuman");
    XLSX.writeFile(wb, "template_pengumuman_kegiatan_bpi.xlsx");
    showToast("Template Excel berhasil diunduh.");
  };

  // Export to Excel
  const handleExportExcel = () => {
    if (data.length === 0) {
      alert("Tidak ada data pengumuman untuk diekspor.");
      return;
    }

    const exportRows = data.map((item, idx) => ({
      No: idx + 1,
      "Nama Kegiatan": item.namaKegiatan,
      "Tanggal Awal": item.tanggalAwal,
      "Tanggal Akhir": item.tanggalAkhir,
      "Kelas X": item.targetX ? "Ya" : "-",
      "Kelas XI": item.targetXI ? "Ya" : "-",
      "Kelas XII": item.targetXII ? "Ya" : "-",
    }));

    const ws = XLSX.utils.json_to_sheet(exportRows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Pengumuman Kegiatan");
    XLSX.writeFile(wb, `daftar_pengumuman_kegiatan_bpi_${new Date().toISOString().split("T")[0]}.xlsx`);
    showToast("Data pengumuman berhasil diekspor ke Excel.");
  };

  // Print & PDF
  const handlePrint = () => {
    window.print();
  };

  const handlePdf = () => {
    window.print();
  };

  const startRecord = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
  const endRecord = Math.min(currentPage * pageSize, totalItems);

  return (
    <div className="space-y-6 print:m-0 print:p-0 print:space-y-4 printable-document printable-area">
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed bottom-6 right-6 z-50 bg-slate-900 text-white px-4 py-3 rounded-xl shadow-2xl flex items-center gap-2.5 text-xs font-semibold animate-in slide-in-from-bottom-2 duration-200">
          <CheckCircle2 className="w-4 h-4 text-emerald-400" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* Official Print Header (Only visible on Print) */}
      <div className="hidden print:block pb-2 mb-4">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/images/kop-surat-bpi.png"
          alt="KOP SURAT RESMI YAYASAN BPI - SMA BPI 1 BANDUNG"
          className="w-full h-auto object-contain block mx-auto mb-3"
        />
        <div className="text-center">
          <h2 className="text-sm font-bold uppercase text-slate-900 tracking-wider">
            DAFTAR AGENDA PENGUMUMAN & KEGIATAN SEKOLAH
          </h2>
          <p className="text-[10px] text-slate-500 mt-0.5">
            Tahun Ajaran {brandConfig.academicYear.current} • Dicetak pada:{" "}
            {new Date().toLocaleDateString("id-ID", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </p>
        </div>
      </div>

      {/* Top Page Header & Title */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 print:hidden">
        <div>
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-blue-100 text-brand-blue flex items-center justify-center shrink-0">
              <Megaphone className="w-5 h-5" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-slate-900">
                Pengumuman / Kegiatan Sekolah
              </h1>
              <p className="text-xs text-slate-500 mt-0.5">
                Kelola kalender agenda kegiatan akademik dan target sasaran tingkat kelas SMA BPI 1 Bandung
              </p>
            </div>
          </div>
        </div>

        <button
          onClick={fetchAnnouncements}
          disabled={loading}
          className="self-start md:self-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 text-xs font-semibold transition-colors shadow-2xs"
          title="Segarkan data dari server"
        >
          <RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
          <span>Refresh</span>
        </button>
      </div>

      {/* ================================================== */}
      {/* BAGIAN 1: HEADER & ACTION TOOLBAR                  */}
      {/* ================================================== */}
      <div className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs space-y-4 print:hidden">
        <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3">
          {/* 1. Input Search & Filter Bulan/Tahun */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 flex-1 max-w-2xl">
            <div className="relative flex-1">
              <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Cari agenda kegiatan..."
                className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all font-medium"
              />
              {search && (
                <button
                  onClick={() => setSearch("")}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 hover:text-slate-600"
                >
                  ✕
                </button>
              )}
            </div>

            <div className="flex items-center gap-2">
              <select
                value={filterBulan}
                onChange={(e) => setFilterBulan(e.target.value)}
                className="px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                title="Filter Bulan"
              >
                <option value="Semua">Semua Bulan</option>
                <option value="1">Januari</option>
                <option value="2">Februari</option>
                <option value="3">Maret</option>
                <option value="4">April</option>
                <option value="5">Mei</option>
                <option value="6">Juni</option>
                <option value="7">Juli</option>
                <option value="8">Agustus</option>
                <option value="9">September</option>
                <option value="10">Oktober</option>
                <option value="11">November</option>
                <option value="12">Desember</option>
              </select>

              <select
                value={filterTahun}
                onChange={(e) => setFilterTahun(e.target.value)}
                className="px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 cursor-pointer"
                title="Filter Tahun"
              >
                <option value="Semua">Semua Tahun</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                <option value="2026">2026</option>
                <option value="2027">2027</option>
                <option value="2028">2028</option>
                <option value="2029">2029</option>
                <option value="2030">2030</option>
              </select>
            </div>
          </div>

          {/* Group Tombol Aksi (Outline/White Buttons) & Tombol Utama (+ Tambah) */}
          <div className="flex flex-wrap items-center gap-2">
            {/* Outline Button: Template */}
            <button
              type="button"
              onClick={handleDownloadTemplate}
              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-2xs"
              title="Unduh format template Excel untuk import data"
            >
              <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-600" />
              <span>Template</span>
            </button>

            {/* Outline Button: Export */}
            <button
              type="button"
              onClick={handleExportExcel}
              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-2xs"
              title="Ekspor seluruh daftar pengumuman ke Excel"
            >
              <Download className="w-3.5 h-3.5 text-blue-600" />
              <span>Export</span>
            </button>

            {/* Outline Button: Import */}
            <button
              type="button"
              onClick={() => setImportModalOpen(true)}
              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-2xs"
              title="Import data pengumuman dari file Excel"
            >
              <Upload className="w-3.5 h-3.5 text-indigo-600" />
              <span>Import</span>
            </button>

            {/* Outline Button: Cetak */}
            <button
              type="button"
              onClick={handlePrint}
              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-2xs"
              title="Cetak tabel pengumuman"
            >
              <Printer className="w-3.5 h-3.5 text-slate-600" />
              <span>Cetak</span>
            </button>

            {/* Outline Button: PDF */}
            <button
              type="button"
              onClick={handlePdf}
              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-2xs"
              title="Unduh rekap tabel pengumuman dalam format PDF"
            >
              <FileText className="w-3.5 h-3.5 text-rose-600" />
              <span>PDF</span>
            </button>

            {/* Tombol Utama (Primary Dark Button): + Tambah */}
            <button
              type="button"
              onClick={handleOpenAddModal}
              className="flex items-center gap-1.5 px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-bold transition-all shadow-sm hover:shadow-md"
            >
              <Plus className="w-3.5 h-3.5" />
              <span>+ Tambah</span>
            </button>
          </div>
        </div>
      </div>

      {/* ================================================== */}
      {/* BAGIAN 2: STRUCTURE & TAMPILAN TABEL               */}
      {/* ================================================== */}
      <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden print:border-none print:shadow-none">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse print:text-[11px]">
            {/* Header Tabel */}
            <thead>
              <tr className="bg-slate-100/80 border-b border-slate-200 text-slate-700 font-bold uppercase tracking-wider print:bg-slate-200">
                <th className="py-3 px-3 text-center w-12 border-r border-slate-200/60">No</th>
                <th className="py-3 px-4 min-w-[240px] border-r border-slate-200/60">Nama Kegiatan</th>
                <th className="py-3 px-3.5 min-w-[120px] text-center border-r border-slate-200/60">Tanggal Awal</th>
                <th className="py-3 px-3.5 min-w-[120px] text-center border-r border-slate-200/60">Tanggal Akhir</th>
                <th className="py-3 px-3 w-20 text-center border-r border-slate-200/60">Kelas X</th>
                <th className="py-3 px-3 w-20 text-center border-r border-slate-200/60">Kelas XI</th>
                <th className="py-3 px-3 w-20 text-center border-r border-slate-200/60">Kelas XII</th>
                <th className="py-3 px-3 w-24 text-center print:hidden">Aksi</th>
              </tr>
            </thead>

            {/* Body Tabel */}
            <tbody className="divide-y divide-slate-100 print:divide-slate-300">
              {paginatedData.length === 0 ? (
                <tr>
                  <td colSpan={8} className="py-12 text-center text-slate-400">
                    <div className="flex flex-col items-center justify-center gap-2">
                      <Megaphone className="w-8 h-8 text-slate-300" />
                      <p className="text-sm font-semibold text-slate-600">
                        {search ? "Tidak ada kegiatan yang sesuai pencarian" : "Belum ada agenda pengumuman"}
                      </p>
                      <p className="text-xs text-slate-400">
                        {search
                          ? `Pencarian "${search}" tidak menemukan hasil`
                          : "Klik tombol '+ Tambah' untuk membuat agenda kegiatan baru"}
                      </p>
                    </div>
                  </td>
                </tr>
              ) : (
                paginatedData.map((item, index) => {
                  const rowNumber = (currentPage - 1) * pageSize + index + 1;

                  return (
                    <tr
                      key={item.id}
                      className="hover:bg-slate-50/80 transition-colors group"
                    >
                      {/* Kolom 1: No */}
                      <td className="py-3 px-3 text-center font-semibold text-slate-400 border-r border-slate-100">
                        {rowNumber}
                      </td>

                      {/* Kolom 2: Nama Kegiatan */}
                      <td className="py-3 px-4 font-semibold text-slate-800 border-r border-slate-100">
                        <div className="flex items-center gap-2">
                          <span>{item.namaKegiatan}</span>
                        </div>
                      </td>

                      {/* Kolom 3: Tanggal Awal */}
                      <td className="py-3 px-3.5 text-center text-slate-600 font-mono text-[11px] border-r border-slate-100">
                        {item.tanggalAwal}
                      </td>

                      {/* Kolom 4: Tanggal Akhir */}
                      <td className="py-3 px-3.5 text-center text-slate-600 font-mono text-[11px] border-r border-slate-100">
                        {item.tanggalAkhir}
                      </td>

                      {/* Kolom 5: Kelas X */}
                      <td className="py-3 px-3 text-center border-r border-slate-100">
                        {item.targetX ? (
                          <span className="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                            Ya
                          </span>
                        ) : (
                          <span className="text-slate-400 font-bold">-</span>
                        )}
                      </td>

                      {/* Kolom 6: Kelas XI */}
                      <td className="py-3 px-3 text-center border-r border-slate-100">
                        {item.targetXI ? (
                          <span className="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                            Ya
                          </span>
                        ) : (
                          <span className="text-slate-400 font-bold">-</span>
                        )}
                      </td>

                      {/* Kolom 7: Kelas XII */}
                      <td className="py-3 px-3 text-center border-r border-slate-100">
                        {item.targetXII ? (
                          <span className="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                            Ya
                          </span>
                        ) : (
                          <span className="text-slate-400 font-bold">-</span>
                        )}
                      </td>

                      {/* Kolom 8: Aksi (Edit & Hapus) */}
                      <td className="py-3 px-3 text-center print:hidden">
                        <div className="flex items-center justify-center gap-1.5">
                          {/* Ikon Edit (Pensil) */}
                          <button
                            type="button"
                            onClick={() => handleOpenEditModal(item)}
                            className="p-1.5 rounded-lg text-slate-500 hover:text-blue-600 hover:bg-blue-50 transition-colors"
                            title="Edit pengumuman kegiatan"
                          >
                            <Pencil className="w-4 h-4" />
                          </button>

                          {/* Ikon Hapus (Tong Sampah Merah) */}
                          <button
                            type="button"
                            onClick={() => setDeleteItem(item)}
                            className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors"
                            title="Hapus pengumuman kegiatan"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* ================================================== */}
        {/* BAGIAN 4: FOOTER & PAGINASI                        */}
        {/* ================================================== */}
        <div className="px-4 py-3 bg-slate-50/60 border-t border-slate-200/80 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs print:hidden">
          {/* Teks Rekapitulasi Data (Kiri Bawah) */}
          <div className="text-slate-500 font-medium">
            Menampilkan <span className="font-bold text-slate-700">{startRecord}–{endRecord}</span> dari{" "}
            <span className="font-bold text-slate-700">{totalItems}</span> data
          </div>

          {/* Kontrol Paginasi (Kanan Bawah) */}
          <div className="flex items-center gap-1.5">
            <button
              type="button"
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage <= 1}
              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed font-medium transition-colors shadow-2xs"
            >
              <ChevronLeft className="w-3.5 h-3.5" />
              <span>Sebelumnya</span>
            </button>

            <span className="px-3 py-1.5 rounded-lg bg-slate-100 text-slate-700 font-bold text-xs">
              Hal. {currentPage} / {totalPages}
            </span>

            <button
              type="button"
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage >= totalPages}
              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed font-medium transition-colors shadow-2xs"
            >
              <span>Berikutnya</span>
              <ChevronRight className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>
      </div>

      {/* Print Signature Footer */}
      <div className="hidden print:grid grid-cols-2 pt-12 text-center text-xs signature-block signature-section">
        <div>
          <p className="text-slate-500">Mengetahui,</p>
          <p className="font-bold text-slate-800 mt-0.5">{getOfficial("kepala_sekolah").title}</p>
          <div className="h-16" />
          <p className="font-bold text-slate-800 underline">{getOfficial("kepala_sekolah").name}</p>
          <p className="text-slate-500 text-[10px]">{getOfficial("kepala_sekolah").nip}</p>
        </div>
        <div>
          <p className="text-slate-500">Bandung, {new Date().toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}</p>
          <p className="font-bold text-slate-800 mt-0.5">{getOfficial("wakasek_kurikulum").title}</p>
          <div className="h-16" />
          <p className="font-bold text-slate-800 underline">{getOfficial("wakasek_kurikulum").name}</p>
          <p className="text-slate-500 text-[10px]">{getOfficial("wakasek_kurikulum").nip}</p>
        </div>
      </div>

      {/* Modal Form Tambah / Edit */}
      <AnnouncementModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        onSubmit={handleSaveAnnouncement}
        initialData={editingItem}
        isSubmitting={isSubmitting}
      />

      {/* Modal Bulk Import Excel */}
      <AnnouncementImportModal
        isOpen={importModalOpen}
        onClose={() => setImportModalOpen(false)}
        onImport={handleBulkImport}
        onDownloadTemplate={handleDownloadTemplate}
      />

      {/* Modal Hapus Konfirmasi */}
      <AnnouncementDeleteDialog
        isOpen={Boolean(deleteItem)}
        item={deleteItem}
        onClose={() => setDeleteItem(null)}
        onConfirm={handleConfirmDelete}
        isDeleting={isSubmitting}
      />
    </div>
  );
}