"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import Link from "next/link";
import {
  Megaphone,
  MessageSquareText,
  Handshake,
  BookOpen,
  CalendarDays,
  CheckCircle2,
  Clock,
  ArrowRight,
  TrendingUp,
  Users,
  Building2,
  FileText,
  AlertCircle,
  Sparkles,
  LayoutDashboard,
  Calendar,
  ExternalLink,
  Copy,
  Check,
  ChevronRight,
  Plus,
  RefreshCw,
  Printer,
  ShieldCheck,
  Building,
  GraduationCap,
  Eye,
  FileCheck,
} from "lucide-react";
import { PageHeader } from "@/components/shared/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";

interface PengaduanItem {
  id: number;
  nomor_tiket: string;
  tanggal: string;
  nama_pelapor: string;
  kategori_pelapor: string;
  kategori_topik: string;
  uraian: string;
  status: "Baru" | "Diproses" | "Selesai";
  disposisi_catatan?: string | null;
}

interface KemitraanItem {
  id: number;
  nama_mitra: string;
  kategori_mitra: string;
  bidang_kerjasama: string;
  nomor_mou?: string | null;
  tanggal_mulai: string;
  tanggal_berakhir: string;
  status: "Aktif" | "Perpanjangan" | "Selesai" | "Tidak Aktif";
}

interface BukuTamuItem {
  id: number;
  tanggal: string;
  waktu_masuk: string;
  waktu_keluar?: string | null;
  nama_tamu: string;
  instansi_asal: string;
  keperluan: string;
  personel_dituju: string;
  status: "Menunggu" | "Sedang Bertemu" | "Selesai";
  jumlah_rombongan: number;
}

interface AgendaItem {
  id: number;
  tanggal: string;
  judul: string;
  kegiatan_list: string;
  catatan_imbauan?: string | null;
  whatsapp_text?: string | null;
  is_broadcasted: number;
}

