import { useState } from 'react';
import { Button, Modal } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { DataTable } from '@/Components/ui/DataTable';
import { FilePreview } from '@/Components/ui/FilePreview';
import { SuratKeluarModal } from '@/Components/Surat/SuratKeluarModal';
import { SuratKeluarDetailModal } from '@/Components/Surat/SuratKeluarDetailModal';
import { useDelete, useList } 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 } from '@heroicons/react/24/solid';

const STATUS_COLOR: Record<string, string> = {
    Draft: 'bg-gray-100 text-gray-500',
    Ditandatangani: 'bg-amber-100 text-amber-700',
    Terkirim: 'bg-emerald-100 text-emerald-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-500'}`}>
            {status}
        </span>
    );
}
import { formatDate } from '@/lib/formatDate';

interface SuratKeluar {
    id: number;
    kode: string;
    tanggal_surat: string;
    nomor_surat: string | null;
    tujuan: string | null;
    perihal: string | null;
    penandatangan: string | null;
    status: string;
    catatan: string | null;
    file_url: string | null;
    kegiatan_id?: number | null;
    kegiatan?: { id: number; nama_kegiatan: string } | null;
}

interface Option {
    id: number;
    nama?: string;
    kode?: string;
    nama_kegiatan?: string;
}

export default function SuratKeluarPage() {
    const { canEdit, canDelete } = useAuth();
    const allowEdit = canEdit('surat_keluar');
    const allowDelete = canDelete('surat_keluar');
    const [modalOpen, setModalOpen] = useState(false);
    const [editingRow, setEditingRow] = useState<SuratKeluar | null>(null);
    const [viewId, setViewId] = useState<number | null>(null);

    const [search, setSearch] = useState('');
    const [status, setStatus] = useState('');
    const [dariTanggal, setDariTanggal] = useState('');
    const [sampaiTanggal, setSampaiTanggal] = useState('');
    const { data, isLoading } = useList<SuratKeluar>('surat-keluar', '/surat-keluar', {
        search, status: status || undefined,
        dari_tanggal: dariTanggal || undefined, sampai_tanggal: sampaiTanggal || undefined,
    });
    const remove = useDelete('surat-keluar', '/surat-keluar');
    const confirm = useConfirm();

    function openCreate() {
        setEditingRow(null);
        setModalOpen(true);
    }

    function openEdit(row: SuratKeluar) {
        setEditingRow(row);
        setModalOpen(true);
    }

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

    function resetFilters() {
        setStatus('');
        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">Surat Keluar</h1>
                    {allowEdit && (
                        <Button variant="primary" onPress={openCreate} className="shrink-0">
                            <PlusIcon className="w-4 h-4" /> <span>Surat Keluar</span>
                        </Button>
                    )}
                </div>

                <div className="flex items-center gap-2">
                    <div className="flex-1 min-w-0">
                        <SearchInput value={search} onChange={setSearch} placeholder="Cari surat..." />
                    </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 Surat Keluar</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 Surat</label>
                                        <FilterSelect
                                            value={status}
                                            onChange={setStatus}
                                            placeholder="Semua Status"
                                            items={[
                                                { id: 'Draft', label: 'Draft' },
                                                { id: 'Ditandatangani', label: 'Ditandatangani' },
                                                { id: 'Terkirim', label: 'Terkirim' },
                                            ]}
                                        />
                                    </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_surat), sortKey: (r) => r.tanggal_surat },
                        { header: 'Kode', cell: (r) => r.kode, sortKey: (r) => r.kode },
                        { header: 'Tujuan', cell: (r) => r.tujuan ?? '-', sortKey: (r) => r.tujuan },
                        { header: 'Perihal', cell: (r) => r.perihal ?? '-', sortKey: (r) => r.perihal },
                        { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                        { header: 'Berkas', cell: (r) => r.file_url ? <FilePreview url={r.file_url} /> : '-' },
                        {
                            header: 'Aksi', cell: (r: SuratKeluar) => (
                                <RowActions
                                    onView={() => setViewId(r.id)}
                                    onEdit={allowEdit ? () => openEdit(r) : undefined}
                                    onDelete={allowDelete ? async () => { if (await confirm({ title: 'Hapus surat ini?' })) remove.mutate(r.id); } : undefined}
                                />
                            ),
                        },
                    ]}
                    rows={data?.data ?? []}
                    rowKey={(r) => r.id}
                    isLoading={isLoading}
                />

                <SuratKeluarModal open={modalOpen} editing={editingRow} onClose={() => setModalOpen(false)} />

                <SuratKeluarDetailModal id={viewId} onClose={() => setViewId(null)} />
            </div>
        </AppLayout>
    );
}