import { Modal } from '@heroui/react';
import { ArrowTopRightOnSquareIcon, DocumentIcon, DocumentTextIcon, PaperClipIcon } from '@heroicons/react/24/solid';

interface FileInfo {
    original_name: string;
    url: string;
}

export const isImage = (url: string) => /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i.test(url);
export const isPdf = (url: string) => /\.pdf(\?.*)?$/i.test(url);

export function AttachmentThumb({ file, className = 'w-10 h-10' }: { file: FileInfo; className?: string }) {
    if (isImage(file.url)) {
        return <img src={file.url} alt={file.original_name} className={`${className} rounded-md object-cover border border-gray-200 shrink-0`} />;
    }
    if (isPdf(file.url)) {
        return (
            <span className={`${className} rounded-md bg-red-50 border border-red-100 text-red-500 flex items-center justify-center shrink-0`}>
                <DocumentTextIcon className="w-1/2 h-1/2" />
            </span>
        );
    }
    return (
        <span className={`${className} rounded-md bg-gray-100 border border-gray-200 text-gray-400 flex items-center justify-center shrink-0`}>
            <DocumentIcon className="w-1/2 h-1/2" />
        </span>
    );
}

export function AttachmentPreviewModal({ file, onOpenChange }: { file: FileInfo | null; onOpenChange: (open: boolean) => void }) {
    return (
        <Modal isOpen={!!file} onOpenChange={onOpenChange}>
            <Modal.Backdrop>
                <Modal.Container>
                    <Modal.Dialog className="max-w-2xl w-full bg-gray-50">
                        <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                            <Modal.Icon className="bg-sky-100 text-sky-600">
                                <PaperClipIcon className="w-5 h-5" />
                            </Modal.Icon>
                            <Modal.Heading className="truncate">{file?.original_name}</Modal.Heading>
                        </Modal.Header>
                        <Modal.CloseTrigger />
                        <Modal.Body>
                            {file && (
                                isImage(file.url) ? (
                                    <img src={file.url} alt={file.original_name} className="max-h-[65vh] w-full object-contain rounded-lg bg-white" />
                                ) : isPdf(file.url) ? (
                                    <iframe src={file.url} title={file.original_name} className="w-full h-[65vh] rounded-lg border border-gray-200 bg-white" />
                                ) : (
                                    <div className="flex flex-col items-center gap-3 py-12 text-gray-500">
                                        <DocumentIcon className="w-12 h-12 text-gray-300" />
                                        <p className="text-sm">Pratinjau tidak tersedia untuk jenis file ini.</p>
                                        <a
                                            href={file.url}
                                            target="_blank"
                                            rel="noreferrer"
                                            className="inline-flex items-center gap-1.5 text-sm text-sky-600 hover:underline"
                                        >
                                            Buka file di tab baru <ArrowTopRightOnSquareIcon className="w-3.5 h-3.5" />
                                        </a>
                                    </div>
                                )
                            )}
                        </Modal.Body>
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}