import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
import "./appearance-preview.css";
import {
  Monitor,
  Tablet,
  Smartphone,
  RotateCcw,
  type LucideIcon,
} from "lucide-react";
import { Card, CardTitle } from "./card";
import { Button } from "./button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "./tooltip";

export interface AppearancePreviewState {
  value: string;
  label: string;
  icon: LucideIcon;
}
const devices = [
  { value: "desktop", label: "Desktop", width: 960, icon: Monitor },
  { value: "tablet", label: "Tablet", width: 768, icon: Tablet },
  { value: "mobile", label: "Mobile", width: 375, icon: Smartphone },
];

export function PreviewAction({
  label,
  icon: Icon,
  selected,
  onClick,
}: {
  label: string;
  icon: LucideIcon;
  selected?: boolean;
  onClick: () => void;
}) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label={label}
          aria-pressed={selected}
          onClick={onClick}
          className={`h-8 w-8 rounded-md ${selected ? "bg-background text-primary shadow-sm hover:bg-background" : "text-muted-foreground"}`}
        >
          <Icon className="h-4 w-4" aria-hidden="true" />
        </Button>
      </TooltipTrigger>
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  );
}

/** One bounded canvas, one fit-to-panel transform, and no decorative inner frame. */
export function AppearancePreview({
  feature,
  states = [],
  children,
  note = "Sample content · Preview only · Changes are not saved",
  contentClassName = "",
}: {
  feature: string;
  states?: AppearancePreviewState[];
  children: (state: string) => ReactNode;
  note?: string;
  contentClassName?: string;
}) {
  const [device, setDevice] = useState("desktop");
  const [state, setState] = useState(states[0]?.value || "default");
  const [revision, setRevision] = useState(0);
  const [size, setSize] = useState({ available: 0, height: 0 });
  const canvas = useRef<HTMLDivElement>(null);
  const frame = useRef<HTMLDivElement>(null);
  const selectedDevice = devices.find((item) => item.value === device)!;
  const width = selectedDevice.width;
  const activeState = states.some((item) => item.value === state)
    ? state
    : states[0]?.value || "default";
  const scale = size.available
    ? Math.min(1, Math.max(1, size.available - 32) / width)
    : 1;
  useLayoutEffect(() => {
    const measure = () => {
      // Unscaled layout dimensions prevent feedback loops after a fit-to-panel transform.
      const next = {
        available: canvas.current?.clientWidth || 0,
        height: frame.current?.offsetHeight || 0,
      };
      setSize((previous) =>
        previous.available === next.available && previous.height === next.height
          ? previous
          : next,
      );
    };
    measure();
    const observer = new ResizeObserver(measure);
    if (canvas.current) observer.observe(canvas.current);
    if (frame.current) observer.observe(frame.current);
    return () => observer.disconnect();
  }, []);
  return (
    <Card className="min-w-0 self-start overflow-hidden shadow-none xl:sticky xl:top-[220px] xl:flex xl:max-h-[calc(100dvh-280px)] xl:flex-col">
      <TooltipProvider delayDuration={200}>
        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b px-5 py-4">
          <CardTitle role="heading" aria-level={2} className="text-base">
            Live preview
          </CardTitle>
          <div className="flex flex-wrap items-center gap-2">
            <div
              role="group"
              aria-label={`${feature} preview device`}
              className="inline-flex rounded-lg bg-muted p-1"
            >
              {devices.map((item) => (
                <PreviewAction
                  key={item.value}
                  label={item.label}
                  icon={item.icon}
                  selected={device === item.value}
                  onClick={() => setDevice(item.value)}
                />
              ))}
            </div>
            {states.length > 1 && (
              <div
                role="group"
                aria-label={`${feature} preview state`}
                className="inline-flex flex-wrap rounded-lg bg-muted p-1"
              >
                {states.map((item) => (
                  <PreviewAction
                    key={item.value}
                    label={item.label}
                    icon={item.icon}
                    selected={activeState === item.value}
                    onClick={() => setState(item.value)}
                  />
                ))}
              </div>
            )}
            <PreviewAction
              label={`Reset ${feature.toLowerCase()} preview`}
              icon={RotateCcw}
              onClick={() => {
                setState(states[0]?.value || "default");
                setRevision((value) => value + 1);
                if (canvas.current) canvas.current.scrollTop = 0;
              }}
            />
          </div>
        </div>
      </TooltipProvider>
      <div
        ref={canvas}
        role="region"
        aria-label={`${feature} preview canvas`}
        tabIndex={0}
        className="max-h-[60vh] min-h-64 overflow-auto bg-muted/40 py-5 [scrollbar-gutter:stable] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40 xl:min-h-0 xl:flex-1"
        style={{
          backgroundImage:
            "radial-gradient(hsl(var(--border)) 1px, transparent 1px)",
          backgroundSize: "16px 16px",
        }}
      >
        <div
          className="relative mx-auto"
          style={{
            width: width * scale,
            height: size.height * scale,
            visibility: size.available ? "visible" : "hidden",
          }}
        >
          <div
            ref={frame}
            data-swift-commerce-appearance-frame
            className="absolute left-0 top-0 origin-top-left"
            style={{
              width,
              transform: `scale(${scale})`,
              containerType: "inline-size",
              containerName: "swift-commerce-appearance-preview",
            }}
          >
            <div
              key={`${activeState}:${revision}`}
              className={contentClassName}
            >
              {children(activeState)}
            </div>
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-t px-5 py-3 text-xs text-muted-foreground">
        <span>{note}</span>
        <span aria-live="polite">
          {selectedDevice.label} · {width}px · {Math.round(scale * 100)}%
        </span>
      </div>
    </Card>
  );
}