import { useState } from 'react';
import { Checkbox, CheckboxGroup, SearchField } from '@heroui/react';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { FormSection, FullWidth } from '@/Components/ui/FormModal';
import { MultiCheckPicker } from '@/Components/ui/MultiCheckPicker';
import { DokumentasiPanel, emptyDokumentasi, toDokumentasi } from '@/Components/Kegiatan/DokumentasiPanel';
import { toSosmed } from '@/Components/Kegiatan/SosmedChecklist';
import { WaBlastSection } from '@/Components/Kegiatan/WaBlastSection';
import { SuratMasukModal } from '@/Components/Surat/SuratMasukModal';
import { SuratKeluarModal } from '@/Components/Surat/SuratKeluarModal';
import type { Dokumentasi } from '@/Components/Kegiatan/DokumentasiPanel';
import type { SosmedItem } from '@/Components/Kegiatan/SosmedChecklist';
import { todayLocal } from '@/lib/formatDate';

export type { Dokumentasi };

const STATUS_OPTS = ['Rencana', 'Dijadwalkan', 'Berlangsung', 'Selesai', 'Ditunda', 'Dibatalkan'];
const PRIORITAS_OPTS = ['Rendah', 'Sedang', 'Tinggi', 'Mendesak'];

export interface KegiatanFormValues {
    tanggal: string;
    waktu_mulai: string;
    waktu_selesai: string;
    nama_kegiatan: string;
    lokasi: string;
    klien_id: number | null;
    pa_utama_id: number | null;
    pa_ids: number[];
    status: string;
    prioritas: string;
    narasumber_ids: number[];
    surat_masuk_ids: number[];
    surat_keluar_ids: number[];
    catatan: string;
    link_berita: string;
    link_gform_peserta: string;
    dokumentasi: Dokumentasi;
    sosmed: SosmedItem[];
    enable_wa_blast: boolean;
    wa_template_id: string;
    wa_template_name: string;
    wa_template_status: string;
    wa_blast_schedule: string;
    wa_blast_status: string;
}

export const emptyForm: KegiatanFormValues = {
    tanggal: todayLocal(),
    waktu_mulai: '',
    waktu_selesai: '',
    nama_kegiatan: '',
    lokasi: '',
    klien_id: null,
    pa_utama_id: null,
    pa_ids: [],
    status: 'Rencana',
    prioritas: 'Sedang',
    narasumber_ids: [],
    surat_masuk_ids: [],
    surat_keluar_ids: [],
    catatan: '',
    link_berita: '',
    link_gform_peserta: '',
    dokumentasi: emptyDokumentasi(),
    sosmed: [],
    enable_wa_blast: false,
    wa_template_id: '',
    wa_template_name: '',
    wa_template_status: 'pending',
    wa_blast_schedule: '',
    wa_blast_status: 'draft',
};

/** Map an API kegiatan detail into editable form values. */
export function toFormValues(k: any): KegiatanFormValues {
    const pasFromRelation = (k.pas ?? []).map((p: any) => p.id);
    const initialPaIds = pasFromRelation.length > 0
        ? pasFromRelation
        : (k.pa_utama_id ? [k.pa_utama_id] : []);

    return {
        tanggal: (k.tanggal ?? '').slice(0, 10),
        waktu_mulai: k.waktu_mulai ? k.waktu_mulai.slice(0, 5) : '',
        waktu_selesai: k.waktu_selesai ? k.waktu_selesai.slice(0, 5) : '',
        nama_kegiatan: k.nama_kegiatan ?? '',
        lokasi: k.lokasi ?? '',
        klien_id: k.klien_id ?? null,
        pa_utama_id: k.pa_utama_id ?? null,
        pa_ids: initialPaIds,
        status: k.status ?? 'Rencana',
        prioritas: k.prioritas ?? 'Sedang',
        narasumber_ids: (k.narasumbers ?? []).map((n: any) => n.id),
        surat_masuk_ids: (k.surat_masuks ?? []).map((s: any) => s.id),
        surat_keluar_ids: (k.surat_keluars ?? []).map((s: any) => s.id),
        catatan: k.catatan ?? '',
        link_berita: k.link_berita ?? '',
        link_gform_peserta: k.link_gform_peserta ?? '',
        dokumentasi: toDokumentasi(k.dokumentasi),
        sosmed: toSosmed(k.sosmed),
        enable_wa_blast: Boolean(k.enable_wa_blast),
        wa_template_id: k.wa_template_id ? String(k.wa_template_id) : '',
        wa_template_name: k.wa_template_name ?? '',
        wa_template_status: k.wa_template_status ?? 'pending',
        wa_blast_schedule: k.wa_blast_schedule ? k.wa_blast_schedule.slice(0, 16) : '',
        wa_blast_status: k.wa_blast_status ?? 'draft',
    };
}

