import { useState } from 'react';
import { Button, Modal } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { DataTable } from '@/Components/ui/DataTable';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { FormModal, FormSection, FullWidth } from '@/Components/ui/FormModal';
import { DetailModal, DetailRow } from '@/Components/ui/DetailModal';
import { api } from '@/lib/api';
import { useAll, useCreate, useDelete, useList, useUpdate } from '@/hooks/useResource';
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 { PlusIcon, FunnelIcon, XMarkIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardDocumentCheckIcon } from '@heroicons/react/24/solid';
import { useQueryClient } from '@tanstack/react-query';
import { formatDate, todayLocal } from '@/lib/formatDate';

interface Disposisi {
    id: number;
    kode: string;
    tanggal_disposisi: string;
    instruksi: string;
    status: string;
    prioritas: string;
    batas_waktu: string | null;
    kegiatan?: { nama_kegiatan: string };
    pa_ditugaskan?: { name: string };
}

interface KegiatanOpt { id: number; nama_kegiatan: string; }
interface PaOpt { id: number; name: string; }
interface SuratMasukOpt { id: number; nomor_surat: string; perihal: string; }

const STATUS_OPTS = ['Belum Dimulai', 'Proses', 'Menunggu', 'Selesai', 'Dibatalkan'];
const STATUS_FLOW = ['Belum Dimulai', 'Proses', 'Menunggu', 'Selesai'];
const PRIORITAS_OPTS = ['Rendah', 'Sedang', 'Tinggi', 'Mendesak'];

const STATUS_COLOR: Record<string, string> = {
    'Belum Dimulai': 'bg-rose-100 text-rose-700',
    Proses: 'bg-amber-100 text-amber-700',
    Menunggu: 'bg-orange-100 text-orange-700',
    Selesai: 'bg-emerald-100 text-emerald-700',
    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>
    );
}

const emptyForm = {
    tanggal_disposisi: todayLocal(),
    instruksi: '',
    surat_masuk_id: null as number | null,
    kegiatan_id: null as number | null,
    pa_ditugaskan_id: null as number | null,
    batas_waktu: '',
    prioritas: 'Sedang',
    status: 'Belum Dimulai',
    tindak_lanjut: '',
    hasil_catatan: '',
};

