import type { Dispatch } from "react";
import { cn } from "../lib/cn";
import type { EditorAction, EditorState } from "../hooks/useEditor";
import type { Adjustments, ExportFormat, ExportResult } from "../types";
import { NEUTRAL_ADJUSTMENTS } from "../types";
import type { LoadedImage } from "../lib/image";
import { buildFilename, formatBytes, megapixels, triggerDownload } from "../lib/image";
import { Button, Section, Segmented } from "./ui";
import { Slider } from "./Slider";
import { toast } from "./toast";
import {
  ContrastIcon,
  CopyIcon,
  CropIcon,
  DownloadIcon,
  DropletIcon,
  FlipHorizontalIcon,
  FlipVerticalIcon,
  ResizeIcon,
  RotateLeftIcon,
  RotateRightIcon,
  SlidersIcon,
  SpinnerIcon,
  SunIcon,
  WandIcon,
} from "./icons";

const EFFECTS: { label: string; value: Adjustments }[] = [
  { label: "None", value: NEUTRAL_ADJUSTMENTS },
  { label: "Vivid", value: { ...NEUTRAL_ADJUSTMENTS, saturate: 1.4, contrast: 1.1 } },
  { label: "Fade", value: { ...NEUTRAL_ADJUSTMENTS, contrast: 0.85, brightness: 1.08, saturate: 0.9 } },
  { label: "B&W", value: { ...NEUTRAL_ADJUSTMENTS, grayscale: 1, contrast: 1.05 } },
  { label: "Noir", value: { ...NEUTRAL_ADJUSTMENTS, grayscale: 1, contrast: 1.3, brightness: 0.95 } },
  { label: "Sepia", value: { ...NEUTRAL_ADJUSTMENTS, sepia: 0.75, contrast: 1.05, brightness: 1.02 } },
];

function sameAdjustments(a: Adjustments, b: Adjustments): boolean {
  return (
    a.brightness === b.brightness &&
    a.contrast === b.contrast &&
    a.saturate === b.saturate &&
    a.grayscale === b.grayscale &&
    a.sepia === b.sepia &&
    a.hueRotate === b.hueRotate
  );
}

interface PanelProps {
  state: EditorState;
  dispatch: Dispatch<EditorAction>;
}

const ASPECTS: { label: string; value: number | null }[] = [
  { label: "Original", value: null },
  { label: "1:1", value: 1 },
  { label: "4:3", value: 4 / 3 },
  { label: "3:2", value: 3 / 2 },
  { label: "16:9", value: 16 / 9 },
  { label: "9:16", value: 9 / 16 },
];

function aspectActive(current: number | null, value: number | null): boolean {
  if (value === null) return current === null;
  if (current === null) return false;
  return Math.abs(current - value) < 1e-3;
}

export function CropPanel({ state, dispatch }: PanelProps) {
  return (
    <Section title="Crop & frame" icon={<CropIcon className="size-3.5" />}>
      <div className="grid grid-cols-3 gap-1.5">
        {ASPECTS.map((a) => (
          <Button
            key={a.label}
            size="sm"
            active={aspectActive(state.aspect, a.value)}
            onClick={() => dispatch({ type: "setAspect", aspect: a.value })}
          >
            {a.label}
          </Button>
        ))}
      </div>
      <div className="mt-4">
        <Slider
          label="Zoom"
          value={state.zoom}
          min={1}
          max={8}
          step={0.01}
          resetTo={1}
          display={(v) => `${v.toFixed(2)}×`}
          onChange={(v) => dispatch({ type: "setZoom", zoom: v })}
        />
      </div>
    </Section>
  );
}

export function TransformPanel({ state, dispatch }: PanelProps) {
  return (
    <Section title="Transform" icon={<RotateRightIcon className="size-3.5" />}>
      <div className="mb-4 grid grid-cols-2 gap-1.5">
        <Button size="sm" onClick={() => dispatch({ type: "rotateBy", delta: -90 })}>
          <RotateLeftIcon className="size-4" /> -90°
        </Button>
        <Button size="sm" onClick={() => dispatch({ type: "rotateBy", delta: 90 })}>
          <RotateRightIcon className="size-4" /> +90°
        </Button>
        <Button size="sm" active={state.flipH} onClick={() => dispatch({ type: "toggleFlipH" })}>
          <FlipHorizontalIcon className="size-4" /> Flip H
        </Button>
        <Button size="sm" active={state.flipV} onClick={() => dispatch({ type: "toggleFlipV" })}>
          <FlipVerticalIcon className="size-4" /> Flip V
        </Button>
      </div>
      <Slider
        label="Rotation"
        value={state.rotation}
        min={0}
        max={360}
        step={1}
        resetTo={0}
        display={(v) => `${Math.round(v)}°`}
        onChange={(v) => dispatch({ type: "setRotation", rotation: v })}
      />
    </Section>
  );
}

