import { useRef, useState } from "react";
import { Card, Dropdown, Radio } from "@elvis/ui";
import mandrillImage from "./assets/mandrill.png";
import marioImage from "./assets/mario.png";
import racoonImage from "./assets/racoon.png";
import cameramanImage from "./assets/cameraman.png";
import motocrossImage from "./assets/motocross.png";
import peppersImage from "./assets/peppers.png";
import usePoolingProcessing from "./usePoolingProcessing.ts";
import type { PoolingKernel } from "./usePoolingProcessing.ts";

const IMAGE_OPTIONS = ["Upload...", "Enter URL...", "Mandrill", "Cameraman", "Motocross", "Peppers", "Super Mario", "Racoon"] as const;
const POOLING_KERNELS: PoolingKernel[] = [
  "Max (per channel)",
  "Average (per channel)",
  "Max (across channels)",
  "Average (across channels)",
];
const MIN_KERNEL_SIZE = 1;
const MAX_KERNEL_SIZE = 20;

export default function PoolingVisualizer() {
  const [rawImage, setRawImage] = useState(mandrillImage);
  const [useColor, setUseColor] = useState(true);
  const [kernel, setKernel] = useState<PoolingKernel>("Max (per channel)");
  const [kernelWidth, setKernelWidth] = useState(2);
  const [kernelHeight, setKernelHeight] = useState(2);
  const [stride, setStride] = useState(2);
  const [dilation, setDilation] = useState(1);
  const [padding, setPadding] = useState(0);
  const result = usePoolingProcessing(rawImage, useColor, kernel, kernelWidth, kernelHeight, stride, dilation, padding);

  return (
    <div className="grid grid-cols-[minmax(0,7fr)_minmax(0,3fr)] gap-8 h-full min-h-0">
      <Card className="grid grid-cols-2 gap-4 h-full min-h-0">
        <ImagePane title="Input" image={result.input} dimensions={result.inputSize} />
        <ImagePane title="Output" image={result.output} dimensions={result.outputSize} />
      </Card>
      <Card className="flex flex-col gap-6 h-full min-h-0 overflow-auto">
        <ImageControls setImage={setRawImage} useColor={useColor} setUseColor={setUseColor} />
        <div className="flex flex-col w-full min-h-0 gap-3">
          <ControlRow label="Kernel">
            <Dropdown label="" options={POOLING_KERNELS} activeOption={kernel} onChange={(value) => setKernel(value as PoolingKernel)} />
          </ControlRow>
          <ControlRow label="Size">
            <div className="flex items-center gap-2">
              <input type="number" min={MIN_KERNEL_SIZE} max={MAX_KERNEL_SIZE} aria-label="Pooling kernel width" className="w-20 px-2 py-1 text-sm text-center rounded border border-gray-300" value={kernelWidth} onChange={(event) => updateNumber(event.currentTarget.valueAsNumber, setKernelWidth, 1)} />
              <span className="text-sm">×</span>
              <input type="number" min={MIN_KERNEL_SIZE} max={MAX_KERNEL_SIZE} aria-label="Pooling kernel height" className="w-20 px-2 py-1 text-sm text-center rounded border border-gray-300" value={kernelHeight} onChange={(event) => updateNumber(event.currentTarget.valueAsNumber, setKernelHeight, 1)} />
            </div>
          </ControlRow>
          <ControlRow label="Stride">
            <input
              type="number"
              min={1}
              max={MAX_KERNEL_SIZE}
              aria-label="Pooling stride"
              className="w-20 px-2 py-1 text-sm text-center rounded border border-gray-300"
              value={stride}
              onChange={(event) => updateNumber(event.currentTarget.valueAsNumber, setStride, 1)}
            />
          </ControlRow>
          <NumericOption label="Dilation" value={dilation} min={1} onChange={setDilation} />
          <NumericOption label="Padding" value={padding} min={0} onChange={setPadding} />
        </div>
      </Card>
    </div>
  );
}

function updateNumber(value: number, setter: (value: number) => void, min: number) {
  if (!Number.isFinite(value)) return;
  setter(Math.round(Math.min(MAX_KERNEL_SIZE, Math.max(min, value))));
}

function NumericOption({ label, value, min, onChange }: { label: string; value: number; min: number; onChange: (value: number) => void }) {
  return (
    <ControlRow label={label}>
      <input
        type="number"
        min={min}
        max={MAX_KERNEL_SIZE}
        aria-label={`Pooling ${label.toLowerCase()}`}
        className="w-20 px-2 py-1 text-sm text-center rounded border border-gray-300"
        value={value}
        onChange={(event) => updateNumber(event.currentTarget.valueAsNumber, onChange, min)}
      />
    </ControlRow>
  );
}

function ImagePane({ title, image, dimensions }: { title: string; image: string | null; dimensions: string | null }) {
  return (
    <div className="flex flex-col items-center justify-center min-h-0">
      <h2 className="text-lg font-bold mb-2">{title}</h2>
      {image ? <img src={image} alt={title} className="flex-1 w-full h-full min-w-0 min-h-0 object-contain" /> : <p>Processing...</p>}
      <div className="h-8 shrink-0 text-xs text-gray-700 pt-2">{dimensions}</div>
    </div>
  );
}

function ControlRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2">
      <span className="text-sm font-bold text-gray-700 text-right">{label}</span>
      <div className="justify-self-start text-sm [&_label]:hidden [&_select]:px-2 [&_select]:py-1 [&_select]:text-xs">{children}</div>
    </div>
  );
}

function ImageControls({ setImage, useColor, setUseColor }: { setImage: (image: string) => void; useColor: boolean; setUseColor: (value: boolean) => void }) {
  const fileInput = useRef<HTMLInputElement | null>(null);
  const [selected, setSelected] = useState<(typeof IMAGE_OPTIONS)[number]>("Mandrill");
  const [url, setUrl] = useState("");
  const presets = { Mandrill: mandrillImage, Cameraman: cameramanImage, Motocross: motocrossImage, Peppers: peppersImage, "Super Mario": marioImage, Racoon: racoonImage };

  function choose(option: (typeof IMAGE_OPTIONS)[number]) {
    if (option === "Upload...") return fileInput.current?.click();
    setSelected(option);
    if (option !== "Enter URL...") setImage(presets[option]);
  }
  function applyUrl() { if (url.trim()) setImage(url.trim()); }

  return (
    <div className="flex flex-col gap-3">
      <input ref={fileInput} type="file" accept="image/*" className="hidden" onChange={(event) => {
        const file = event.target.files?.[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = () => { if (typeof reader.result === "string") setImage(reader.result); };
        reader.readAsDataURL(file);
        event.target.value = "";
      }} />
      <ControlRow label="Image"><Dropdown label="" options={IMAGE_OPTIONS} activeOption={selected} onChange={choose} /></ControlRow>
      {selected === "Enter URL..." && <ControlRow label=""><input type="url" value={url} placeholder="Enter image URL and press Enter" className="w-full rounded border border-gray-300 px-2 py-1 text-xs" onChange={(e) => setUrl(e.target.value)} onBlur={applyUrl} onKeyDown={(e) => { if (e.key === "Enter") applyUrl(); }} /></ControlRow>}
      <div className="grid grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2">
        <span className="text-sm font-bold text-gray-700 text-right">Color</span>
        <div className="justify-self-start text-sm">
          <Radio
            label=""
            options={["Grayscale", "Color"] as const}
            activeOption={useColor ? "Color" : "Grayscale"}
            onChange={(option) => setUseColor(option === "Color")}
          />
        </div>
      </div>
    </div>
  );
}