import { useState } from 'react';
import { Button, Modal } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { DataTable } from '@/Components/ui/DataTable';
import { FormModal } from '@/Components/ui/FormModal';
import { KegiatanFields, KegiatanFormValues, emptyForm, toPayload } from '@/Components/Kegiatan/KegiatanFields';
import { PeriodeSelect } from '@/Components/ui/PeriodeSelect';
import { useAll, useCreate, useDelete, useList } from '@/hooks/useResource';
import { usePeriodeStore } from '@/store/usePeriodeStore';
import { useAuth } from '@/hooks/useAuth';
import { useConfirm } from '@/hooks/useConfirm';
import { RowActions } from '@/Components/ui/RowActions';
import { SearchInput } from '@/Components/ui/SearchInput';
import { FilterSelect } from '@/Components/ui/FilterSelect';
import { DateRangeFilter } from '@/Components/ui/DateRangeFilter';
import { formatDate, todayLocal } from '@/lib/formatDate';
import { PlusIcon, CalendarDaysIcon, FunnelIcon, XMarkIcon, ClockIcon, MapPinIcon, BuildingOfficeIcon, UserIcon, FlagIcon, ArrowTopRightOnSquareIcon, UserGroupIcon, ExclamationTriangleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
import { PaDetailModal } from '@/Components/Master/PaDetailModal';

interface Kegiatan {
    id: number;
    kode: string;
    tanggal: string;
    waktu_mulai?: string | null;
    waktu_selesai?: string | null;
    nama_kegiatan: string;
    lokasi: string | null;
    status: string;
    prioritas: string;
    klien_id: number | null;
    pa_utama_id: number | null;
    klien?: { nama: string };
    pa_utama?: { name: string };
    pas?: { id: number; name: string }[];
    narasumbers?: { id: number }[];
    link_dokumentasi?: string | null;
    link_berita?: string | null;
    link_daftar_hadir?: string | null;
    link_gform_peserta?: string | null;
    dokumentasi?: Dokumentasi | null;
}

interface Dokumentasi {
    mentah: string[];
    timestamp: string[];
    matang: string[];
    video_mentah: string[];
    video_jadi: string[];
    daftar_hadir_berkas: string[];
    daftar_hadir_xlsx: string[];
    draf_berita: string[];
}

const hasFiles = (arr?: string[]) => (arr?.length ?? 0) > 0;

function docMissingCount(r: Kegiatan): number {
    const d = r.dokumentasi;
    return [
        hasFiles(d?.mentah) || hasFiles(d?.timestamp) || hasFiles(d?.matang),
        !!r.link_berita?.trim(),
        hasFiles(d?.daftar_hadir_berkas) || hasFiles(d?.daftar_hadir_xlsx),
        !!r.link_gform_peserta?.trim(),
    ].filter((ok) => !ok).length;
}

interface Option {
    id: number;
    nama?: string;
    name?: string;
    kode?: string;
}

const STATUS_OPTS = ['Rencana', 'Dijadwalkan', 'Berlangsung', 'Selesai', 'Ditunda', 'Dibatalkan'];

const DOKUMEN_OPTS = [
    { id: 'Lengkap', label: 'Dokumen Lengkap (4/4)' },
    { id: 'BelumLengkap', label: 'Belum Lengkap (⚠️)' },
];
const STATUS_COLOR: Record<string, string> = {
    Rencana: 'bg-rose-100 text-rose-700',
    Dijadwalkan: 'bg-orange-100 text-orange-700',
    Berlangsung: 'bg-amber-100 text-amber-700',
    Selesai: 'bg-emerald-100 text-emerald-700',
    Ditunda: 'bg-gray-100 text-gray-600',
    Dibatalkan: 'bg-red-100 text-red-700',
};

// Calendar event chips: solid fills with white text, colour by status so
// finished/cancelled entries read at a glance. Hover treatment is shared
// (see CAL_CHIP_BASE) so it's always obvious which chip is about to be clicked.
const CAL_CHIP: Record<string, string> = {
    Rencana: 'bg-amber-600 text-white',
    Dijadwalkan: 'bg-amber-600 text-white',
    Berlangsung: 'bg-blue-600 text-white',
    Selesai: 'bg-emerald-600 text-white',
    Ditunda: 'bg-slate-400 text-white',
    Dibatalkan: 'bg-rose-500 text-white line-through',
};
const CAL_CHIP_FALLBACK = 'bg-amber-500 text-white';
const CAL_CHIP_BASE =
    'hidden sm:block w-full text-left rounded-md px-2 py-1 text-[13px] font-semibold leading-tight truncate cursor-pointer outline-none transition-all hover:brightness-110 hover:shadow-md hover:ring-2 hover:ring-inset hover:ring-black/30 focus-visible:ring-2 focus-visible:ring-sky-400';

function StatusBadge({ status }: { status: string }) {
    return (
        <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_COLOR[status] ?? 'bg-gray-100 text-gray-600'}`}>
            {status}
        </span>
    );
}

export default function KegiatanIndex() {
    const { user, canWrite, canDelete, canEdit } = useAuth();
    const allowEdit = canEdit('kegiatan');
    const allowDelete = canDelete('kegiatan');
    const { bulan, tahun, setPeriode } = usePeriodeStore();
    const [modalOpen, setModalOpen] = useState(false);
    const [form, setForm] = useState<KegiatanFormValues>(emptyForm);
    const [search, setSearch] = useState('');
    const [status, setStatus] = useState('');
    const [klienId, setKlienId] = useState('');
    const [paId, setPaId] = useState('');
    const [statusDokumen, setStatusDokumen] = useState('');
    const [dariTanggal, setDariTanggal] = useState('');
    const [sampaiTanggal, setSampaiTanggal] = useState('');
    const [filterModalOpen, setFilterModalOpen] = useState(false);
    const [narasumberSearch, setNarasumberSearch] = useState('');
    const [viewPa, setViewPa] = useState<number | null>(null);

    const [viewMode, setViewMode] = useState<'Hari' | 'Minggu' | 'Bulan'>('Bulan');
    const [navDate, setNavDate] = useState<Date>(() => new Date());
    const [selectedDateModal, setSelectedDateModal] = useState<{ dateStr: string; events: Kegiatan[] } | null>(null);

    const openView = (id: number) => window.open(`/kegiatan/${id}`, '_blank', 'noopener');

    const activeFilterCount = [klienId, paId, status, statusDokumen, dariTanggal, sampaiTanggal].filter(Boolean).length;
    const isFilterActive = activeFilterCount > 0;

    function resetFilters() {
        setKlienId('');
        setPaId('');
        setStatus('');
        setStatusDokumen('');
        setDariTanggal('');
        setSampaiTanggal('');
    }

    const { data, isLoading } = useList<Kegiatan>('kegiatan', '/kegiatan', { 
        bulan, 
        tahun, 
        per_page: 100, 
        search, 
        status: status || undefined,
        klien_id: klienId || undefined,
        pa_id: paId || undefined,
    });
    const { data: kliensData } = useAll<Option[]>('klien', '/master/klien', { per_page: 100 });
    const { data: pasData } = useAll<Option[]>('pa', '/users', { per_page: 100, roles: 'PA,Koordinator,Admin' });
    const { data: narasumbersData } = useAll<Option[]>('narasumber', '/master/narasumber', { per_page: 100 });
    const { data: suratMasukData } = useAll<any>('surat-masuk', '/surat-masuk', { per_page: 200 });
    const { data: suratKeluarData } = useAll<any>('surat-keluar', '/surat-keluar', { per_page: 200 });

    const rawKliens: any[] = Array.isArray(kliensData) ? kliensData : Array.isArray((kliensData as any)?.data) ? (kliensData as any).data : [];
    const rawPas: any[] = Array.isArray(pasData) ? pasData : Array.isArray((pasData as any)?.data) ? (pasData as any).data : [];
    const rawNarasumbers: any[] = Array.isArray(narasumbersData) ? narasumbersData : Array.isArray((narasumbersData as any)?.data) ? (narasumbersData as any).data : [];
    const unassignedSurat = (d: any) => (Array.isArray(d) ? d : Array.isArray(d?.data) ? d.data : []).filter((s: any) => s.kegiatan_id == null);
    const rawSuratMasuk = unassignedSurat(suratMasukData);
    const rawSuratKeluar = unassignedSurat(suratKeluarData);

    const klienOpts = rawKliens.map((k) => ({ id: String(k.id), label: k.nama ?? `Klien #${k.id}` }));
    const paOpts = rawPas.map((p) => ({ id: String(p.id), label: p.name ? `${p.name} (${p.role ?? 'PA'})` : `#${p.id}` }));

    const create = useCreate<any>('kegiatan', '/kegiatan');
    const remove = useDelete('kegiatan', '/kegiatan');
    const confirm = useConfirm();

    function openCreate() {
        setForm(emptyForm);
        setModalOpen(true);
    }

    const openEdit = (id: number) => window.open(`/kegiatan/${id}/edit`, '_blank', 'noopener');

    function submit() {
        create.mutateAsync(toPayload(form)).then(() => setModalOpen(false));
    }

    const rows = data?.data ?? [];
    const byDate = rows.reduce<Record<string, Kegiatan[]>>((acc, r) => {
        const key = r.tanggal.slice(0, 10);
        (acc[key] ??= []).push(r);
        return acc;
    }, {});

    function dateKey(d: Date) {
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    }

    // Calculation for Month grid
    const startOffset = new Date(tahun, bulan - 1, 1).getDay();
    const daysInMonth = new Date(tahun, bulan, 0).getDate();
    const gridStart = new Date(tahun, bulan - 1, 1 - startOffset);
    const cellCount = Math.ceil((startOffset + daysInMonth) / 7) * 7;
    const cellsMonth = Array.from({ length: cellCount }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));

    // Calculation for Week grid (based on navDate)
    const dayOfWeek = navDate.getDay();
    const weekStart = new Date(navDate.getFullYear(), navDate.getMonth(), navDate.getDate() - dayOfWeek);
    const cellsWeek = Array.from({ length: 7 }, (_, i) => new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + i));

    // Calculation for Day view (based on navDate)
    const dayKey = dateKey(navDate);
    const dayEvents = (byDate[dayKey] ?? []).slice().sort((a, b) => (a.waktu_mulai ?? '').localeCompare(b.waktu_mulai ?? ''));

    function shiftNavDate(direction: number) {
        setNavDate((prev) => {
            const next = new Date(prev);
            if (viewMode === 'Hari') {
                next.setDate(next.getDate() + direction);
            } else if (viewMode === 'Minggu') {
                next.setDate(next.getDate() + direction * 7);
            }
            setPeriode(next.getMonth() + 1, next.getFullYear());
            return next;
        });
    }

    return (
        <AppLayout>
            <div className="flex flex-col gap-5">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <h1 className="text-lg sm:text-xl font-bold text-gray-900">Data Kegiatan</h1>
                    {allowEdit && (
                        <Button variant="primary" onPress={openCreate} className="shrink-0">
                            <PlusIcon className="w-4 h-4" /> <span>Kegiatan Baru</span>
                        </Button>
                    )}
                </div>

                <div className="rounded-2xl border border-gray-200 bg-white shadow-sm p-3 sm:p-5 flex flex-col gap-4">
                    {/* Header Kalender dengan Tab Pills (Hari, Minggu, Bulan) & Navigasi Tanggal Konsisten */}
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-100 pb-3">
                        <div className="flex items-center gap-1.5 bg-gray-100/80 p-1 rounded-xl shrink-0 self-start sm:self-auto">
                            {(['Hari', 'Minggu', 'Bulan'] as const).map((m) => (
                                <button
                                    key={m}
                                    type="button"
                                    onClick={() => setViewMode(m)}
                                    className={`px-3 sm:px-4 py-1.5 text-xs font-semibold rounded-lg transition-all cursor-pointer ${
                                        viewMode === m
                                            ? 'bg-sky-600 text-white shadow-sm'
                                            : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200/60'
                                    }`}
                                >
                                    {m}
                                </button>
                            ))}
                        </div>

                        <div className="flex items-center gap-2">
                            {viewMode === 'Bulan' ? (
                                <PeriodeSelect />
                            ) : (
                                <>
                                    <div className="inline-flex items-center gap-1.5 bg-slate-50 border border-slate-200/90 rounded-2xl p-1 shadow-2xs">
                                        <button
                                            type="button"
                                            onClick={() => shiftNavDate(-1)}
                                            className="w-7 h-7 flex items-center justify-center rounded-xl bg-white hover:bg-sky-50 text-slate-600 hover:text-sky-600 border border-slate-200/60 shadow-2xs transition-all cursor-pointer"
                                            title={viewMode === 'Hari' ? 'Hari Sebelumnya' : 'Minggu Sebelumnya'}
                                        >
                                            <ChevronLeftIcon className="w-4 h-4" />
                                        </button>

                                        <div className="relative flex items-center">
                                            {viewMode === 'Hari' ? (
                                                <div className="flex items-center gap-2 px-3 py-1 bg-white rounded-xl border border-slate-200/60 shadow-2xs hover:border-sky-300 transition-colors cursor-pointer group">
                                                    <CalendarDaysIcon className="w-4 h-4 text-sky-600 group-hover:scale-110 transition-transform shrink-0" />
                                                    <span className="text-xs sm:text-sm font-bold text-slate-800 pointer-events-none">
                                                        {formatDate(dateKey(navDate))}
                                                    </span>
                                                    <input
                                                        type="date"
                                                        value={dateKey(navDate)}
                                                        onChange={(e) => {
                                                            if (e.target.value) {
                                                                const [y, m, d] = e.target.value.split('-').map(Number);
                                                                const next = new Date(y, m - 1, d);
                                                                setNavDate(next);
                                                                setPeriode(next.getMonth() + 1, next.getFullYear());
                                                            }
                                                        }}
                                                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                                                        title="Klik untuk ganti tanggal"
                                                    />
                                                </div>
                                            ) : (
                                                <div className="flex items-center gap-2 px-3 py-1 bg-white rounded-xl border border-slate-200/60 shadow-2xs select-none">
                                                    <CalendarDaysIcon className="w-4 h-4 text-sky-600 shrink-0" />
                                                    <span className="text-xs sm:text-sm font-bold text-slate-800">
                                                        {formatDate(dateKey(cellsWeek[0]))} <span className="text-slate-400 font-medium">s/d</span> {formatDate(dateKey(cellsWeek[6]))}
                                                    </span>
                                                </div>
                                            )}
                                        </div>

                                        <button
                                            type="button"
                                            onClick={() => shiftNavDate(1)}
                                            className="w-7 h-7 flex items-center justify-center rounded-xl bg-white hover:bg-sky-50 text-slate-600 hover:text-sky-600 border border-slate-200/60 shadow-2xs transition-all cursor-pointer"
                                            title={viewMode === 'Hari' ? 'Hari Berikutnya' : 'Minggu Berikutnya'}
                                        >
                                            <ChevronRightIcon className="w-4 h-4" />
                                        </button>
                                    </div>

                                    <button
                                        type="button"
                                        onClick={() => {
                                            const now = new Date();
                                            setNavDate(now);
                                            setPeriode(now.getMonth() + 1, now.getFullYear());
                                        }}
                                        className="h-9 px-3.5 inline-flex items-center gap-1.5 text-xs font-bold text-sky-700 bg-sky-50 hover:bg-sky-600 hover:text-white rounded-2xl border border-sky-200/80 shadow-2xs hover:shadow-xs transition-all cursor-pointer group"
                                    >
                                        <span className="relative flex h-2 w-2">
                                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
                                            <span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
                                        </span>
                                        <span>Hari Ini</span>
                                    </button>
                                </>
                            )}
                        </div>
                    </div>

                    {/* View Mode: HARI (Time-Grid Schedule View 1 Hari) */}
                    {viewMode === 'Hari' && (() => {
                        const HOURS = Array.from({ length: 24 }, (_, i) => i);
                        const HOUR_HEIGHT = 28; // compact height per hour
                        const dayEventsAll = byDate[dayKey] ?? [];
                        const allDayEvs = dayEventsAll.filter((ev) => !ev.waktu_mulai);
                        const timedEvents = dayEventsAll.filter((ev) => !!ev.waktu_mulai);
                        const dateObj = new Date(dayKey);
                        const dayNames = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                        const dayNameFull = dayNames[dateObj.getDay()];
                        const isToday = dayKey === todayLocal();

                        return (
                            <div className="overflow-x-auto border border-gray-200 rounded-xl bg-white">
                                <div>
                                    {/* Header 1 Hari */}
                                    <div className="grid grid-cols-[80px_1fr] gap-1 sm:gap-2 mb-2 bg-white pt-1">
                                        <div className="text-center text-xs sm:text-sm font-bold uppercase tracking-wide py-2 rounded-lg text-white bg-sky-700 flex items-center justify-center">
                                            Waktu
                                        </div>
                                        <div
                                            className={`text-center py-2 rounded-lg text-white font-bold flex items-center justify-center gap-1.5 transition-all ${
                                                isToday ? 'bg-sky-800 ring-2 ring-sky-500 shadow-sm' : 'bg-sky-700'
                                            }`}
                                        >
                                            <span className="text-xs sm:text-sm uppercase">{dayNameFull}</span>
                                            <span className={`text-xs sm:text-sm px-2 py-0.5 rounded-full ${
                                                isToday ? 'bg-white text-sky-800 font-extrabold' : 'bg-sky-600/80 text-white'
                                            }`}>
                                                {formatDate(dayKey)}
                                            </span>
                                        </div>
                                    </div>

                                    {/* Baris "All Day" untuk Kegiatan Tanpa Jam */}
                                    <div className="grid grid-cols-[80px_1fr] border-b border-gray-200 bg-gray-50/90 shadow-xs min-h-[36px]">
                                        <div className="p-1.5 text-center text-[11px] font-bold text-gray-700 border-r border-gray-200 flex items-center justify-center bg-gray-100/80">
                                            All Day
                                        </div>
                                        <div
                                            onClick={() => dayEventsAll.length > 0 && setSelectedDateModal({ dateStr: dayKey, events: dayEventsAll })}
                                            className="p-1 flex flex-wrap gap-1 min-h-[36px] items-center"
                                        >
                                            {allDayEvs.map((ev) => (
                                                <button
                                                    key={ev.id}
                                                    type="button"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        openView(ev.id);
                                                    }}
                                                    className={`${CAL_CHIP_BASE} ${CAL_CHIP[ev.status] ?? CAL_CHIP_FALLBACK} text-xs py-1 px-2.5 rounded-md font-medium shadow-xs hover:shadow-sm`}
                                                    title={`${ev.nama_kegiatan} (All Day)`}
                                                >
                                                    {ev.nama_kegiatan}
                                                </button>
                                            ))}
                                        </div>
                                    </div>

                                    {/* Grid Waktu 00:00 - 23:00 (1 Kolom Hari) */}
                                    <div className="relative grid grid-cols-[80px_1fr]">
                                        {/* Kolom Jam */}
                                        <div className="border-r border-gray-200 bg-gray-50/40 select-none">
                                            {HOURS.map((h) => (
                                                <div
                                                    key={h}
                                                    style={{ height: `${HOUR_HEIGHT}px` }}
                                                    className="border-b border-gray-100 text-[11px] font-mono text-gray-900 font-semibold flex items-center justify-center"
                                                >
                                                    {String(h).padStart(2, '0')}:00
                                                </div>
                                            ))}
                                        </div>

                                        {/* Kolom Hari Terpilih */}
                                        <div
                                            onClick={() => dayEventsAll.length > 0 && setSelectedDateModal({ dateStr: dayKey, events: dayEventsAll })}
                                            className={`relative overflow-hidden ${dayEventsAll.length > 0 ? 'cursor-pointer hover:bg-sky-50/30' : ''}`}
                                            style={{ height: `${HOURS.length * HOUR_HEIGHT}px` }}
                                        >
                                            {/* Background garis jam */}
                                            {HOURS.map((h) => (
                                                <div
                                                    key={h}
                                                    style={{ height: `${HOUR_HEIGHT}px` }}
                                                    className="border-b border-gray-100"
                                                />
                                            ))}

                                            {/* Card Kegiatan Berjam */}
                                            {(() => {
                                                const eventPositions = timedEvents.map((ev) => {
                                                    let startH = 8, startM = 0, endH = 9, endM = 0;
                                                    if (ev.waktu_mulai) {
                                                        const parts = ev.waktu_mulai.split(':').map(Number);
                                                        startH = parts[0] ?? 8;
                                                        startM = parts[1] ?? 0;
                                                    }
                                                    if (ev.waktu_selesai) {
                                                        const parts = ev.waktu_selesai.split(':').map(Number);
                                                        endH = parts[0] ?? (startH + 1);
                                                        endM = parts[1] ?? 0;
                                                    } else {
                                                        endH = Math.min(23, startH + 1);
                                                        endM = startM;
                                                    }

                                                    const startMin = startH * 60 + startM;
                                                    const endMin = Math.max(startMin + 35, endH * 60 + endM);
                                                    const duration = endMin - startMin;
                                                    return { ev, startMin, endMin, duration };
                                                });

                                                return eventPositions.map(({ ev, startMin, endMin, duration }, idx) => {
                                                    const overlaps = eventPositions.filter(
                                                        (other, oIdx) => oIdx !== idx && !(endMin <= other.startMin || startMin >= other.endMin)
                                                    );

                                                    let widthPercent = 96;
                                                    let leftPercent = 2;

                                                    if (overlaps.length > 0) {
                                                        const isLongest = overlaps.every((other) => duration > other.duration || (duration === other.duration && ev.id <= other.ev.id));

                                                        if (isLongest) {
                                                            widthPercent = 48;
                                                            leftPercent = 2;
                                                        } else {
                                                            const smallerIndex = overlaps
                                                                .filter((other) => !(other.duration > duration || (other.duration === duration && other.ev.id <= ev.id)))
                                                                .length;
                                                            
                                                            leftPercent = Math.min(50, 35 + smallerIndex * 12);
                                                            widthPercent = Math.min(46, 96 - leftPercent);
                                                        }
                                                    }

                                                    const topPx = (startMin / 60) * HOUR_HEIGHT;
                                                    const heightPx = Math.max(30, (duration / 60) * HOUR_HEIGHT);
                                                    const timeText = `${ev.waktu_mulai?.slice(0, 5)}${ev.waktu_selesai ? `-${ev.waktu_selesai.slice(0, 5)}` : ''}`;

                                                    return (
                                                        <button
                                                            key={ev.id}
                                                            type="button"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                openView(ev.id);
                                                            }}
                                                            style={{
                                                                top: `${topPx}px`,
                                                                height: `${heightPx}px`,
                                                                left: `${leftPercent}%`,
                                                                width: `${widthPercent}%`,
                                                            }}
                                                            className={`absolute rounded-md px-2 py-1 text-left text-xs z-10 shadow-md transition-all overflow-hidden border flex flex-col justify-start ${
                                                                CAL_CHIP[ev.status] ?? CAL_CHIP_FALLBACK
                                                            } hover:z-40 hover:shadow-lg hover:ring-2 hover:ring-sky-400`}
                                                            title={`${ev.nama_kegiatan}\n${timeText}\nStatus: ${ev.status}\nKlik untuk buka detail`}
                                                        >
                                                            <div className="font-bold text-xs leading-tight truncate">
                                                                {ev.nama_kegiatan}
                                                            </div>
                                                            <div className="font-mono text-[10px] opacity-90 truncate leading-none mt-0.5">
                                                                {timeText}
                                                            </div>
                                                        </button>
                                                    );
                                                });
                                            })()}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })()}

                    {/* View Mode: MINGGU (Time-Grid Schedule View 00:00 - 23:00) */}
                    {viewMode === 'Minggu' && (() => {
                        const HOURS = Array.from({ length: 24 }, (_, i) => i);
                        const HOUR_HEIGHT = 28; // compact height per hour

                        return (
                            <div className="overflow-x-auto border border-gray-200 rounded-xl bg-white">
                                <div className="min-w-[700px]">
                                    {/* Header 7 Hari (Pill Biru sky-700 dengan Nama Hari & Nomor Tanggal) */}
                                    <div className="grid grid-cols-8 gap-1 sm:gap-2 mb-2 sticky top-0 z-20 bg-white pt-1">
                                        <div className="text-center text-xs sm:text-sm font-bold uppercase tracking-wide py-2 rounded-lg text-white bg-sky-700 flex items-center justify-center">
                                            Waktu
                                        </div>
                                        {cellsWeek.map((date, idx) => {
                                            const key = dateKey(date);
                                            const isToday = key === todayLocal();
                                            const dayNames = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
                                            const dayName = dayNames[date.getDay()];

                                            return (
                                                <div
                                                    key={idx}
                                                    className={`text-center py-2 rounded-lg text-white font-bold flex items-center justify-center gap-1.5 transition-all ${
                                                        isToday ? 'bg-sky-800 ring-2 ring-sky-500 shadow-sm' : 'bg-sky-700'
                                                    }`}
                                                >
                                                    <span className="text-xs sm:text-sm uppercase">{dayName}</span>
                                                    <span className={`text-xs sm:text-sm px-1.5 py-0.2 rounded-full ${
                                                        isToday ? 'bg-white text-sky-800 font-extrabold' : 'bg-sky-600/80 text-white'
                                                    }`}>
                                                        {date.getDate()}
                                                    </span>
                                                </div>
                                            );
                                        })}
                                    </div>

                                    {/* Baris "All Day" untuk Kegiatan Tanpa Jam */}
                                    <div className="grid grid-cols-8 border-b border-gray-200 bg-gray-50/90 shadow-xs min-h-[36px]">
                                        <div className="p-1.5 text-center text-[11px] font-bold text-gray-700 border-r border-gray-200 flex items-center justify-center bg-gray-100/80">
                                            All Day
                                        </div>
                                        {cellsWeek.map((date, idx) => {
                                            const key = dateKey(date);
                                            const allDayEvs = (byDate[key] ?? []).filter((ev) => !ev.waktu_mulai);

                                            return (
                                                <div
                                                    key={idx}
                                                    onClick={() => allDayEvs.length > 0 && setSelectedDateModal({ dateStr: key, events: byDate[key] ?? [] })}
                                                    className="p-1 border-r border-gray-200 last:border-r-0 flex flex-col gap-1 min-h-[36px] justify-center"
                                                >
                                                    {allDayEvs.map((ev) => (
                                                        <button
                                                            key={ev.id}
                                                            type="button"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                openView(ev.id);
                                                            }}
                                                            className={`${CAL_CHIP_BASE} ${CAL_CHIP[ev.status] ?? CAL_CHIP_FALLBACK} text-[10px] py-0.5 px-1 rounded`}
                                                            title={`${ev.nama_kegiatan} (All Day)`}
                                                        >
                                                            {ev.nama_kegiatan}
                                                        </button>
                                                    ))}
                                                </div>
                                            );
                                        })}
                                    </div>

                                    {/* Grid Waktu 00:00 - 23:00 */}
                                    <div className="relative grid grid-cols-8">
                                        {/* Kolom Jam */}
                                        <div className="border-r border-gray-200 bg-gray-50/40 select-none">
                                            {HOURS.map((h) => (
                                                <div
                                                    key={h}
                                                    style={{ height: `${HOUR_HEIGHT}px` }}
                                                    className="border-b border-gray-100 text-[11px] font-mono text-gray-900 font-semibold flex items-center justify-center"
                                                >
                                                    {String(h).padStart(2, '0')}:00
                                                </div>
                                            ))}
                                        </div>

                                        {/* 7 Kolom Hari (Hanya Kegiatan Berjam) */}
                                        {cellsWeek.map((date, colIdx) => {
                                            const key = dateKey(date);
                                            const dayAllEvents = byDate[key] ?? [];
                                            const timedEvents = dayAllEvents.filter((ev) => !!ev.waktu_mulai);

                                            return (
                                                <div
                                                    key={colIdx}
                                                    onClick={() => dayAllEvents.length > 0 && setSelectedDateModal({ dateStr: key, events: dayAllEvents })}
                                                    className={`relative border-r border-gray-200 last:border-r-0 overflow-hidden ${
                                                        dayAllEvents.length > 0 ? 'cursor-pointer hover:bg-sky-50/30' : ''
                                                    }`}
                                                    style={{ height: `${HOURS.length * HOUR_HEIGHT}px` }}
                                                >
                                                    {/* Background garis jam */}
                                                    {HOURS.map((h) => (
                                                        <div
                                                            key={h}
                                                            style={{ height: `${HOUR_HEIGHT}px` }}
                                                            className="border-b border-gray-100"
                                                        />
                                                    ))}

                                                    {/* Card Kegiatan Berjam Menyatu Sesuai Waktu */}
                                                    {(() => {
                                                        const eventPositions = timedEvents.map((ev) => {
                                                            let startH = 8, startM = 0, endH = 9, endM = 0;
                                                            if (ev.waktu_mulai) {
                                                                const parts = ev.waktu_mulai.split(':').map(Number);
                                                                startH = parts[0] ?? 8;
                                                                startM = parts[1] ?? 0;
                                                            }
                                                            if (ev.waktu_selesai) {
                                                                const parts = ev.waktu_selesai.split(':').map(Number);
                                                                endH = parts[0] ?? (startH + 1);
                                                                endM = parts[1] ?? 0;
                                                            } else {
                                                                endH = Math.min(23, startH + 1);
                                                                endM = startM;
                                                            }

                                                            const startMin = startH * 60 + startM;
                                                            const endMin = Math.max(startMin + 35, endH * 60 + endM);
                                                            const duration = endMin - startMin;
                                                            return { ev, startMin, endMin, duration };
                                                        });

                                                        return eventPositions.map(({ ev, startMin, endMin, duration }, idx) => {
                                                            const overlaps = eventPositions.filter(
                                                                (other, oIdx) => oIdx !== idx && !(endMin <= other.startMin || startMin >= other.endMin)
                                                            );

                                                            let widthPercent = 96;
                                                            let leftPercent = 2;

                                                            if (overlaps.length > 0) {
                                                                const isLongest = overlaps.every((other) => duration > other.duration || (duration === other.duration && ev.id <= other.ev.id));

                                                                if (isLongest) {
                                                                    widthPercent = 48;
                                                                    leftPercent = 2;
                                                                } else {
                                                                    const smallerIndex = overlaps
                                                                        .filter((other) => !(other.duration > duration || (other.duration === duration && other.ev.id <= ev.id)))
                                                                        .length;
                                                                    
                                                                    leftPercent = Math.min(50, 35 + smallerIndex * 12);
                                                                    widthPercent = Math.min(46, 96 - leftPercent);
                                                                }
                                                            }

                                                            const topPx = (startMin / 60) * HOUR_HEIGHT;
                                                            const heightPx = Math.max(30, (duration / 60) * HOUR_HEIGHT);
                                                            const timeText = `${ev.waktu_mulai?.slice(0, 5)}${ev.waktu_selesai ? `-${ev.waktu_selesai.slice(0, 5)}` : ''}`;

                                                            return (
                                                                <button
                                                                    key={ev.id}
                                                                    type="button"
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        openView(ev.id);
                                                                    }}
                                                                    style={{
                                                                        top: `${topPx}px`,
                                                                        height: `${heightPx}px`,
                                                                        left: `${leftPercent}%`,
                                                                        width: `${widthPercent}%`,
                                                                    }}
                                                                    className={`absolute rounded-md px-1.5 py-1 text-left text-xs z-10 shadow-md transition-all overflow-hidden border flex flex-col justify-start ${
                                                                        CAL_CHIP[ev.status] ?? CAL_CHIP_FALLBACK
                                                                    } hover:z-40 hover:shadow-lg hover:ring-2 hover:ring-sky-400`}
                                                                    title={`${ev.nama_kegiatan}\n${timeText}\nStatus: ${ev.status}\nKlik untuk buka detail`}
                                                                >
                                                                    <div className="font-bold text-[10px] sm:text-[11px] leading-tight truncate">
                                                                        {ev.nama_kegiatan}
                                                                    </div>
                                                                    <div className="font-mono text-[9px] opacity-90 truncate leading-none mt-0.5">
                                                                        {timeText}
                                                                    </div>
                                                                </button>
                                                            );
                                                        });
                                                    })()}
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            </div>
                        );
                    })()}

                    {/* View Mode: BULAN (Grid Tampilan 1 Bulan) */}
                    {viewMode === 'Bulan' && (
                        <div>
                            <div className="grid grid-cols-7 gap-1 sm:gap-2 mb-2">
                                {['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'].map((d) => (
                                    <div
                                        key={d}
                                        className="text-center text-xs sm:text-sm font-bold uppercase tracking-wide py-2 rounded-lg text-white bg-sky-700"
                                    >
                                        <span className="sm:hidden">{d.slice(0, 1)}</span>
                                        <span className="hidden sm:inline">{d}</span>
                                    </div>
                                ))}
                            </div>
                            <div className="grid grid-cols-7 gap-1 sm:gap-2">
                                {cellsMonth.map((date, i) => {
                                    const key = dateKey(date);
                                    const events = (byDate[key] ?? []).slice().sort((a, b) => (a.waktu_mulai ?? '').localeCompare(b.waktu_mulai ?? ''));
                                    const isToday = key === todayLocal();
                                    const inMonth = date.getMonth() === bulan - 1;

                                    return (
                                        <div
                                            key={i}
                                            onClick={() => events.length > 0 && setSelectedDateModal({ dateStr: key, events })}
                                            className={`min-h-16 sm:min-h-32 rounded-lg p-1 sm:p-2 flex flex-col gap-1 sm:gap-1.5 transition-all ${
                                                isToday
                                                    ? 'border-2 border-sky-500 bg-sky-50'
                                                    : inMonth
                                                        ? 'border border-gray-200 bg-white'
                                                        : 'border border-gray-100 bg-gray-50'
                                            } ${events.length > 0 ? 'hover:shadow-md hover:border-sky-300 cursor-pointer' : ''}`}
                                        >
                                            <span
                                                className={`self-start text-xs sm:text-sm min-w-6 h-6 px-1 flex items-center justify-center rounded-full font-bold ${
                                                    isToday
                                                        ? 'bg-sky-600 text-white'
                                                        : inMonth
                                                            ? 'text-gray-700'
                                                            : 'text-gray-300'
                                                }`}
                                            >
                                                {date.getDate()}
                                            </span>
                                            <div className="flex flex-col gap-1 sm:gap-1.5">
                                                {events.length > 0 && (
                                                    <span
                                                        className="sm:hidden self-start rounded-full bg-sky-600 text-white text-[11px] font-bold leading-none px-1.5 py-1"
                                                        title={`${events.length} kegiatan`}
                                                    >
                                                        {events.length}
                                                    </span>
                                                )}
                                                {events.slice(0, 3).map((ev) => {
                                                    const timeLabel = ev.waktu_mulai ? ev.waktu_mulai.slice(0, 5) : null;
                                                    return (
                                                        <button
                                                            key={ev.id}
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                openView(ev.id);
                                                            }}
                                                            className={`${CAL_CHIP_BASE} ${CAL_CHIP[ev.status] ?? CAL_CHIP_FALLBACK}`}
                                                            title={[
                                                                ev.nama_kegiatan,
                                                                ev.waktu_mulai ? `Waktu: ${ev.waktu_mulai.slice(0, 5)}${ev.waktu_selesai ? ` - ${ev.waktu_selesai.slice(0, 5)}` : ''}` : null,
                                                                `Status: ${ev.status}`,
                                                                ev.lokasi ? `Lokasi: ${ev.lokasi}` : null,
                                                                ev.klien?.nama ? `Klien: ${ev.klien.nama}` : null,
                                                                ev.pa_utama?.name ? `PA: ${ev.pa_utama.name}` : null,
                                                                'Klik untuk buka detail',
                                                            ].filter(Boolean).join('\n')}
                                                        >
                                                            {timeLabel && <span className="font-mono text-[11px] opacity-90 mr-1">{timeLabel}</span>}
                                                            {ev.nama_kegiatan}
                                                        </button>
                                                    );
                                                })}
                                                {events.length > 3 && (
                                                    <span className="hidden sm:block text-left text-xs font-semibold text-sky-700 hover:text-sky-900 px-1 py-0.5 rounded">
                                                        +{events.length - 3} lainnya
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    )}
                </div>

                {/* Modal Collapse / Detail Kegiatan Per Tanggal */}
                <Modal isOpen={!!selectedDateModal} onOpenChange={(open) => !open && setSelectedDateModal(null)}>
                    <Modal.Backdrop className="bg-black/20 backdrop-blur-none">
                        <Modal.Container>
                            <Modal.Dialog className="max-w-lg w-full bg-white p-5 rounded-2xl shadow-xl space-y-4">
                                <div className="flex items-center justify-between border-b border-gray-100 pb-3">
                                    <div className="flex items-center gap-2">
                                        <CalendarDaysIcon className="w-5 h-5 text-sky-600" />
                                        <h3 className="font-bold text-gray-900 text-sm sm:text-base">
                                            Kegiatan Tanggal {selectedDateModal ? formatDate(selectedDateModal.dateStr) : ''}
                                        </h3>
                                    </div>
                                    <button 
                                        onClick={() => setSelectedDateModal(null)}
                                        className="p-1 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                                    >
                                        <XMarkIcon className="w-4 h-4" />
                                    </button>
                                </div>

                                <div className="space-y-3 max-h-[65vh] overflow-y-auto pr-1">
                                    {selectedDateModal?.events.map((ev) => {
                                        const paNames = ev.pas && ev.pas.length > 0 
                                            ? ev.pas.map((p) => p.name).join(', ')
                                            : ev.pa_utama?.name ?? '-';

                                        return (
                                            <div
                                                key={ev.id}
                                                onClick={() => openView(ev.id)}
                                                className="p-4 rounded-xl border border-gray-200 bg-white hover:bg-sky-50/50 hover:border-sky-300 shadow-sm cursor-pointer transition-all flex flex-col gap-2.5 group"
                                            >
                                                <div className="flex items-start justify-between gap-2 border-b border-gray-100 pb-2">
                                                    <div className="flex flex-col gap-0.5">
                                                        <span className="text-[11px] font-mono font-medium text-sky-600">{ev.kode}</span>
                                                        <h4 className="font-bold text-sm text-gray-900 leading-snug group-hover:text-sky-700 transition-colors">
                                                            {ev.nama_kegiatan}
                                                        </h4>
                                                    </div>
                                                    <div className="flex items-center gap-2 shrink-0">
                                                        <StatusBadge status={ev.status} />
                                                        <ArrowTopRightOnSquareIcon className="w-4 h-4 text-gray-400 group-hover:text-sky-600 transition-colors" />
                                                    </div>
                                                </div>

                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-xs text-gray-600">
                                                    <div className="flex items-center gap-1.5 font-medium text-gray-700">
                                                        <ClockIcon className="w-3.5 h-3.5 text-sky-600 shrink-0" />
                                                        <span>
                                                            {ev.waktu_mulai 
                                                                ? `${ev.waktu_mulai.slice(0, 5)}${ev.waktu_selesai ? ` - ${ev.waktu_selesai.slice(0, 5)}` : ''} WIB`
                                                                : 'Waktu belum diatur'}
                                                        </span>
                                                    </div>
                                                    {ev.lokasi && (
                                                        <div className="flex items-center gap-1.5">
                                                            <MapPinIcon className="w-3.5 h-3.5 text-rose-500 shrink-0" />
                                                            <span className="truncate">{ev.lokasi}</span>
                                                        </div>
                                                    )}
                                                    {ev.klien?.nama && (
                                                        <div className="flex items-center gap-1.5 sm:col-span-2">
                                                            <BuildingOfficeIcon className="w-3.5 h-3.5 text-slate-500 shrink-0" />
                                                            <span><strong className="font-semibold text-gray-700">Klien:</strong> {ev.klien.nama}</span>
                                                        </div>
                                                    )}
                                                    <div className="flex items-center gap-1.5 sm:col-span-2">
                                                        <UserIcon className="w-3.5 h-3.5 text-sky-600 shrink-0" />
                                                        <span><strong className="font-semibold text-gray-700">PA:</strong> {paNames}</span>
                                                    </div>
                                                    {ev.prioritas && (
                                                        <div className="flex items-center gap-1.5">
                                                            <FlagIcon className="w-3.5 h-3.5 text-amber-500 shrink-0" />
                                                            <span><strong className="font-semibold text-gray-700">Prioritas:</strong> {ev.prioritas}</span>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>

                                <div className="flex justify-end pt-3 border-t border-gray-100">
                                    <Button 
                                        variant="outline" 
                                        onPress={() => setSelectedDateModal(null)}
                                        className="h-8 px-4 text-xs font-medium rounded-full"
                                    >
                                        Tutup
                                    </Button>
                                </div>
                            </Modal.Dialog>
                        </Modal.Container>
                    </Modal.Backdrop>
                </Modal>

                {/* Search Bar & Filter Trigger Button */}
                <div className="flex items-center gap-2">
                    <div className="flex-1 min-w-0">
                        <SearchInput value={search} onChange={setSearch} placeholder="Cari kegiatan..." />
                    </div>
                    <Button
                        variant={isFilterActive ? "primary" : "outline"}
                        onPress={() => setFilterModalOpen(true)}
                        className={`h-9 px-3 sm:px-4 gap-1.5 sm:gap-2 font-medium shrink-0 rounded-full text-xs ${
                            isFilterActive
                                ? 'bg-sky-600 hover:bg-sky-700 text-white border-transparent'
                                : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
                        }`}
                    >
                        <FunnelIcon className="w-3.5 h-3.5" />
                        <span className="hidden sm:inline">Filter</span>
                        {isFilterActive && (
                            <span className="w-4 h-4 rounded-full bg-white text-sky-700 text-[10px] font-bold flex items-center justify-center">
                                {activeFilterCount}
                            </span>
                        )}
                    </Button>
                    {isFilterActive && (
                        <Button
                            variant="primary"
                            onPress={resetFilters}
                            className="h-9 px-3 sm:px-4 text-xs bg-red-600 hover:bg-red-700 text-white font-medium shrink-0 rounded-full border-transparent shadow-sm"
                        >
                            Reset
                        </Button>
                    )}
                </div>

                {/* Compact Filter Modal (No Blur Backdrop) */}
                <Modal isOpen={filterModalOpen} onOpenChange={setFilterModalOpen}>
                    <Modal.Backdrop className="bg-black/20 backdrop-blur-none">
                        <Modal.Container>
                            <Modal.Dialog className="max-w-md w-full bg-white p-5 rounded-2xl shadow-xl space-y-4">
                                <div className="flex items-center justify-between border-b border-gray-100 pb-3">
                                    <div className="flex items-center gap-2">
                                        <FunnelIcon className="w-4 h-4 text-sky-600" />
                                        <h3 className="font-bold text-gray-900 text-sm">Filter Data Kegiatan</h3>
                                    </div>
                                    <button 
                                        onClick={() => setFilterModalOpen(false)}
                                        className="p-1 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                                    >
                                        <XMarkIcon className="w-4 h-4" />
                                    </button>
                                </div>

                                <div className="space-y-3.5 text-xs">
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Klien / Instansi</label>
                                        <FilterSelect value={klienId} onChange={setKlienId} placeholder="Semua Klien" items={klienOpts} />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Tim Pelaksana</label>
                                        <FilterSelect value={paId} onChange={setPaId} placeholder="Semua Pelaksana" items={paOpts} />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Status Kegiatan</label>
                                        <FilterSelect value={status} onChange={setStatus} placeholder="Semua Status" items={STATUS_OPTS.map((s) => ({ id: s, label: s }))} />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Kelengkapan Dokumen</label>
                                        <FilterSelect value={statusDokumen} onChange={setStatusDokumen} placeholder="Semua Dokumen" items={DOKUMEN_OPTS} />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Rentang Tanggal</label>
                                        <DateRangeFilter from={dariTanggal} to={sampaiTanggal} onFromChange={setDariTanggal} onToChange={setSampaiTanggal} />
                                    </div>
                                </div>

                                <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                                    <Button 
                                        variant="primary" 
                                        onPress={resetFilters}
                                        className="h-9 px-4 text-xs bg-red-600 hover:bg-red-700 text-white font-medium rounded-full border-transparent shadow-sm"
                                    >
                                        Reset Filter
                                    </Button>
                                    <Button 
                                        variant="primary" 
                                        onPress={() => setFilterModalOpen(false)}
                                        className="h-9 px-4 text-xs bg-sky-600 hover:bg-sky-700 text-white font-medium rounded-full"
                                    >
                                        Terapkan Filter
                                    </Button>
                                </div>
                            </Modal.Dialog>
                        </Modal.Container>
                    </Modal.Backdrop>
                </Modal>

                {(() => {
                    const filteredRows = rows.filter((r) => {
                        const rDate = r.tanggal.slice(0, 10);

                        // If user specified custom range in filter modal, apply that
                        if (dariTanggal && rDate < dariTanggal) return false;
                        if (sampaiTanggal && rDate > sampaiTanggal) return false;

                        // Otherwise filter table rows according to active viewMode range (Hari / Minggu / Bulan)
                        if (!dariTanggal && !sampaiTanggal) {
                            if (viewMode === 'Hari') {
                                if (rDate !== dateKey(navDate)) return false;
                            } else if (viewMode === 'Minggu') {
                                const startWeek = dateKey(cellsWeek[0]);
                                const endWeek = dateKey(cellsWeek[6]);
                                if (rDate < startWeek || rDate > endWeek) return false;
                            }
                        }

                        if (statusDokumen) {
                            const missingCount = docMissingCount(r);
                            if (statusDokumen === 'Lengkap' && missingCount > 0) return false;
                            if (statusDokumen === 'BelumLengkap' && missingCount === 0) return false;
                        }
                        return true;
                    });

                    return (
                        <DataTable
                            columns={[
                                { header: 'Tanggal', cell: (r) => formatDate(r.tanggal), sortKey: (r) => r.tanggal },
                                { header: 'Kode', cell: (r) => r.kode, sortKey: (r) => r.kode },
                                { 
                                    header: 'Kegiatan', 
                                    cell: (r) => {
                                        const missingCount = docMissingCount(r);
                                        return (
                                            <div className="flex flex-col gap-0.5">
                                                <span className="font-medium">{r.nama_kegiatan}</span>
                                                {missingCount > 0 && (
                                                    <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-rose-600">
                                                        <span>⚠️ Dokumen belum lengkap ({missingCount}/4)</span>
                                                    </span>
                                                )}
                                            </div>
                                        );
                                    }, 
                                    sortKey: (r) => r.nama_kegiatan 
                                },
                                { header: 'Klien', cell: (r) => r.klien?.nama ?? '-', sortKey: (r) => r.klien?.nama ?? null },
                                {
                                    header: 'Tim Pelaksana',
                                    cell: (r) => {
                                        const list = (r.pas && r.pas.length > 0)
                                            ? r.pas
                                            : (r.pa_utama ? [{ id: r.pa_utama_id!, name: r.pa_utama.name }] : []);

                                        if (list.length === 0) return '-';

                                        return (
                                            <div className="flex flex-wrap gap-1" onClick={(e) => e.stopPropagation()}>
                                                {list.map((p, i) => (
                                                    <span key={p.id}>
                                                        <button
                                                            type="button"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                setViewPa(p.id);
                                                            }}
                                                            className="text-sky-600 hover:underline hover:text-sky-800 font-medium"
                                                        >
                                                            {p.name}
                                                        </button>
                                                        {i < list.length - 1 && <span className="text-gray-400">, </span>}
                                                    </span>
                                                ))}
                                            </div>
                                        );
                                    },
                                    sortKey: (r) => (r.pas && r.pas.length > 0 ? r.pas[0].name : r.pa_utama?.name ?? null)
                                },
                                { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                                {
                                    header: 'Aksi',
                                    cell: (r: Kegiatan) => {
                                        const isAssignedPa = !!(user && (r.pa_utama_id === user.id || (r.pas ?? []).some((p) => p.id === user.id)));
                                        const canEditRow = allowEdit && (user?.role !== 'PA' || isAssignedPa);
                                        return (
                                            <RowActions
                                                onView={() => openView(r.id)}
                                                onEdit={canEditRow ? () => openEdit(r.id) : undefined}
                                                onDelete={allowDelete ? async () => { if (await confirm({ title: 'Hapus kegiatan ini?' })) remove.mutate(r.id); } : undefined}
                                            />
                                        );
                                    },
                                },
                            ]}
                            rows={filteredRows}
                            rowKey={(r) => r.id}
                            isLoading={isLoading}
                            onRowClick={(r) => openView(r.id)}
                        />
                    );
                })()}

                <FormModal
                    isOpen={modalOpen}
                    onOpenChange={setModalOpen}
                    title="Kegiatan Baru"
                    subtitle="Kegiatan baru akan langsung tercatat di kalender periode aktif."
                    icon={<CalendarDaysIcon className="w-5 h-5" />}
                    onSubmit={submit}
                    isSubmitting={create.isPending}
                >
                    <KegiatanFields
                        form={form}
                        setForm={setForm}
                        rawKliens={rawKliens}
                        rawPas={rawPas}
                        rawNarasumbers={rawNarasumbers}
                        rawSuratMasuk={rawSuratMasuk}
                        rawSuratKeluar={rawSuratKeluar}
                        narasumberSearch={narasumberSearch}
                        setNarasumberSearch={setNarasumberSearch}
                    />
                </FormModal>

                <PaDetailModal id={viewPa} onClose={() => setViewPa(null)} />
            </div>
        </AppLayout>
    );
}