export function EffectsPanel({ state, dispatch }: PanelProps) {
  const a = state.adjustments;
  return (
    <Section title="Effects" icon={<WandIcon className="size-3.5" />}>
      <div className="grid grid-cols-3 gap-1.5">
        {EFFECTS.map((e) => (
          <Button
            key={e.label}
            size="sm"
            active={sameAdjustments(a, e.value)}
            onClick={() => dispatch({ type: "setAdjustments", adjustments: e.value })}
          >
            {e.label}
          </Button>
        ))}
      </div>
    </Section>
  );
}

export function AdjustPanel({ state, dispatch }: PanelProps) {
  const a = state.adjustments;
  const dirty = !sameAdjustments(a, NEUTRAL_ADJUSTMENTS);
  const pct = (v: number) => `${Math.round(v * 100)}%`;

  return (
    <Section
      title="Adjust"
      icon={<SlidersIcon className="size-3.5" />}
      action={
        dirty ? (
          <button
            onClick={() => dispatch({ type: "resetAdjustments" })}
            className="text-xs text-accent-400 hover:underline"
          >
            Reset
          </button>
        ) : null
      }
    >
      <Slider
        label={
          <span className="flex items-center gap-1.5">
            <SunIcon className="size-3.5 text-zinc-500" /> Brightness
          </span>
        }
        value={a.brightness}
        min={0}
        max={2}
        step={0.01}
        resetTo={1}
        display={pct}
        onChange={(v) => dispatch({ type: "setAdjustment", key: "brightness", value: v })}
      />
      <Slider
        label={
          <span className="flex items-center gap-1.5">
            <ContrastIcon className="size-3.5 text-zinc-500" /> Contrast
          </span>
        }
        value={a.contrast}
        min={0}
        max={2}
        step={0.01}
        resetTo={1}
        display={pct}
        onChange={(v) => dispatch({ type: "setAdjustment", key: "contrast", value: v })}
      />
      <Slider
        label={
          <span className="flex items-center gap-1.5">
            <DropletIcon className="size-3.5 text-zinc-500" /> Saturation
          </span>
        }
        value={a.saturate}
        min={0}
        max={2}
        step={0.01}
        resetTo={1}
        display={pct}
        onChange={(v) => dispatch({ type: "setAdjustment", key: "saturate", value: v })}
      />
    </Section>
  );
}

const FORMAT_OPTIONS: { value: ExportFormat; label: string }[] = [
  { value: "jpeg", label: "JPEG" },
  { value: "webp", label: "WebP" },
  { value: "png", label: "PNG" },
  { value: "avif", label: "AVIF" },
];

interface ExportPanelProps extends PanelProps {
  image: LoadedImage;
  onExport: () => void;
  exporting: boolean;
  result: ExportResult | null;
  resultUrl: string | null;
  error: string | null;
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between text-xs">
      <dt className="text-zinc-400">{label}</dt>
      <dd className="font-mono tabular-nums text-zinc-100">{value}</dd>
    </div>
  );
}

function applyMaxEdge(
  dims: { width: number; height: number } | null,
  maxEdge: number | null,
): { width: number; height: number } | null {
  if (!dims || !maxEdge) return dims;
  const long = Math.max(dims.width, dims.height);
  if (long <= maxEdge) return dims;
  const scale = maxEdge / long;
  return { width: Math.round(dims.width * scale), height: Math.round(dims.height * scale) };
}