export default function DisposisiIndex() {
    const { canWrite, canDelete, canEdit, isPa } = useAuth();
    const allowEdit = canEdit('disposisi');
    const allowDelete = canDelete('disposisi');
    const qc = useQueryClient();
    const [modalOpen, setModalOpen] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [form, setForm] = useState<typeof emptyForm>(emptyForm);
    const [search, setSearch] = useState('');
    const [status, setStatus] = useState('');
    const [prioritas, setPrioritas] = useState('');
    const [paId, setPaId] = useState('');
    const [viewId, setViewId] = useState<number | null>(null);
    const [dariTanggal, setDariTanggal] = useState('');
    const [sampaiTanggal, setSampaiTanggal] = useState('');

    const { data, isLoading } = useList<Disposisi>('disposisi', '/disposisi', {
        search, 
        status: status || undefined,
        prioritas: prioritas || undefined,
        pa_id: paId || undefined,
        dari_tanggal: dariTanggal || undefined, 
        sampai_tanggal: sampaiTanggal || undefined,
    });
    const { data: kegiatans } = useAll<{ data: KegiatanOpt[] }>('kegiatan', '/kegiatan', { per_page: 100 });
    const { data: suratMasuks } = useAll<{ data: SuratMasukOpt[] }>('surat-masuk', '/surat-masuk', { per_page: 100 });
    const { data: pasData } = useAll<PaOpt[]>('pa', '/users', { per_page: 100, role: 'PA' });
    const { data: viewDetail } = useAll<any>('disposisi-detail', viewId ? `/disposisi/${viewId}` : '', {}, !!viewId);

    const rawPas: any[] = Array.isArray(pasData) ? pasData : Array.isArray((pasData as any)?.data) ? (pasData as any).data : [];
    const paOpts = rawPas.map((p: any) => ({ id: p.id, label: p.name }));

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

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

    async function selectKegiatan(kegiatanId: number | null) {
        setForm((s) => ({ ...s, kegiatan_id: kegiatanId }));
        if (!kegiatanId) return;
        const { data: k } = await api.get(`/kegiatan/${kegiatanId}/for-disposisi`);
        setForm((s) => ({ ...s, pa_ditugaskan_id: k.pa_utama_id ?? s.pa_ditugaskan_id }));
    }

    function openEdit(row: Disposisi) {
        setEditingId(row.id);
        setForm({
            tanggal_disposisi: row.tanggal_disposisi.slice(0, 10),
            instruksi: row.instruksi,
            surat_masuk_id: (row as any).surat_masuk_id ?? null,
            kegiatan_id: (row as any).kegiatan_id ?? null,
            pa_ditugaskan_id: (row as any).pa_ditugaskan_id ?? null,
            batas_waktu: row.batas_waktu?.slice(0, 10) ?? '',
            prioritas: row.prioritas,
            status: row.status,
            tindak_lanjut: (row as any).tindak_lanjut ?? '',
            hasil_catatan: (row as any).hasil_catatan ?? '',
        });
        setModalOpen(true);
    }

    function submit() {
        const action = editingId
            ? update.mutateAsync({ id: editingId, data: form })
            : create.mutateAsync(form);

        action.then(() => setModalOpen(false));
    }

    function changeStatus(newStatus: string) {
        if (!viewId) return;
        update.mutate({ id: viewId, data: { status: newStatus } }, {
            onSuccess: () => qc.setQueryData(['disposisi-detail', 'all', {}], (old: any) => old && { ...old, status: newStatus }),
        });
    }

    const [filterModalOpen, setFilterModalOpen] = useState(false);
    const activeFilterCount = [status, prioritas, paId, dariTanggal, sampaiTanggal].filter(Boolean).length;
    const isFilterActive = activeFilterCount > 0;

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

    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">Disposisi</h1>
                    {allowEdit && (
                        <Button variant="primary" onPress={openCreate} className="shrink-0">
                            <PlusIcon className="w-4 h-4" /> <span>Disposisi Baru</span>
                        </Button>
                    )}
                </div>

                <div className="flex items-center gap-2">
                    <div className="flex-1 min-w-0">
                        <SearchInput value={search} onChange={setSearch} placeholder="Cari disposisi..." />
                    </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>

                <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 Disposisi</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">Status Disposisi</label>
                                        <FilterSelect value={status} onChange={setStatus} placeholder="Semua Status" items={STATUS_OPTS.map((v) => ({ id: v, label: v }))} />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Prioritas</label>
                                        <FilterSelect value={prioritas} onChange={setPrioritas} placeholder="Semua Prioritas" items={['Rendah', 'Sedang', 'Tinggi', 'Mendesak'].map((v) => ({ id: v, label: v }))} />
                                    </div>
                                    {!isPa && (
                                        <div>
                                            <label className="block font-medium text-gray-700 mb-1">PA Ditugaskan</label>
                                            <FilterSelect value={paId} onChange={setPaId} placeholder="Semua PA" items={paOpts} />
                                        </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>

                <DataTable
                    columns={[
                        { header: 'Tanggal', cell: (r) => formatDate(r.tanggal_disposisi), sortKey: (r) => r.tanggal_disposisi },
                        { header: 'Kode', cell: (r) => r.kode, sortKey: (r) => r.kode },
                        { header: 'Kegiatan', cell: (r) => r.kegiatan?.nama_kegiatan ?? '-', sortKey: (r) => r.kegiatan?.nama_kegiatan ?? null },
                        { header: 'Ditugaskan', cell: (r) => r.pa_ditugaskan?.name ?? '-', sortKey: (r) => r.pa_ditugaskan?.name ?? null },
                        { header: 'Prioritas', cell: (r) => r.prioritas, sortKey: (r) => r.prioritas },
                        { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                        {
                            header: 'Aksi',
                            cell: (r: Disposisi) => (
                                <RowActions
                                    onView={() => setViewId(r.id)}
                                    onEdit={allowEdit || isPa ? () => openEdit(r) : undefined}
                                    editLabel={isPa ? 'Update Status' : 'Edit'}
                                    onDelete={allowDelete ? async () => { if (await confirm({ title: 'Hapus disposisi ini?' })) remove.mutate(r.id); } : undefined}
                                />
                            ),
                        },
                    ]}
                    rows={data?.data ?? []}
                    rowKey={(r) => r.id}
                    isLoading={isLoading}
                    onRowClick={(r) => setViewId(r.id)}
                />

                <FormModal
                    isOpen={modalOpen}
                    onOpenChange={setModalOpen}
                    title={isPa ? 'Update Status Disposisi' : editingId ? 'Edit Disposisi' : 'Disposisi Baru'}
                    subtitle={isPa ? 'Perbarui progres dan status tugas Anda.' : editingId ? 'Perbarui detail disposisi di bawah ini.' : 'Disposisi baru akan langsung ditugaskan ke PA terkait.'}
                    icon={<ClipboardDocumentCheckIcon className="w-5 h-5" />}
                    onSubmit={submit}
                    isSubmitting={create.isPending || update.isPending}
                >
                    {!isPa && (
                        <>
                            <FormSection label="Informasi Disposisi" first />
                            <Field label="Tanggal Disposisi" type="date" required value={form.tanggal_disposisi} onChange={(v) => setForm((s) => ({ ...s, tanggal_disposisi: v }))} />
                            <SelectField
                                label="Surat Masuk"
                                items={(suratMasuks?.data ?? []).map((s) => ({ id: s.id, label: `${s.nomor_surat} - ${s.perihal}` }))}
                                selectedKey={form.surat_masuk_id}
                                onSelectionChange={(v) => setForm((s) => ({ ...s, surat_masuk_id: v as number | null }))}
                                clearable
                            />
                            <SelectField
                                label="Kegiatan (auto-fill PA)"
                                items={(kegiatans?.data ?? []).map((k) => ({ id: k.id, label: k.nama_kegiatan }))}
                                selectedKey={form.kegiatan_id}
                                onSelectionChange={(v) => selectKegiatan(v as number | null)}
                                clearable
                            />
                            <FullWidth>
                                <Field label="Instruksi" multiline required value={form.instruksi} onChange={(v) => setForm((s) => ({ ...s, instruksi: v }))} />
                            </FullWidth>

                            <FormSection label="Penugasan" />
                            <SelectField
                                label="PA Ditugaskan"
                                items={paOpts}
                                selectedKey={form.pa_ditugaskan_id}
                                onSelectionChange={(v) => setForm((s) => ({ ...s, pa_ditugaskan_id: v as number | null }))}
                                clearable
                            />
                            <Field label="Batas Waktu" type="date" value={form.batas_waktu} onChange={(v) => setForm((s) => ({ ...s, batas_waktu: v }))} />
                            <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="Progres" first={isPa} />
                    <SelectField
                        label="Status"
                        items={STATUS_OPTS.map((v) => ({ id: v, label: v }))}
                        selectedKey={form.status}
                        onSelectionChange={(v) => setForm((s) => ({ ...s, status: v as string }))}
                    />
                    {isPa && (
                        <FullWidth>
                            <Field label="Tindak Lanjut" multiline value={form.tindak_lanjut} onChange={(v) => setForm((s) => ({ ...s, tindak_lanjut: v }))} />
                        </FullWidth>
                    )}
                    <FullWidth>
                        <Field label="Catatan Hasil" multiline value={form.hasil_catatan} onChange={(v) => setForm((s) => ({ ...s, hasil_catatan: v }))} />
                    </FullWidth>
                </FormModal>

                <DetailModal
                    isOpen={!!viewId}
                    onOpenChange={(open) => !open && setViewId(null)}
                    title={viewDetail?.kode ?? 'Detail Disposisi'}
                    footer={
                        viewDetail && (canWrite || isPa) && STATUS_FLOW.includes(viewDetail.status) ? (
                            <div className="flex items-center justify-between w-full gap-3">
                                <Button
                                    variant="outline"
                                    size="sm"
                                    isDisabled={STATUS_FLOW.indexOf(viewDetail.status) === 0 || update.isPending}
                                    onPress={() => changeStatus(STATUS_FLOW[STATUS_FLOW.indexOf(viewDetail.status) - 1])}
                                >
                                    <ChevronLeftIcon className="w-4 h-4" /> Status Sebelumnya
                                </Button>
                                <StatusBadge status={viewDetail.status} />
                                <Button
                                    variant="outline"
                                    size="sm"
                                    isDisabled={STATUS_FLOW.indexOf(viewDetail.status) === STATUS_FLOW.length - 1 || update.isPending}
                                    onPress={() => changeStatus(STATUS_FLOW[STATUS_FLOW.indexOf(viewDetail.status) + 1])}
                                >
                                    Status Selanjutnya <ChevronRightIcon className="w-4 h-4" />
                                </Button>
                            </div>
                        ) : undefined
                    }
                >
                    {viewDetail && (
                        <>
                            <DetailRow label="Kode" value={viewDetail.kode} />
                            <DetailRow label="Tanggal Disposisi" value={formatDate(viewDetail.tanggal_disposisi)} />
                            <DetailRow label="Kegiatan" value={viewDetail.kegiatan?.nama_kegiatan} />
                            <DetailRow label="PA Ditugaskan" value={viewDetail.pa_ditugaskan?.name} />
                            <DetailRow label="Prioritas" value={viewDetail.prioritas} />
                            <DetailRow label="Status" value={<StatusBadge status={viewDetail.status} />} />
                            <DetailRow label="Batas Waktu" value={formatDate(viewDetail.batas_waktu)} />
                            <DetailRow label="Surat Masuk" value={viewDetail.surat_masuk ? `${viewDetail.surat_masuk.nomor_surat ?? '-'} - ${viewDetail.surat_masuk.perihal ?? ''}` : null} />
                            <DetailRow span2 label="Instruksi" value={viewDetail.instruksi} />
                            <DetailRow span2 label="Tindak Lanjut" value={viewDetail.tindak_lanjut} />
                            <DetailRow span2 label="Catatan Hasil" value={viewDetail.hasil_catatan} />
                        </>
                    )}
                </DetailModal>
            </div>
        </AppLayout>
    );
}