import { Paperclip } from 'lucide-react';
import { useState } from 'react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';

const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const VIDEO_EXTENSIONS = ['mp4', 'webm'];

function fileExtension(fileName: string): string {
    return fileName.split('.').pop()?.toLowerCase() ?? '';
}

type AttachmentPreviewDialogProps = {
    fileUrl: string;
    fileName: string;
    className?: string;
};

export function AttachmentPreviewDialog({
    fileUrl,
    fileName,
    className,
}: AttachmentPreviewDialogProps) {
    const [open, setOpen] = useState(false);
    const extension = fileExtension(fileName);
    const isImage = IMAGE_EXTENSIONS.includes(extension);
    const isVideo = VIDEO_EXTENSIONS.includes(extension);
    const isPdf = extension === 'pdf';

    return (
        <>
            <button
                type="button"
                onClick={() => setOpen(true)}
                className={cn(
                    'inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80',
                    className,
                )}
            >
                <Paperclip className="h-3.5 w-3.5 shrink-0" />
                <span className="truncate">{fileName}</span>
            </button>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent
                    className={cn(
                        'flex flex-col overflow-hidden',
                        isPdf
                            ? 'h-[90vh] max-h-[90vh] w-[95vw] max-w-6xl sm:max-w-6xl'
                            : 'max-h-[85vh] sm:max-w-lg',
                    )}
                >
                    <DialogHeader>
                        <DialogTitle className="truncate pr-6">
                            {fileName}
                        </DialogTitle>
                    </DialogHeader>

                    <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-md bg-muted/30">
                        {isImage && (
                            <img
                                src={fileUrl}
                                alt={fileName}
                                className="max-h-[70vh] max-w-full object-contain"
                            />
                        )}
                        {isVideo && (
                            <video
                                src={fileUrl}
                                controls
                                className="max-h-[70vh] w-full"
                            />
                        )}
                        {isPdf && (
                            <iframe
                                src={fileUrl}
                                title={fileName}
                                className="h-full w-full border-0"
                            />
                        )}
                        {!isImage && !isVideo && !isPdf && (
                            <div className="flex flex-col items-center gap-3 py-16 text-center text-sm text-muted-foreground">
                                <Paperclip className="h-8 w-8" />
                                <p>Pratinjau tidak tersedia untuk file ini.</p>
                                <a
                                    href={fileUrl}
                                    target="_blank"
                                    rel="noreferrer"
                                    className="text-primary underline underline-offset-4 hover:text-primary/80"
                                >
                                    Buka / unduh file
                                </a>
                            </div>
                        )}
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}