import { useState } from "react";

import { cn } from "@/lib/utils";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "./dialog";

export interface ImageLightboxProps {
  /** Screen / area name — used for the trigger, placeholder chrome, and the enlarged view title. */
  label: string;
  /** Real screenshot. When omitted, a non-interactive faux-window placeholder is shown. */
  src?: string;
  /**
   * When true (default), a real screenshot becomes clickable and enlarges into a
   * centred dialog. Set false for a static, non-interactive preview.
   */
  zoomable?: boolean;
  /** Classes for the inline preview (sizing, visibility, etc.). */
  className?: string;
}

/** Inline thumbnail: the real screenshot, or a faux browser-window placeholder. */
function Preview({
  label,
  src,
  className,
}: Pick<ImageLightboxProps, "label" | "src" | "className">) {
  if (src) {
    return (
      <img
        src={src}
        alt={`${label} screen preview`}
        className={cn("block border border-border object-cover", className)}
      />
    );
  }

  return (
    <div
      className={cn(
        "overflow-hidden border border-border bg-muted/30",
        className,
      )}
    >
      <div className="flex items-center gap-1.5 border-b border-border bg-muted px-2 py-1.5">
        <span className="size-2 rounded-full bg-muted-foreground/30" />
        <span className="size-2 rounded-full bg-muted-foreground/30" />
        <span className="size-2 rounded-full bg-muted-foreground/30" />
        <span className="ml-2 truncate text-caption text-muted-foreground">
          {label}
        </span>
      </div>
      <div className="space-y-2 p-3">
        <div className="h-2 w-1/2 bg-muted-foreground/20" />
        <div className="h-2 w-3/4 bg-muted-foreground/15" />
        <div className="grid grid-cols-3 gap-2 pt-1">
          <div className="h-8 bg-muted-foreground/10" />
          <div className="h-8 bg-muted-foreground/10" />
          <div className="h-8 bg-muted-foreground/10" />
        </div>
        <div className="h-2 w-2/3 bg-muted-foreground/15" />
      </div>
    </div>
  );
}

/**
 * Inline screen preview. Renders a screenshot (or a faux-window placeholder when
 * no `src` is given) and, when `zoomable`, enlarges the screenshot into a centred
 * dialog on click. Stops click propagation so it can live inside a clickable row
 * without also triggering the row's action.
 */
export function ImageLightbox({
  label,
  src,
  zoomable = true,
  className,
}: ImageLightboxProps) {
  const [open, setOpen] = useState(false);

  // No screenshot, or zoom disabled → static preview / placeholder.
  if (!src || !zoomable) {
    return <Preview label={label} src={src} className={className} />;
  }

  return (
    <>
      <button
        type="button"
        aria-label={`Enlarge ${label} screenshot`}
        onClick={(e) => {
          e.stopPropagation();
          setOpen(true);
        }}
        className={cn("cursor-zoom-in overflow-hidden", className)}
      >
        <Preview label={label} src={src} className="size-full" />
      </button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>{label}</DialogTitle>
            <DialogDescription>Feature screenshot preview</DialogDescription>
          </DialogHeader>
          <img
            src={src}
            alt={`${label} screenshot`}
            className="max-h-[70vh] w-full border border-border object-contain"
          />
        </DialogContent>
      </Dialog>
    </>
  );
}