/** Flatten form values into the API payload. */
export function toPayload(form: KegiatanFormValues) {
    return {
        ...form,
        waktu_mulai: form.waktu_mulai || null,
        waktu_selesai: form.waktu_selesai || null,
        pa_utama_id: form.pa_ids[0] ?? null,
        wa_blast_schedule: form.wa_blast_schedule || null,
    };
}

interface Props {
    kegiatanId?: number | null;
    form: KegiatanFormValues;
    setForm: React.Dispatch<React.SetStateAction<KegiatanFormValues>>;
    rawKliens: any[];
    rawPas: any[];
    rawNarasumbers: any[];
    rawSuratMasuk?: any[];
    rawSuratKeluar?: any[];
    narasumberSearch: string;
    setNarasumberSearch: (v: string) => void;
}

export function KegiatanFields({ kegiatanId, form, setForm, rawKliens, rawPas, rawNarasumbers, rawSuratMasuk = [], rawSuratKeluar = [], narasumberSearch, setNarasumberSearch }: Props) {
    const [quickAdd, setQuickAdd] = useState<'masuk' | 'keluar' | null>(null);
    const [extraMasuk, setExtraMasuk] = useState<any[]>([]);
    const [extraKeluar, setExtraKeluar] = useState<any[]>([]);

    const mergeById = (a: any[], b: any[]) => {
        const seen = new Set(a.map((x) => x.id));
        return [...a, ...b.filter((x) => !seen.has(x.id))];
    };
    const allSuratMasuk = mergeById(extraMasuk, rawSuratMasuk);
    const allSuratKeluar = mergeById(extraKeluar, rawSuratKeluar);

    function onSuratCreated(created: any) {
        if (quickAdd === 'masuk') {
            setExtraMasuk((prev) => [created, ...prev]);
            setForm((s) => ({ ...s, surat_masuk_ids: [...s.surat_masuk_ids, created.id] }));
        } else {
            setExtraKeluar((prev) => [created, ...prev]);
            setForm((s) => ({ ...s, surat_keluar_ids: [...s.surat_keluar_ids, created.id] }));
        }
    }

    return (
        <>
            <FormSection label="Informasi Kegiatan" first />
            <Field label="Tanggal" type="date" required value={form.tanggal} onChange={(v) => setForm((s) => ({ ...s, tanggal: v }))} />
            <Field label="Lokasi" value={form.lokasi} onChange={(v) => setForm((s) => ({ ...s, lokasi: v }))} />
            <Field label="Jam Mulai" type="time" value={form.waktu_mulai} onChange={(v) => setForm((s) => ({ ...s, waktu_mulai: v }))} />
            <Field label="Jam Selesai" type="time" value={form.waktu_selesai} onChange={(v) => setForm((s) => ({ ...s, waktu_selesai: v }))} />
            <FullWidth>
                <Field label="Nama Kegiatan" required value={form.nama_kegiatan} onChange={(v) => setForm((s) => ({ ...s, nama_kegiatan: v }))} />
            </FullWidth>
            <SelectField
                label="Status"
                items={STATUS_OPTS.map((v) => ({ id: v, label: v }))}
                selectedKey={form.status}
                onSelectionChange={(v) => setForm((s) => ({ ...s, status: v as string }))}
            />
            <SelectField
                label="Prioritas"
                items={PRIORITAS_OPTS.map((v) => ({ id: v, label: v }))}
                selectedKey={form.prioritas}
                onSelectionChange={(v) => setForm((s) => ({ ...s, prioritas: v as string }))}
            />

            <FormSection label="Penugasan" />
            <FullWidth>
                <SelectField
                    label="Klien"
                    items={rawKliens.map((k) => ({ id: k.id, label: k.nama ?? k.kode ?? '' }))}
                    selectedKey={form.klien_id}
                    onSelectionChange={(v) => setForm((s) => ({ ...s, klien_id: v as number | null }))}
                    clearable
                />
            </FullWidth>
            <FullWidth>
                <MultiCheckPicker
                    label="Tim Pelaksana (PA / Koordinator / Admin)"
                    searchPlaceholder="Cari nama..."
                    emptyText="Belum ada data pengguna."
                    items={rawPas.map((p) => ({
                        id: p.id,
                        label: p.name ?? `#${p.id}`,
                        sub: [p.role, p.email].filter(Boolean).join(' · ') || undefined,
                    }))}
                    value={form.pa_ids}
                    onChange={(ids) => setForm((s) => ({
                        ...s,
                        pa_ids: ids,
                        pa_utama_id: ids[0] ?? null,
                    }))}
                />
            </FullWidth>
            <FullWidth>
                <CheckboxGroup
                    value={form.narasumber_ids.map(String)}
                    onChange={(keys) => {
                        const ids = keys.map(Number);
                        setForm((s) => ({ ...s, narasumber_ids: ids.slice(0, 4) }));
                    }}
                >
                    <span className="text-[13px] font-medium text-gray-600">
                        Narasumber <span className="text-gray-400">(maks 4, terpilih {form.narasumber_ids.length})</span>
                    </span>
                    <SearchField value={narasumberSearch} onChange={setNarasumberSearch} className="mb-2" aria-label="Cari narasumber">
                        <SearchField.Group>
                            <SearchField.SearchIcon />
                            <SearchField.Input placeholder="Cari narasumber..." />
                            <SearchField.ClearButton />
                        </SearchField.Group>
                    </SearchField>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 rounded-xl border border-gray-200 bg-gray-50/50 p-3">
                        {rawNarasumbers
                            .filter((n: any) => n.nama?.toLowerCase().includes(narasumberSearch.toLowerCase()))
                            .map((n: any) => {
                                const active = form.narasumber_ids.includes(n.id);
                                return (
                                    <Checkbox key={n.id} value={String(n.id)} isDisabled={!active && form.narasumber_ids.length >= 4}>
                                        <Checkbox.Content className="gap-2">
                                            <Checkbox.Control>
                                                <Checkbox.Indicator />
                                            </Checkbox.Control>
                                            <span className="text-sm text-gray-700">{n.nama}</span>
                                        </Checkbox.Content>
                                    </Checkbox>
                                );
                            })}
                        {rawNarasumbers.length === 0 && (
                            <span className="text-sm text-gray-400 sm:col-span-2">Belum ada data narasumber.</span>
                        )}
                        {rawNarasumbers.length > 0 &&
                            rawNarasumbers.filter((n: any) => n.nama?.toLowerCase().includes(narasumberSearch.toLowerCase())).length === 0 && (
                                <span className="text-sm text-gray-400 sm:col-span-2">Narasumber tidak ditemukan.</span>
                            )}
                    </div>
                </CheckboxGroup>
            </FullWidth>

            <FormSection label="Surat Terkait" />
            <FullWidth>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <MultiCheckPicker
                        label="Surat Masuk"
                        searchPlaceholder="Cari surat masuk..."
                        emptyText="Belum ada surat masuk."
                        items={allSuratMasuk.map((s: any) => ({ id: s.id, label: s.kode || s.nomor_surat || `#${s.id}`, sub: [s.pengirim, s.perihal].filter(Boolean).join(' - ') || undefined }))}
                        value={form.surat_masuk_ids}
                        onChange={(ids) => setForm((s) => ({ ...s, surat_masuk_ids: ids }))}
                        onAdd={() => setQuickAdd('masuk')}
                    />
                    <MultiCheckPicker
                        label="Surat Keluar"
                        searchPlaceholder="Cari surat keluar..."
                        emptyText="Belum ada surat keluar."
                        items={allSuratKeluar.map((s: any) => ({ id: s.id, label: s.kode || s.nomor_surat || `#${s.id}`, sub: [s.tujuan, s.perihal].filter(Boolean).join(' - ') || undefined }))}
                        value={form.surat_keluar_ids}
                        onChange={(ids) => setForm((s) => ({ ...s, surat_keluar_ids: ids }))}
                        onAdd={() => setQuickAdd('keluar')}
                    />
                </div>
            </FullWidth>

            <FormSection label="Dokumen Terkait" />
            <Field label="Link Berita" value={form.link_berita} onChange={(v) => setForm((s) => ({ ...s, link_berita: v }))} placeholder="https://..." isLink />
            <Field label="Link GForm Peserta" value={form.link_gform_peserta} onChange={(v) => setForm((s) => ({ ...s, link_gform_peserta: v }))} placeholder="https://..." isLink />

            <FormSection label="Dokumentasi & Daftar Hadir" />
            <FullWidth>
                <DokumentasiPanel
                    value={form.dokumentasi}
                    onChange={(next) => setForm((s) => ({ ...s, dokumentasi: next }))}
                    sosmed={form.sosmed}
                    onSosmedChange={(next) => setForm((s) => ({ ...s, sosmed: next }))}
                />
            </FullWidth>

            <FormSection label="WhatsApp Broadcast / Blasting" />
            <FullWidth>
                <WaBlastSection
                    kegiatanId={kegiatanId}
                    form={form}
                    setForm={setForm}
                />
            </FullWidth>

            <SuratMasukModal open={quickAdd === 'masuk'} hideKegiatan onClose={() => setQuickAdd(null)} onSaved={onSuratCreated} />
            <SuratKeluarModal open={quickAdd === 'keluar'} hideKegiatan onClose={() => setQuickAdd(null)} onSaved={onSuratCreated} />
        </>
    );
}