import { useState } from 'react';
import { Link, router, usePage } from '@inertiajs/react';
import { Button } from '@heroui/react';
import { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { PageProps } from '@/types';
import { DetailRow } from '@/Components/ui/DetailModal';
import { DokumentasiPanel, toDokumentasi } from '@/Components/Kegiatan/DokumentasiPanel';
import { toSosmed } from '@/Components/Kegiatan/SosmedChecklist';
import { SuratMasukDetailModal } from '@/Components/Surat/SuratMasukDetailModal';
import { SuratKeluarDetailModal } from '@/Components/Surat/SuratKeluarDetailModal';
import { KlienDetailModal } from '@/Components/Master/KlienDetailModal';
import { NarasumberDetailModal } from '@/Components/Master/NarasumberDetailModal';
import { PaDetailModal } from '@/Components/Master/PaDetailModal';
import { KegiatanTugasTab } from '@/Components/Kegiatan/KegiatanTugasTab';
import { WaBlastSection } from '@/Components/Kegiatan/WaBlastSection';
import { toFormValues } from '@/Components/Kegiatan/KegiatanFields';
import { useAll, useDelete, useList, useUpdate } from '@/hooks/useResource';
import { useAuth } from '@/hooks/useAuth';
import { useConfirm } from '@/hooks/useConfirm';
import { formatDate } from '@/lib/formatDate';

const STATUS_FLOW = ['Rencana', 'Dijadwalkan', 'Berlangsung', 'Selesai'];

const TABS = [
    { id: 'detail', label: 'Detail' },
    { id: 'tugas', label: 'Tugas' },
    { id: 'blast', label: 'Blasting WA' },
] as const;

type TabId = (typeof TABS)[number]['id'];

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',
};

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 KegiatanShow() {
    const { id } = usePage<PageProps<{ id: number }>>().props;
    const { user, canDelete, canEdit: checkCanEdit } = useAuth();
    const { data: k, isLoading } = useAll<any>(`kegiatan-detail-${id}`, `/kegiatan/${id}`);
    const update = useUpdate<any>(`kegiatan-detail-${id}`, '/kegiatan');
    const remove = useDelete('kegiatan', '/kegiatan');
    const confirm = useConfirm();
    const [viewSuratMasuk, setViewSuratMasuk] = useState<number | null>(null);
    const [viewSuratKeluar, setViewSuratKeluar] = useState<number | null>(null);
    const [viewKlien, setViewKlien] = useState<number | null>(null);
    const [viewNarasumber, setViewNarasumber] = useState<number | null>(null);
    const [viewPa, setViewPa] = useState<number | null>(null);
    const [tab, setTab] = useState<TabId>('detail');
    const { data: boards } = useList<{ pending_count: number }>(`kegiatan-boards-${id}`, '/boards', { kegiatan_id: id, per_page: 5 });
    const tugasPending = (boards?.data ?? []).reduce((sum, b) => sum + (b.pending_count ?? 0), 0);

    const isAssignedPa = !!(k && user && (k.pa_utama_id === user.id || (k.pas ?? []).some((p: any) => p.id === user.id)));
    const canEdit = checkCanEdit('kegiatan') && (user?.role !== 'PA' || isAssignedPa);
    const isManagerRole = user?.role === 'Superadmin' || user?.role === 'Admin' || user?.role === 'Koordinator';

    function changeStatus(newStatus: string) {
        update.mutate({ id, data: { status: newStatus } });
    }

    async function handleDelete() {
        if (await confirm({ title: 'Hapus kegiatan ini?' })) {
            remove.mutate(id, { onSuccess: () => router.visit('/kegiatan') });
        }
    }

    const statusIdx = k ? STATUS_FLOW.indexOf(k.status) : -1;
    const availableTabs = TABS.filter((t) => t.id !== 'blast' || isManagerRole);

    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 rounded-2xl shadow-sm">
                    <div className="flex items-center gap-3 min-w-0">
                        <Link
                            href="/kegiatan"
                            className="shrink-0 p-2 rounded-lg text-gray-500 hover:bg-gray-100"
                            title="Kembali"
                        >
                            <ArrowLeftIcon className="w-4 h-4" />
                        </Link>
                        <div className="min-w-0">
                            <h1 className="text-lg sm:text-xl font-bold text-gray-900 truncate">
                                {k?.nama_kegiatan ?? (isLoading ? 'Memuat...' : 'Kegiatan tidak ditemukan')}
                            </h1>
                            {k && <p className="text-xs text-gray-400">{k.kode}</p>}
                        </div>
                    </div>
                    {k && canEdit && isManagerRole && (
                        <div className="flex items-center gap-2 shrink-0">
                            <Button
                                variant="primary"
                                onPress={() => router.visit(`/kegiatan/${id}/edit`)}
                                className="bg-amber-500 hover:bg-amber-600 text-white border-transparent"
                            >
                                <PencilSquareIcon className="w-4 h-4" /> <span>Edit</span>
                            </Button>
                            {canDelete('kegiatan') && (
                                <Button
                                    variant="primary"
                                    onPress={handleDelete}
                                    isDisabled={remove.isPending}
                                    className="bg-red-600 hover:bg-red-700 text-white border-transparent"
                                >
                                    <TrashIcon className="w-4 h-4" /> <span>Hapus</span>
                                </Button>
                            )}
                        </div>
                    )}
                </div>

                {k && canEdit && isManagerRole && STATUS_FLOW.includes(k.status) && (
                    <div className="flex items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-3 rounded-2xl shadow-sm">
                        <Button
                            variant="outline"
                            size="sm"
                            isDisabled={statusIdx <= 0 || update.isPending}
                            onPress={() => changeStatus(STATUS_FLOW[statusIdx - 1])}
                        >
                            <ChevronLeftIcon className="w-4 h-4" /> Status Sebelumnya
                        </Button>
                        <StatusBadge status={k.status} />
                        <Button
                            variant="outline"
                            size="sm"
                            isDisabled={statusIdx === STATUS_FLOW.length - 1 || update.isPending}
                            onPress={() => changeStatus(STATUS_FLOW[statusIdx + 1])}
                        >
                            Status Selanjutnya <ChevronRightIcon className="w-4 h-4" />
                        </Button>
                    </div>
                )}

                {k && (
                    <div className="flex gap-1 border-b border-gray-200 overflow-x-auto">
                        {availableTabs.map((t) => (
                            <button
                                key={t.id}
                                type="button"
                                onClick={() => setTab(t.id)}
                                className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px cursor-pointer transition-colors whitespace-nowrap flex items-center gap-1.5 ${
                                    tab === t.id ? 'border-sky-600 text-sky-600' : 'border-transparent text-gray-500 hover:text-gray-700'
                                }`}
                            >
                                {t.label}
                                {t.id === 'tugas' && tugasPending > 0 && (
                                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[10px] font-semibold">
                                        {tugasPending > 99 ? '99+' : tugasPending}
                                    </span>
                                )}
                            </button>
                        ))}
                    </div>
                )}

                {k && tab === 'detail' && (
                    <div className="flex flex-col gap-5">
                    <div className="rounded-2xl border border-gray-200 bg-white shadow-sm p-4 sm:p-6">
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <DetailRow label="Kode" value={k.kode} />
                            <DetailRow label="Tanggal" value={formatDate(k.tanggal)} />
                            <DetailRow
                                label="Waktu"
                                value={
                                    k.waktu_mulai
                                        ? `${k.waktu_mulai.slice(0, 5)}${k.waktu_selesai ? ` - ${k.waktu_selesai.slice(0, 5)}` : ''} WIB`
                                        : null
                                }
                            />
                            <DetailRow label="Lokasi" value={k.lokasi} />
                            <DetailRow
                                label="Klien"
                                value={
                                    k.klien
                                        ? <button onClick={() => setViewKlien(k.klien.id)} className="text-left text-sky-600 hover:underline">{k.klien.nama}</button>
                                        : null
                                }
                            />
                            <DetailRow
                                label="Tim Pelaksana"
                                value={
                                    (k.pas ?? []).length > 0
                                        ? (k.pas ?? []).map((p: any, i: number) => (
                                            <span key={p.id}>
                                                <button onClick={() => setViewPa(p.id)} className="text-sky-600 hover:underline">{p.name}</button>
                                                {i < k.pas.length - 1 && ', '}
                                            </span>
                                        ))
                                        : k.pa_utama ? (
                                            <button onClick={() => setViewPa(k.pa_utama.id)} className="text-sky-600 hover:underline">{k.pa_utama.name}</button>
                                        ) : '-'
                                }
                            />
                            <DetailRow label="Prioritas" value={k.prioritas} />
                            <DetailRow
                                label="Narasumber"
                                value={
                                    (k.narasumbers ?? []).length
                                        ? (k.narasumbers ?? []).map((n: any, i: number) => (
                                            <span key={n.id}>
                                                <button onClick={() => setViewNarasumber(n.id)} className="text-sky-600 hover:underline">{n.nama}</button>
                                                {i < k.narasumbers.length - 1 && ', '}
                                            </span>
                                        ))
                                        : null
                                }
                            />
                            <DetailRow label="Status" value={<StatusBadge status={k.status} />} />
                            <DetailRow
                                label="Surat Masuk"
                                value={
                                    (k.surat_masuks ?? []).length
                                        ? (k.surat_masuks ?? []).map((s: any) => (
                                            <button key={s.id} onClick={() => setViewSuratMasuk(s.id)} className="block text-left text-sky-600 hover:underline">
                                                {`${s.nomor_surat ?? s.kode} - ${s.perihal ?? ''}`}
                                            </button>
                                        ))
                                        : null
                                }
                            />
                            <DetailRow
                                label="Surat Keluar"
                                value={
                                    (k.surat_keluars ?? []).length
                                        ? (k.surat_keluars ?? []).map((s: any) => (
                                            <button key={s.id} onClick={() => setViewSuratKeluar(s.id)} className="block text-left text-sky-600 hover:underline">
                                                {`${s.nomor_surat ?? s.kode} - ${s.perihal ?? ''}`}
                                            </button>
                                        ))
                                        : null
                                }
                            />
                            <DetailRow span2 label="Catatan" value={k.catatan} />
                            {[
                                ['Berita', k.link_berita],
                                ['GForm Peserta', k.link_gform_peserta],
                            ].map(([label, url]) => (
                                <DetailRow
                                    key={label as string}
                                    label={label as string}
                                    value={
                                        url ? (
                                            <a href={url as string} target="_blank" rel="noreferrer" className="text-sky-600 hover:underline">Buka link</a>
                                        ) : (
                                            <span className="inline-flex items-center gap-1 text-xs font-medium text-rose-600 bg-rose-50 px-2 py-0.5 rounded border border-rose-100">
                                                ⚠️ Belum diisi
                                            </span>
                                        )
                                    }
                                />
                            ))}
                            <DetailRow
                                label="Dibuat Oleh"
                                value={
                                    k.creator_name ? (
                                        <span>
                                            <span className="font-medium text-gray-900">{k.creator_name}</span>
                                            {k.created_at && (
                                                <span className="ml-1 text-xs text-gray-500">
                                                    ({formatDate(k.created_at)})
                                                </span>
                                            )}
                                        </span>
                                    ) : (
                                        k.created_at ? formatDate(k.created_at) : null
                                    )
                                }
                            />
                            <DetailRow
                                label="Terakhir Diedit"
                                value={
                                    k.last_editor_name ? (
                                        <span>
                                            <span className="font-medium text-gray-900">{k.last_editor_name}</span>
                                            {k.last_edited_at && (
                                                <span className="ml-1 text-xs text-gray-500">
                                                    ({k.last_edited_at})
                                                </span>
                                            )}
                                        </span>
                                    ) : (
                                        <span className="text-xs text-gray-400">Belum pernah diedit</span>
                                    )
                                }
                            />
                        </div>
                    </div>

                    <div className="rounded-2xl border border-gray-200 bg-white shadow-sm p-4 sm:p-6">
                        <DokumentasiPanel
                            value={toDokumentasi(k.dokumentasi)}
                            onChange={(next) => update.mutate({ id, data: { dokumentasi: next } })}
                            sosmed={toSosmed(k.sosmed)}
                            onSosmedChange={(next) => update.mutate({ id, data: { sosmed: next } })}
                            readOnly={!canEdit}
                            fileDetails={k.file_details}
                        />
                    </div>
                    </div>
                )}

                {k && tab === 'tugas' && (
                    <KegiatanTugasTab kegiatanId={id} kegiatanNama={k.nama_kegiatan} />
                )}

                {k && tab === 'blast' && isManagerRole && (
                    <WaBlastSection
                        kegiatanId={id}
                        form={toFormValues(k)}
                        setForm={(updater: any) => {
                                const next = typeof updater === 'function' ? updater(toFormValues(k)) : updater;
                                // Only persist relevant blast config fields if changed
                                if (
                                    next.enable_wa_blast !== Boolean(k.enable_wa_blast) ||
                                    next.wa_template_id !== String(k.wa_template_id || '') ||
                                    next.wa_blast_schedule !== String(k.wa_blast_schedule || '')
                                ) {
                                    update.mutate({
                                        id,
                                        data: {
                                            enable_wa_blast: next.enable_wa_blast,
                                            wa_template_id: next.wa_template_id || null,
                                            wa_template_name: next.wa_template_name || null,
                                            wa_template_status: next.wa_template_status || 'pending',
                                            wa_blast_schedule: next.wa_blast_schedule || null,
                                            wa_blast_status: next.wa_blast_status || 'draft',
                                        },
                                    });
                                }
                            }}
                            readOnly={!canEdit}
                        />
                )}

                <SuratMasukDetailModal id={viewSuratMasuk} onClose={() => setViewSuratMasuk(null)} />
                <SuratKeluarDetailModal id={viewSuratKeluar} onClose={() => setViewSuratKeluar(null)} />
                <KlienDetailModal id={viewKlien} onClose={() => setViewKlien(null)} />
                <NarasumberDetailModal id={viewNarasumber} onClose={() => setViewNarasumber(null)} />
                <PaDetailModal id={viewPa} onClose={() => setViewPa(null)} />
            </div>
        </AppLayout>
    );
}