import { useEffect, useState } from 'react';
import { Link, router, usePage } from '@inertiajs/react';
import { Button } from '@heroui/react';
import { ArrowLeftIcon, CalendarDaysIcon } from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { PageProps } from '@/types';
import { useAuth } from '@/hooks/useAuth';
import { useAll, useUpdate } from '@/hooks/useResource';
import { KegiatanFields, KegiatanFormValues, emptyForm, toFormValues, toPayload } from '@/Components/Kegiatan/KegiatanFields';

export default function KegiatanEdit() {
    const { id } = usePage<PageProps<{ id: number }>>().props;
    const { role } = useAuth();
    const isManagerRole = role === 'Superadmin' || role === 'Admin' || role === 'Koordinator';

    const [form, setForm] = useState<KegiatanFormValues>(emptyForm);
    const [narasumberSearch, setNarasumberSearch] = useState('');
    const [ready, setReady] = useState(false);

    useEffect(() => {
        if (!isManagerRole) {
            router.visit(`/kegiatan/${id}`);
        }
    }, [isManagerRole, id]);

    const { data: detail } = useAll<any>(`kegiatan-detail-${id}`, `/kegiatan/${id}`);
    const { data: kliensData } = useAll<any>('klien', '/master/klien', { per_page: 100 });
    const { data: pasData } = useAll<any>('pa', '/users', { per_page: 100, roles: 'PA,Koordinator,Admin' });
    const { data: narasumbersData } = useAll<any>('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 update = useUpdate<any>(`kegiatan-detail-${id}`, '/kegiatan');

    useEffect(() => {
        if (detail && !ready) {
            setForm(toFormValues(detail));
            setReady(true);
        }
    }, [detail, ready]);

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

    function submit() {
        update.mutate(
            { id, data: toPayload(form) },
            { onSuccess: () => router.visit(`/kegiatan/${id}`) },
        );
    }

    return (
        <AppLayout>
            <div className="flex flex-col gap-5">
                <div className="flex items-center gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 rounded-2xl shadow-sm">
                    <Link href={`/kegiatan/${id}`} 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="flex items-center gap-2 min-w-0">
                        <CalendarDaysIcon className="w-5 h-5 text-sky-600 shrink-0" />
                        <h1 className="text-lg sm:text-xl font-bold text-gray-900 truncate">
                            {ready ? `Edit: ${form.nama_kegiatan}` : 'Memuat...'}
                        </h1>
                    </div>
                </div>

                {ready && isManagerRole && (
                    <div className="rounded-2xl border border-gray-200 bg-gray-50 shadow-sm p-4 sm:p-6">
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4 items-start">
                            <KegiatanFields
                                kegiatanId={id}
                                form={form}
                                setForm={setForm}
                                rawKliens={rawKliens}
                                rawPas={rawPas}
                                rawNarasumbers={rawNarasumbers}
                                rawSuratMasuk={rawSuratMasuk}
                                rawSuratKeluar={rawSuratKeluar}
                                narasumberSearch={narasumberSearch}
                                setNarasumberSearch={setNarasumberSearch}
                            />
                        </div>
                        <div className="flex justify-end gap-3 border-t border-gray-200 pt-4 mt-4">
                            <Button variant="outline" onPress={() => router.visit(`/kegiatan/${id}`)}>Batal</Button>
                            <Button variant="primary" onPress={submit} isDisabled={update.isPending}>
                                {update.isPending ? 'Menyimpan...' : 'Simpan'}
                            </Button>
                        </div>
                    </div>
                )}
            </div>
        </AppLayout>
    );
}