import { useEffect, useState } from 'react';
import { Input, Switch, TextField, toast } from '@heroui/react';
import { PaperAirplaneIcon } from '@heroicons/react/24/solid';
import { useQueryClient } from '@tanstack/react-query';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { FormModal, FormSection, FullWidth } from '@/Components/ui/FormModal';
import { FileDropzone } from '@/Components/ui/FileDropzone';
import { useAll } from '@/hooks/useResource';
import { api } from '@/lib/api';
import { todayLocal } from '@/lib/formatDate';

const empty = () => ({
    tanggal_surat: todayLocal(),
    nomor_surat: '',
    tujuan: '',
    perihal: '',
    penandatangan: '',
    status: 'Draft',
    catatan: '',
    kegiatan_id: null as number | null,
    file_url: null as string | null,
});

interface Props {
    open: boolean;
    onClose: () => void;
    editing?: any | null;
    hideKegiatan?: boolean;
    onSaved?: (record: any) => void;
}

export function SuratKeluarModal({ open, onClose, editing, hideKegiatan, onSaved }: Props) {
    const qc = useQueryClient();
    const [form, setForm] = useState<Record<string, any>>(empty());
    const [file, setFile] = useState<File | null>(null);
    const [nomorOtomatis, setNomorOtomatis] = useState(true);
    const [submitting, setSubmitting] = useState(false);

    const { data: kegiatans } = useAll<{ data: any[] }>('kegiatan', hideKegiatan ? '' : '/kegiatan', { per_page: 100 }, !hideKegiatan);

    useEffect(() => {
        if (!open) return;
        if (editing) {
            setForm({ ...empty(), ...editing, kegiatan_id: editing.kegiatan_id ?? null });
            setNomorOtomatis(!editing.nomor_surat || editing.nomor_surat === editing.kode);
        } else {
            setForm(empty());
            setNomorOtomatis(true);
        }
        setFile(null);
    }, [open, editing]);

    const set = (k: string, v: any) => setForm((s) => ({ ...s, [k]: v }));

    async function submit() {
        setSubmitting(true);
        try {
            const payload: Record<string, any> = { ...form, nomor_surat: nomorOtomatis ? '' : form.nomor_surat };
            delete payload.file_url;
            const fd = new FormData();
            Object.entries(payload).forEach(([k, v]) => fd.append(k, String(v ?? '')));
            if (file) fd.append('file', file);
            if (editing) fd.append('_method', 'PUT');
            const res = await api.post(editing ? `/surat-keluar/${editing.id}` : '/surat-keluar', fd);
            qc.invalidateQueries({ queryKey: ['surat-keluar'] });
            toast.success(editing ? 'Berhasil diperbarui' : 'Berhasil disimpan');
            onSaved?.(res.data);
            onClose();
        } finally {
            setSubmitting(false);
        }
    }

    if (!open) return null;

    return (
        <FormModal
            isOpen={open}
            onOpenChange={(o) => !o && onClose()}
            title={editing ? 'Edit Surat Keluar' : 'Surat Keluar Baru'}
            subtitle={
                editing
                    ? 'Perbarui detail surat keluar di bawah ini.'
                    : hideKegiatan
                        ? 'Surat akan otomatis tertaut ke kegiatan ini setelah disimpan.'
                        : 'Surat baru akan langsung tercatat di arsip surat keluar.'
            }
            icon={<PaperAirplaneIcon className="w-5 h-5" />}
            onSubmit={submit}
            isSubmitting={submitting}
        >
            <FormSection label="Informasi Surat" first />
            <Field label="Tanggal Surat" type="date" required value={form.tanggal_surat} onChange={(v) => set('tanggal_surat', v)} />
            <div className="flex flex-col gap-1.5">
                <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-gray-800">Nomor Surat</span>
                    <label className="flex items-center gap-1.5 cursor-pointer">
                        <span className="text-xs text-gray-500">{nomorOtomatis ? 'Otomatis' : 'Manual'}</span>
                        <Switch isSelected={nomorOtomatis} onChange={setNomorOtomatis} size="sm">
                            <Switch.Content>
                                <Switch.Control>
                                    <Switch.Thumb />
                                </Switch.Control>
                            </Switch.Content>
                        </Switch>
                    </label>
                </div>
                {nomorOtomatis ? (
                    <div className="rounded-xl border border-dashed border-gray-300 bg-gray-50 px-3.5 py-2.5 text-sm text-gray-400 italic">
                        Diisi otomatis saat disimpan
                    </div>
                ) : (
                    <TextField value={form.nomor_surat ?? ''} onChange={(v) => set('nomor_surat', v)} aria-label="Nomor Surat" fullWidth>
                        <Input placeholder="Contoh: 123/ND/VIII/2026" fullWidth />
                    </TextField>
                )}
            </div>
            <Field label="Tujuan" value={form.tujuan ?? ''} onChange={(v) => set('tujuan', v)} />
            <Field label="Penandatangan" value={form.penandatangan ?? ''} onChange={(v) => set('penandatangan', v)} />
            <FullWidth>
                <Field label="Perihal" multiline value={form.perihal ?? ''} onChange={(v) => set('perihal', v)} />
            </FullWidth>

            <FormSection label="Penugasan" />
            {!hideKegiatan && (
                <SelectField
                    label="Data Kegiatan"
                    placeholder="Tidak terkait kegiatan"
                    items={(kegiatans?.data ?? []).map((k: any) => ({ id: k.id, label: k.nama_kegiatan ?? k.kode ?? '' }))}
                    selectedKey={form.kegiatan_id}
                    onSelectionChange={(v) => set('kegiatan_id', v as number | null)}
                    clearable
                />
            )}
            <SelectField
                label="Status"
                items={['Draft', 'Ditandatangani', 'Terkirim'].map((v) => ({ id: v, label: v }))}
                selectedKey={form.status}
                onSelectionChange={(v) => set('status', v)}
            />

            <FullWidth>
                <FileDropzone label="Berkas" file={file} onChange={setFile} currentUrl={editing ? form.file_url : null} />
            </FullWidth>
        </FormModal>
    );
}