export default function HumasDashboardPage() {
  const [loading, setLoading] = useState<boolean>(true);
  const [refreshing, setRefreshing] = useState<boolean>(false);
  const [copiedWA, setCopiedWA] = useState<boolean>(false);

  // Data states
  const [pengaduanList, setPengaduanList] = useState<PengaduanItem[]>([]);
  const [pengaduanStats, setPengaduanStats] = useState({
    total: 0,
    belumDiproses: 0,
    proses: 0,
    selesai: 0,
    selesaiBulanIni: 0,
  });
  const [kemitraanList, setKemitraanList] = useState<KemitraanItem[]>([]);
  const [bukuTamuList, setBukuTamuList] = useState<BukuTamuItem[]>([]);
  const [agendaList, setAgendaList] = useState<AgendaItem[]>([]);

  // Current today string in YYYY-MM-DD
  const todayStr = useMemo(() => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
  }, []);

  const [currentDate, setCurrentDate] = useState<Date>(() => new Date());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentDate(new Date());
    }, 60000);
    return () => clearInterval(timer);
  }, []);

  const dayNames = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
  const monthNames = [
    "Januari", "Februari", "Maret", "April", "Mei", "Juni",
    "Juli", "Agustus", "September", "Oktober", "November", "Desember",
  ];

  const currentDayName = dayNames[currentDate.getDay()];
  const currentDayNum = currentDate.getDate();
  const currentMonthIdx = currentDate.getMonth();
  const currentMonthName = monthNames[currentMonthIdx];
  const currentYear = currentDate.getFullYear();
  const formattedFullDate = `${currentDayName}, ${currentDayNum} ${currentMonthName} ${currentYear}`;
  const currentSemester = currentMonthIdx >= 6 ? "Ganjil" : "Genap";
  const academicYear =
    currentMonthIdx >= 6
      ? `${currentYear}/${currentYear + 1}`
      : `${currentYear - 1}/${currentYear}`;

  const todayFormattedID = formattedFullDate;

  const loadAllData = useCallback(async () => {
    try {
      const [resPengaduan, resMitra, resTamu, resAgenda] = await Promise.all([
        fetch("/api/humas/pengaduan-aspirasi").then((r) => r.json()),
        fetch("/api/humas/kemitraan").then((r) => r.json()),
        fetch("/api/humas/buku-tamu").then((r) => r.json()),
        fetch("/api/humas/agenda-harian").then((r) => r.json()),
      ]);

      if (resPengaduan?.success) {
        setPengaduanList(resPengaduan.data || []);
        if (resPengaduan.stats) {
          setPengaduanStats(resPengaduan.stats);
        }
      }

      if (resMitra?.success) {
        setKemitraanList(resMitra.data || []);
      }

      if (resTamu?.success) {
        setBukuTamuList(resTamu.data || []);
      }

      if (resAgenda?.success) {
        setAgendaList(resAgenda.data || []);
      }
    } catch (err) {
      console.error("Gagal memuat data Humas Dashboard:", err);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

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

  const handleRefresh = () => {
    setRefreshing(true);
    loadAllData();
  };

  // Filtered & computed metrics
  const tamuHariIniList = useMemo(() => {
    return bukuTamuList.filter((t) => t.tanggal === todayStr);
  }, [bukuTamuList, todayStr]);

  const tamuSedangBertemu = useMemo(() => {
    return tamuHariIniList.filter((t) => t.status === "Sedang Bertemu" || t.status === "Menunggu").length;
  }, [tamuHariIniList]);

  const kemitraanAktifCount = useMemo(() => {
    return kemitraanList.filter((m) => m.status === "Aktif").length;
  }, [kemitraanList]);

  // Today's agenda or latest agenda
  const activeAgenda = useMemo(() => {
    const todayAgenda = agendaList.find((a) => a.tanggal === todayStr);
    if (todayAgenda) return todayAgenda;
    return agendaList[0] || null;
  }, [agendaList, todayStr]);

  // Parse activities list of active agenda
  const parsedKegiatanList = useMemo(() => {
    if (!activeAgenda?.kegiatan_list) return [];
    try {
      if (typeof activeAgenda.kegiatan_list === "string") {
        return JSON.parse(activeAgenda.kegiatan_list);
      }
      return activeAgenda.kegiatan_list;
    } catch {
      return [];
    }
  }, [activeAgenda]);

  // Handle Copy WA Broadcast
  const handleCopyWA = () => {
    if (!activeAgenda?.whatsapp_text) return;
    navigator.clipboard.writeText(activeAgenda.whatsapp_text);
    setCopiedWA(true);
    setTimeout(() => setCopiedWA(false), 2500);
  };

  const subModules = [
    {
      title: "Agenda & Pengumuman Harian",
      href: "/humas/agenda-pengumuman",
      icon: Megaphone,
      color: "bg-blue-600",
      lightColor: "bg-blue-50 text-blue-700 border-blue-200",
      description:
        "Broadcast agenda harian dinas guru via WhatsApp, kalender kegiatan, dan integrasi pengumuman kedinasan.",
      badge: `${agendaList.length} Agenda Terjadwal`,
      btnText: "Buka Broadcast Agenda",
    },
    {
      title: "Pengaduan & Aspirasi (PR Desk)",
      href: "/humas/pengaduan-aspirasi",
      icon: MessageSquareText,
      color: "bg-rose-600",
      lightColor: "bg-rose-50 text-rose-700 border-rose-200",
      description:
        "Public Relation Desk untuk menerima, mengelola tindak lanjut, dan memonitor pengaduan orang tua serta publik.",
      badge: `${pengaduanStats.belumDiproses} Perlu Respon`,
      btnText: "Buka Tiket Pengaduan",
    },
    {
      title: "Kemitraan & Dokumen MoU",
      href: "/humas/kemitraan-mou",
      icon: Handshake,
      color: "bg-emerald-600",
      lightColor: "bg-emerald-50 text-emerald-700 border-emerald-200",
      description:
        "Pengelolaan arsip perjanjian kerjasama formal sekolah dengan perguruan tinggi (PTN/PTS), instansi dinas, dan DUDI.",
      badge: `${kemitraanAktifCount} MoU Aktif`,
      btnText: "Kelola Dokumen Mitra",
    },
    {
      title: "Buku Tamu Digital",
      href: "/humas/buku-tamu",
      icon: BookOpen,
      color: "bg-amber-600",
      lightColor: "bg-amber-50 text-amber-700 border-amber-200",
      description:
        "Pencatatan digital kunjungan tamu dinas, orang tua siswa, dan perwakilan luar instansi secara tertib.",
      badge: `${tamuHariIniList.length} Tamu Hari Ini`,
      btnText: "Buka Catatan Tamu",
    },
  ];

  return (
    <div className="space-y-6 pb-12">
      {/* 1. Page Header (Sesuai Dashboard Sarana & Prasarana) */}
      <PageHeader
        title="Dashboard Humas"
        description="Pusat informasi kedinasan, public relations desk, kemitraan eksternal, dan buku tamu dinas SMA BPI 1 Bandung."
        badge={
          <div className="flex items-center gap-2">
            <Badge variant="info" className="font-mono text-xs">
              Tahun Ajaran {academicYear} • Semester {currentSemester}
            </Badge>
            <span className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
              Real-Time ({currentMonthName} {currentYear})
            </span>
          </div>
        }
        actions={
          <div className="flex items-center gap-2">
            <Link href="/humas/agenda-pengumuman">
              <Button variant="outline" size="sm" leftIcon={<Megaphone className="w-4 h-4" />}>
                Agenda Harian
              </Button>
            </Link>
            <Link href="/humas/agenda-pengumuman">
              <Button variant="primary" size="sm" leftIcon={<Plus className="w-4 h-4" />}>
                Broadcast Baru
              </Button>
            </Link>
          </div>
        }
      />

      {/* 2. Real-Time Live Status Bar (Light Card Banner Sesuai Sarpras) */}
      <div className="bg-gradient-to-r from-blue-50/90 via-indigo-50/60 to-emerald-50/50 border border-blue-200 rounded-xl p-4 shadow-xs">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shadow-xs shrink-0">
              <Megaphone className="w-5 h-5 text-white" />
            </div>
            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <span className="font-bold text-sm text-slate-900">
                  Status Operasional Humas Real-Time: {formattedFullDate}
                </span>
                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-800 border border-emerald-300">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-600 animate-ping" />
                  Bulan Berjalan: {currentMonthName} {currentYear}
                </span>
              </div>
              <p className="text-xs text-slate-600 mt-0.5">
                Sinkronisasi otomatis dengan Database SIMS BPI 1 Bandung •{" "}
                <strong>{pengaduanStats.total} Tiket Pengaduan, {kemitraanAktifCount} MoU Aktif & {tamuHariIniList.length} Tamu Hari Ini</strong>.
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <Button
              variant="primary"
              size="sm"
              onClick={handleRefresh}
              disabled={refreshing}
              className="shadow-xs"
              leftIcon={<RefreshCw className={`w-3.5 h-3.5 ${refreshing ? "animate-spin" : ""}`} />}
            >
              Real-Time Sync
            </Button>
          </div>
        </div>
      </div>

      {/* 3. Top Metrics StatCards Grid (Real-Time Synchronized) */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Total Pengaduan Masuk"
          value={loading ? "..." : `${pengaduanStats.total} Tiket`}
          subtitle={`${pengaduanStats.belumDiproses} Perlu Tindak Lanjut`}
          icon={MessageSquareText}
          variant="primary"
        />

        <StatCard
          title="Kemitraan & MoU Aktif"
          value={loading ? "..." : `${kemitraanAktifCount} Mitra`}
          subtitle={`${kemitraanList.length} Total Kerjasama Institusi`}
          icon={Handshake}
          variant="success"
        />

        <StatCard
          title="Tamu Dinas Hari Ini"
          value={loading ? "..." : `${tamuHariIniList.length} Tamu`}
          subtitle={`${tamuSedangBertemu} Sedang Berkunjung`}
          icon={BookOpen}
          variant="warning"
        />

        <StatCard
          title="Agenda & Siaran Hari Ini"
          value={loading ? "..." : `${parsedKegiatanList.length} Agenda`}
          subtitle={activeAgenda?.is_broadcasted ? "Broadcast Terkirim" : "Siap Siar WhatsApp"}
          icon={Megaphone}
          variant="purple"
        />
      </div>

      {/* Grid Sub-Menu Access Cards */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
            <LayoutDashboard className="w-4 h-4 text-blue-600" />
            <span>Sub-Menu Layanan Humas</span>
          </h3>
          <span className="text-xs text-slate-500 font-medium">4 Modul Terintegrasi</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {subModules.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                className="group relative bg-white rounded-2xl border border-slate-200/80 p-5 hover:shadow-lg hover:border-blue-300 transition-all duration-200 flex flex-col justify-between"
              >
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <div
                      className={`w-10 h-10 rounded-xl ${item.color} text-white flex items-center justify-center shadow-md shadow-blue-500/10 group-hover:scale-105 transition-transform`}
                    >
                      <Icon className="w-5 h-5" />
                    </div>
                    <span
                      className={`px-2.5 py-0.5 rounded-full text-[11px] font-bold border ${item.lightColor}`}
                    >
                      {item.badge}
                    </span>
                  </div>

                  <h4 className="text-sm font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
                    {item.title}
                  </h4>
                  <p className="text-xs text-slate-500 mt-1.5 leading-relaxed line-clamp-2">
                    {item.description}
                  </p>
                </div>

                <div className="mt-4 pt-3 border-t border-slate-100 flex items-center justify-between text-xs font-bold text-blue-600 group-hover:text-blue-700">
                  <span>{item.btnText}</span>
                  <ArrowRight className="w-3.5 h-3.5 transform group-hover:translate-x-1 transition-transform" />
                </div>
              </Link>
            );
          })}
        </div>
      </div>

      {/* 2-Columns Interactive Dashboard Widgets */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Left Column (7 cols): Tiket Pengaduan Terbaru & Kunjungan Tamu */}
        <div className="lg:col-span-7 space-y-6">
          {/* Widget 1: Tiket Pengaduan & Aspirasi Terbaru */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="w-8 h-8 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center">
                  <MessageSquareText className="w-4 h-4" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-slate-900">
                    Tiket Pengaduan & Aspirasi Terbaru
                  </h3>
                  <p className="text-xs text-slate-500">Public Relation Desk SMA BPI 1</p>
                </div>
              </div>
              <Link
                href="/humas/pengaduan-aspirasi"
                className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1"
              >
                <span>Lihat Semua</span>
                <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

            <div className="p-0">
              {loading ? (
                <div className="p-8 text-center text-xs text-slate-400">Memuat data tiket...</div>
              ) : pengaduanList.length === 0 ? (
                <div className="p-8 text-center text-xs text-slate-400">
                  Belum ada tiket aspirasi atau pengaduan masuk.
                </div>
              ) : (
                <div className="divide-y divide-slate-100">
                  {pengaduanList.slice(0, 4).map((item) => (
                    <div key={item.id} className="p-4 hover:bg-slate-50/60 transition-colors flex items-start justify-between gap-3">
                      <div className="space-y-1 min-w-0 flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-md">
                            {item.nomor_tiket}
                          </span>
                          <span className="text-xs font-semibold text-slate-800 truncate">
                            {item.nama_pelapor}
                          </span>
                          <span className="text-[10px] text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
                            {item.kategori_pelapor}
                          </span>
                        </div>
                        <p className="text-xs text-slate-600 line-clamp-2">
                          {item.uraian}
                        </p>
                        <div className="flex items-center gap-3 text-[11px] text-slate-400 pt-0.5">
                          <span>Topik: <strong className="text-slate-600">{item.kategori_topik}</strong></span>
                          <span>•</span>
                          <span>Tgl: {item.tanggal}</span>
                        </div>
                      </div>

                      <div className="shrink-0 flex flex-col items-end gap-1.5">
                        <span
                          className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${
                            item.status === "Selesai"
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : item.status === "Diproses"
                              ? "bg-blue-50 text-blue-700 border-blue-200"
                              : "bg-rose-50 text-rose-700 border-rose-200"
                          }`}
                        >
                          {item.status}
                        </span>
                        <Link
                          href="/humas/pengaduan-aspirasi"
                          className="text-[11px] text-slate-500 hover:text-blue-600 font-semibold"
                        >
                          Detail Tiket
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="p-3 bg-slate-50 border-t border-slate-100 text-center">
              <Link
                href="/humas/pengaduan-aspirasi"
                className="text-xs font-bold text-slate-600 hover:text-blue-600 transition-colors inline-flex items-center gap-1.5"
              >
                <span>Kelola & Tindak Lanjut Pengaduan</span>
                <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </div>

          {/* Widget 2: Buku Tamu & Kunjungan Dinas */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="w-8 h-8 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center">
                  <BookOpen className="w-4 h-4" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-slate-900">
                    Buku Tamu Digital (Kunjungan Hari Ini)
                  </h3>
                  <p className="text-xs text-slate-500">Catatan tamu pimpinan & dinas</p>
                </div>
              </div>
              <Link
                href="/humas/buku-tamu"
                className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1"
              >
                <span>Buka Buku Tamu</span>
                <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

            <div className="p-0">
              {loading ? (
                <div className="p-8 text-center text-xs text-slate-400">Memuat catatan tamu...</div>
              ) : tamuHariIniList.length === 0 ? (
                <div className="p-8 text-center text-xs text-slate-400">
                  Belum ada catatan tamu dinas untuk hari ini.
                </div>
              ) : (
                <div className="divide-y divide-slate-100">
                  {tamuHariIniList.slice(0, 4).map((tamu) => (
                    <div key={tamu.id} className="p-4 hover:bg-slate-50/60 transition-colors flex items-start justify-between gap-3">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-bold text-slate-900">
                            {tamu.nama_tamu}
                          </span>
                          <span className="text-[10px] text-amber-700 bg-amber-50 px-2 py-0.5 rounded font-semibold border border-amber-200/60">
                            {tamu.instansi_asal}
                          </span>
                        </div>
                        <p className="text-xs text-slate-600">
                          {tamu.keperluan}
                        </p>
                        <div className="text-[11px] text-slate-400">
                          Menemui: <strong className="text-slate-600">{tamu.personel_dituju}</strong> • Jam Masuk: {tamu.waktu_masuk}
                        </div>
                      </div>

                      <div className="shrink-0 flex flex-col items-end gap-1">
                        <span
                          className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${
                            tamu.status === "Selesai"
                              ? "bg-slate-100 text-slate-700 border-slate-200"
                              : tamu.status === "Sedang Bertemu"
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : "bg-amber-50 text-amber-700 border-amber-200"
                          }`}
                        >
                          {tamu.status}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Right Column (5 cols): Agenda Hari Ini & Preview WA Broadcast + Mitra Aktif */}
        <div className="lg:col-span-5 space-y-6">
          {/* Widget 3: Live Broadcast Agenda Harian */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                  <Megaphone className="w-4 h-4" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-slate-900">
                    Agenda Kedinasan Hari Ini
                  </h3>
                  <p className="text-xs text-slate-500">Live Preview WhatsApp Siap Kirim</p>
                </div>
              </div>
              <button
                type="button"
                onClick={handleCopyWA}
                disabled={!activeAgenda?.whatsapp_text}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg text-xs font-bold transition-colors cursor-pointer disabled:opacity-40"
              >
                {copiedWA ? (
                  <>
                    <Check className="w-3.5 h-3.5 text-emerald-600" />
                    <span>Tersalin!</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-3.5 h-3.5" />
                    <span>Copy Teks WA</span>
                  </>
                )}
              </button>
            </div>

            <div className="p-5 space-y-4">
              {activeAgenda ? (
                <>
                  <div>
                    <div className="text-xs font-bold text-slate-800">{activeAgenda.judul}</div>
                    <div className="text-[11px] text-slate-500 mt-0.5">Tanggal: {activeAgenda.tanggal}</div>
                  </div>

                  {/* Kegiatan List */}
                  <div className="space-y-2">
                    <div className="text-xs font-bold text-slate-700">Rangkaian Kegiatan:</div>
                    <div className="space-y-1.5 max-h-48 overflow-y-auto pr-1">
                      {parsedKegiatanList.map((k: any, idx: number) => (
                        <div key={idx} className="p-2.5 rounded-xl bg-slate-50 border border-slate-100 text-xs flex items-start gap-2.5">
                          <span className="font-mono font-bold text-blue-600 shrink-0">
                            {k.jam}
                          </span>
                          <div className="min-w-0 flex-1">
                            <div className="font-semibold text-slate-800">{k.kegiatan}</div>
                            <div className="text-[11px] text-slate-500">
                              {k.tempat} • {k.petugas}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* WhatsApp Preview Text Box */}
                  {activeAgenda.whatsapp_text && (
                    <div className="pt-2">
                      <div className="text-xs font-bold text-slate-700 mb-1.5">Teks Siaran WhatsApp:</div>
                      <div className="p-3 bg-emerald-950/90 text-emerald-200 font-mono text-[11px] rounded-xl whitespace-pre-wrap max-h-40 overflow-y-auto border border-emerald-800/40">
                        {activeAgenda.whatsapp_text}
                      </div>
                    </div>
                  )}
                </>
              ) : (
                <div className="py-8 text-center text-xs text-slate-400">
                  Belum ada agenda kedinasan yang dibuat untuk hari ini.
                </div>
              )}
            </div>

            <div className="p-3 bg-slate-50 border-t border-slate-100 text-center">
              <Link
                href="/humas/agenda-pengumuman"
                className="text-xs font-bold text-slate-600 hover:text-blue-600 transition-colors inline-flex items-center gap-1.5"
              >
                <span>Kelola Broadcast & Kalender Agenda</span>
                <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </div>

          {/* Widget 4: Kemitraan & MoU Terkini */}
          <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center">
                  <Handshake className="w-4 h-4" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-slate-900">
                    Kemitraan & Dokumen MoU
                  </h3>
                  <p className="text-xs text-slate-500">Kerja sama strategis sekolah</p>
                </div>
              </div>
              <Link
                href="/humas/kemitraan-mou"
                className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1"
              >
                <span>Lihat Semua</span>
                <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

            <div className="p-0">
              {loading ? (
                <div className="p-8 text-center text-xs text-slate-400">Memuat data mitra...</div>
              ) : kemitraanList.length === 0 ? (
                <div className="p-8 text-center text-xs text-slate-400">
                  Belum ada data kemitraan institusi terdaftar.
                </div>
              ) : (
                <div className="divide-y divide-slate-100">
                  {kemitraanList.slice(0, 4).map((mitra) => (
                    <div key={mitra.id} className="p-4 hover:bg-slate-50/60 transition-colors flex items-start justify-between gap-3">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-bold text-slate-900">
                            {mitra.nama_mitra}
                          </span>
                        </div>
                        <p className="text-xs text-slate-600">
                          {mitra.bidang_kerjasama}
                        </p>
                        <div className="text-[11px] text-slate-400">
                          Kategori: <strong className="text-slate-600">{mitra.kategori_mitra}</strong> • Berlaku s/d: {mitra.tanggal_berakhir}
                        </div>
                      </div>

                      <div className="shrink-0 flex flex-col items-end gap-1">
                        <span
                          className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${
                            mitra.status === "Aktif"
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : "bg-slate-100 text-slate-700 border-slate-200"
                          }`}
                        >
                          {mitra.status}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="p-3 bg-slate-50 border-t border-slate-100 text-center">
              <Link
                href="/humas/kemitraan-mou"
                className="text-xs font-bold text-slate-600 hover:text-blue-600 transition-colors inline-flex items-center gap-1.5"
              >
                <span>Kelola MoU & Perjanjian Kerjasama</span>
                <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}