import { useState } from "react";
import { Button } from "~/ui/Button";
import { cn } from "~/utils/cn";

const MODES = ["side-by-side", "swipe"] as const;
const IMAGE_PATH = /\.(png|jpe?g|gif|webp|avif|ico|bmp)$/i;
const HALF = 50;

export function isImagePath(path: string): boolean {
  return IMAGE_PATH.test(path);
}

/** Raw URL prefixes (`/owner/repo/raw/<rev>`) for the two sides of a diff. */
export type ImageSources = { base: string | null; head: string };

function Frame({ src, label, tone }: { src: string | null; label: string; tone: "danger" | "success" }) {
  return (
    <figure className="flex min-w-0 flex-1 flex-col items-center gap-2">
      <figcaption className={cn("text-xs", tone === "danger" ? "text-kumo-danger" : "text-kumo-success")}>
        {label}
      </figcaption>
      {src ? (
        <img
          src={src}
          alt={label}
          className={cn("max-h-96 max-w-full border", tone === "danger" ? "border-danger-900" : "border-success-900")}
        />
      ) : (
        <div className="py-10 text-xs text-kumo-inactive">None</div>
      )}
    </figure>
  );
}

function Swipe({ before, after }: { before: string; after: string }) {
  const [position, setPosition] = useState(HALF);
  return (
    <div className="space-y-3">
      <div className="relative mx-auto w-fit">
        <img src={after} alt="After" className="block max-h-96 max-w-full" />
        <div className="absolute inset-0 overflow-hidden" style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}>
          <img src={before} alt="Before" className="block max-h-96 max-w-full" />
        </div>
        <div className="absolute inset-y-0 w-px bg-accent-500" style={{ left: `${position}%` }} />
      </div>
      <label className="mx-auto flex max-w-sm items-center gap-2 text-xs text-kumo-subtle">
        Before
        <input
          type="range"
          min={0}
          max={100}
          value={position}
          onChange={(event) => setPosition(Number(event.target.value))}
          className="flex-1 accent-accent-500"
        />
        After
      </label>
    </div>
  );
}

export function ImageDiff({ path, before, after }: { path: string; before: string | null; after: string | null }) {
  const [mode, setMode] = useState<(typeof MODES)[number]>("side-by-side");
  return (
    <div id={`diff-${path}`} className="overflow-hidden rounded-lg border border-kumo-hairline">
      <header className="flex items-center gap-2 border-b border-kumo-hairline bg-kumo-base/60 px-4 py-2">
        <span className="truncate font-mono text-sm text-kumo-default">{path}</span>
        {before && after && (
          <div className="ml-auto flex gap-1">
            {MODES.map((value) => (
              <Button
                key={value}
                size="sm"
                variant={mode === value ? "secondary" : "ghost"}
                onClick={() => setMode(value)}
              >
                {value === "swipe" ? "Swipe" : "2-up"}
              </Button>
            ))}
          </div>
        )}
      </header>
      <div className="bg-[repeating-conic-gradient(#1f2937_0_25%,#111827_0_50%)] bg-[length:16px_16px] p-4">
        {before && after && mode === "swipe" ? (
          <Swipe before={before} after={after} />
        ) : (
          <div className="flex gap-4">
            <Frame src={before} label="Before" tone="danger" />
            <Frame src={after} label="After" tone="success" />
          </div>
        )}
      </div>
    </div>
  );
}