import { DetailModal, DetailRow } from '@/Components/ui/DetailModal';
import { FilePreview } from '@/Components/ui/FilePreview';
import { useAll } from '@/hooks/useResource';
import { formatDate } from '@/lib/formatDate';

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>
    );
}

interface Props {
    id: number | null;
    onClose: () => void;
}

export function SuratKeluarDetailModal({ id, onClose }: Props) {
    const { data } = useAll<any>('surat-keluar-detail', id ? `/surat-keluar/${id}` : '', {}, !!id);

    return (
        <DetailModal isOpen={!!id} onOpenChange={(open) => !open && onClose()} title={data?.perihal ?? 'Detail Surat Keluar'}>
            {data && (
                <>
                    <DetailRow label="Kode" value={data.kode} />
                    <DetailRow label="Tanggal Surat" value={formatDate(data.tanggal_surat)} />
                    <DetailRow label="Nomor Surat" value={data.nomor_surat} />
                    <DetailRow label="Tujuan" value={data.tujuan} />
                    <DetailRow label="Penandatangan" value={data.penandatangan} />
                    <DetailRow label="Status" value={<StatusBadge status={data.status} />} />
                    <DetailRow
                        label="Data Kegiatan"
                        value={data.kegiatan?.nama_kegiatan ? (
                            <span className="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium bg-sky-100 text-sky-700">
                                {data.kegiatan.nama_kegiatan}
                            </span>
                        ) : null}
                    />
                    <DetailRow span2 label="Perihal" value={data.perihal} />
                    <DetailRow span2 label="Catatan" value={data.catatan} />
                    <DetailRow label="Berkas" value={data.file_url ? <FilePreview url={data.file_url} size={72} /> : null} />
                </>
            )}
        </DetailModal>
    );
}