export function ExportPanel({
  state,
  dispatch,
  image,
  onExport,
  exporting,
  result,
  resultUrl,
  error,
}: ExportPanelProps) {
  const lossy = state.format !== "png";
  const limitOn = state.maxEdge !== null;

  const baseDims =
    state.output ??
    (state.croppedAreaPixels
      ? {
          width: Math.round(state.croppedAreaPixels.width),
          height: Math.round(state.croppedAreaPixels.height),
        }
      : null);
  const outDims = applyMaxEdge(baseDims, state.maxEdge);

  function downloadAgain() {
    if (!result) return;
    triggerDownload(result.blob, buildFilename(image.file.name, state.templateId, state.format));
    toast.success("Saved to downloads");
  }

  async function copyToClipboard() {
    if (!result) return;
    try {
      await navigator.clipboard.write([new ClipboardItem({ [result.blob.type]: result.blob })]);
      toast.success("Copied to clipboard");
    } catch {
      toast.error("Clipboard unavailable");
    }
  }

  return (
    <div className="flex h-full flex-col">
      <Section title="Export" icon={<DownloadIcon className="size-3.5" />}>
        <label className="mb-1.5 block text-xs text-zinc-400">Format</label>
        <Segmented
          ariaLabel="Export format"
          value={state.format}
          options={FORMAT_OPTIONS}
          onChange={(f) => dispatch({ type: "setFormat", format: f })}
        />
        <div className="mt-4">
          <Slider
            label="Quality"
            value={state.quality}
            min={1}
            max={100}
            step={1}
            disabled={!lossy}
            resetTo={90}
            display={(v) => (lossy ? `${v}` : "lossless")}
            onChange={(v) => dispatch({ type: "setQuality", quality: v })}
          />
        </div>
      </Section>

      <Section title="Output">
        <dl className="space-y-2">
          <InfoRow label="Dimensions" value={outDims ? `${outDims.width} × ${outDims.height}` : "—"} />
          <InfoRow label="Megapixels" value={outDims ? megapixels(outDims.width, outDims.height) : "—"} />
          <InfoRow label="Source" value={`${image.width} × ${image.height}`} />
        </dl>

        <div className="mt-3 flex items-center justify-between">
          <span className="flex items-center gap-1.5 text-xs text-zinc-400">
            <ResizeIcon className="size-3.5" /> Limit long edge
          </span>
          <div className="flex items-center gap-2">
            <input
              type="number"
              min={16}
              disabled={!limitOn}
              value={limitOn ? state.maxEdge! : ""}
              placeholder="—"
              onChange={(e) => {
                const n = Math.round(Number(e.target.value));
                dispatch({ type: "setMaxEdge", maxEdge: Number.isFinite(n) && n > 0 ? Math.max(16, n) : 16 });
              }}
              className="w-16 rounded-md border border-zinc-700/60 bg-zinc-800 px-2 py-1 text-right text-xs tabular-nums text-zinc-100 outline-none focus:border-accent-500/50 disabled:opacity-40"
            />
            <span className="text-xs text-zinc-500">px</span>
            <button
              role="switch"
              aria-checked={limitOn}
              aria-label="Limit long edge"
              onClick={() => dispatch({ type: "setMaxEdge", maxEdge: limitOn ? null : 1600 })}
              className={cn(
                "flex h-5 w-9 items-center rounded-full px-0.5 transition-colors",
                limitOn ? "bg-accent-600" : "bg-zinc-700",
              )}
            >
              <span
                className={cn(
                  "size-4 rounded-full bg-white transition-transform",
                  limitOn ? "translate-x-4" : "translate-x-0",
                )}
              />
            </button>
          </div>
        </div>
      </Section>

      <div className="mt-auto space-y-3 p-4">
        {error && (
          <p className="rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400">{error}</p>
        )}

        {result && !error && (
          <div className="space-y-2 rounded-lg border border-zinc-700/60 bg-zinc-800/60 p-2.5">
            <div className="flex items-center gap-3">
              {resultUrl && (
                <img
                  src={resultUrl}
                  alt="Export preview"
                  className="size-12 shrink-0 rounded-md border border-zinc-700/60 bg-checker object-cover"
                />
              )}
              <div className="min-w-0 flex-1">
                <p className="truncate text-xs font-medium text-zinc-100">
                  {formatBytes(result.bytes)} · {result.width} × {result.height}
                </p>
                <p className="mt-0.5 text-[0.65rem] text-zinc-400">
                  {result.format.toUpperCase()} · {result.encoder} encoder · {result.engine} engine
                </p>
              </div>
            </div>
            <div className="flex gap-1.5">
              <Button size="sm" variant="subtle" className="flex-1" onClick={downloadAgain}>
                <DownloadIcon className="size-3.5" /> Save
              </Button>
              <Button size="sm" variant="subtle" className="flex-1" onClick={copyToClipboard}>
                <CopyIcon className="size-3.5" /> Copy
              </Button>
            </div>
          </div>
        )}

        <Button
          variant="primary"
          size="md"
          className="w-full"
          disabled={exporting || !state.croppedAreaPixels}
          onClick={onExport}
        >
          {exporting ? (
            <>
              <SpinnerIcon className="size-4 animate-spin" /> Exporting…
            </>
          ) : (
            <>
              <DownloadIcon className="size-4" /> Export &amp; download
            </>
          )}
        </Button>
      </div>
    </div>
  );
}