import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { cn } from "../lib/cn";
import { ChevronDownIcon, CheckIcon, TemplateIcon } from "./icons";
import { getTemplate, groupedTemplates } from "../templates";
import { CUSTOM_TEMPLATE_ID } from "../hooks/useEditor";
import type { Template } from "../types";

interface TemplatePickerProps {
  currentId: string;
  onSelect: (template: Template) => void;
}

/** A small aspect-ratio swatch (max 30px on the long edge). */
function swatch(aspect: number | null) {
  const a = aspect ?? 1;
  const long = 30;
  const width = a >= 1 ? long : long * a;
  const height = a >= 1 ? long / a : long;
  return { width: `${width}px`, height: `${height}px` };
}

export function TemplatePicker({ currentId, onSelect }: TemplatePickerProps) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState<{ top: number; left: number }>();
  const btnRef = useRef<HTMLButtonElement>(null);
  const isCustom = currentId === CUSTOM_TEMPLATE_ID;
  const label = isCustom ? "Custom crop" : getTemplate(currentId).name;

  function toggle() {
    const r = btnRef.current?.getBoundingClientRect();
    if (r) setPos({ top: r.bottom + 8, left: r.left });
    setOpen((o) => !o);
  }

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <>
      <button
        ref={btnRef}
        onClick={toggle}
        aria-label="Choose template"
        aria-haspopup="menu"
        aria-expanded={open}
        className="flex w-full items-center justify-between rounded-lg border border-zinc-700/60 bg-zinc-800 px-3 py-2.5 text-left hover:border-zinc-600"
      >
        <span className="flex items-center gap-2">
          <TemplateIcon className="size-4 text-accent-400" />
          <span className="text-sm font-medium text-zinc-100">{label}</span>
        </span>
        <ChevronDownIcon className={cn("size-4 text-zinc-400 transition-transform", open && "rotate-180")} />
      </button>

      {open &&
        pos &&
        createPortal(
          <>
            <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} aria-hidden="true" />
            <div
              className="fixed z-50 max-h-[70vh] w-80 overflow-y-auto rounded-xl border border-zinc-700/60 bg-zinc-800 p-2 shadow-2xl shadow-black/50"
              style={{ top: pos.top, left: pos.left }}
            >
              {groupedTemplates().map((g) => (
                <div key={g.group} className="mb-1 last:mb-0">
                  <p className="px-2 py-1 text-[0.65rem] font-semibold uppercase tracking-wider text-zinc-500">
                    {g.group}
                  </p>
                  <div className="grid grid-cols-2 gap-1.5">
                    {g.items.map((t) => {
                      const active = t.id === currentId;
                      return (
                        <button
                          key={t.id}
                          onClick={() => {
                            onSelect(t);
                            setOpen(false);
                          }}
                          title={t.description}
                          className={cn(
                            "flex flex-col gap-2 rounded-lg border p-2.5 text-left",
                            active
                              ? "border-accent-500 bg-accent-500/10"
                              : "border-zinc-700/60 bg-zinc-800/60 hover:border-zinc-600 hover:bg-zinc-700/40",
                          )}
                        >
                          <span className="flex h-8 items-center justify-center">
                            <span className="rounded-sm border border-zinc-600 bg-zinc-700" style={swatch(t.aspect)} />
                          </span>
                          <span className="flex items-center justify-between gap-1">
                            <span className="truncate text-xs font-medium text-zinc-100">{t.name}</span>
                            {active && <CheckIcon className="size-3.5 shrink-0 text-accent-400" />}
                          </span>
                          <span className="text-[0.65rem] text-zinc-400">
                            {t.output ? `${t.output.width}×${t.output.height}` : "Native size"} ·{" "}
                            {t.encoder.format.toUpperCase()}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </>,
          document.body,
        )}
    </>
  );
}