import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import type { NormalizedPost } from "@/lib/grabber/sites";

export function Lightbox({ post, onClose }: { post: NormalizedPost | null; onClose: () => void }) {
  return (
    <Dialog open={!!post} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="max-w-5xl max-h-[92vh] overflow-y-auto p-0">
        {post && (
          <div className="flex flex-col md:flex-row gap-4 p-4">
            <div className="flex-1 flex items-center justify-center bg-black rounded">
              {/\.(mp4|webm)$/i.test(post.fileUrl) ? (
                <video src={post.fileUrl} controls className="max-h-[80vh] max-w-full" />
              ) : (
                <img
                  src={post.fileUrl}
                  alt={`post ${post.id}`}
                  className="max-h-[80vh] max-w-full object-contain"
                />
              )}
            </div>
            <div className="md:w-64 shrink-0 space-y-2 text-sm">
              <div className="font-mono text-xs text-muted-foreground">#{post.id}</div>
              <div className="flex gap-1 flex-wrap">
                {post.rating && <Badge variant="outline">{post.rating}</Badge>}
                {post.score !== undefined && <Badge variant="secondary">★ {post.score}</Badge>}
              </div>
              {post.source && (
                <a
                  href={post.source}
                  target="_blank"
                  rel="noreferrer"
                  className="text-primary underline break-all block"
                >
                  source
                </a>
              )}
              <div className="text-xs text-muted-foreground">tags</div>
              <div className="flex gap-1 flex-wrap max-h-96 overflow-y-auto">
                {post.tags.map((t) => (
                  <Badge key={t} variant="outline" className="font-normal">
                    {t}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}