"use client"

import { Dialog, DialogContent } from "@/shared/components/ui/dialog"

export type LightboxItem = {
    id: number
    url: string | null
    media_type: "photo" | "video" | "audio" | "document"
    caption?: string | null
}

export function CheckpointMediaLightbox({
    open,
    onOpenChange,
    item,
}: {
    open: boolean
    onOpenChange: (o: boolean) => void
    item: LightboxItem | null
}) {
    if (!item) return null
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-3xl p-0 bg-black/95 border-0">
                <div className="flex items-center justify-center min-h-[60vh] max-h-[85vh] p-4">
                    {item.media_type === "photo" && item.url && (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                            src={item.url}
                            alt={item.caption ?? ""}
                            className="max-w-full max-h-[80vh] object-contain"
                        />
                    )}
                    {item.media_type === "video" && item.url && (
                        <video src={item.url} controls autoPlay className="max-w-full max-h-[80vh]" />
                    )}
                    {item.media_type === "audio" && item.url && (
                        <audio src={item.url} controls className="w-full" />
                    )}
                    {item.media_type === "document" && item.url && (
                        <a
                            href={item.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-white underline"
                        >
                            Open document
                        </a>
                    )}
                </div>
                {item.caption && (
                    <div className="bg-black/80 text-white text-sm px-4 py-2 text-center">
                        {item.caption}
                    </div>
                )}
            </DialogContent>
        </Dialog>
    )
}