"use client";
import { useEffect, useRef, useState } from "react";
import { btn, btnGhost, input } from "./ui";

type M = { id: string; url: string; alt: string; filename: string; mime: string };

export function MediaPickerModal({ onPick, onClose }: { onPick: (m: M) => void; onClose: () => void }) {
  const [items, setItems] = useState<M[]>([]);
  const [q, setQ] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const file = useRef<HTMLInputElement>(null);
  const load = (query = q) => fetch(`/admin/api/media?q=${encodeURIComponent(query)}`).then((r) => r.json()).then((d) => setItems((d.items ?? []).filter((i: M) => i.mime.startsWith("image/"))));
  useEffect(() => { load(""); const k = (e: KeyboardEvent) => e.key === "Escape" && onClose(); window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, []); // eslint-disable-line react-hooks/exhaustive-deps
  async function upload(files: FileList | null) {
    if (!files?.length) return; setBusy(true); setErr("");
    const fd = new FormData(); fd.set("file", files[0]); fd.set("folder", "general");
    const r = await fetch("/admin/api/media", { method: "POST", body: fd }); const d = await r.json();
    setBusy(false); if (!r.ok) return setErr(d.error ?? "Upload failed."); onPick(d.item);
  }
  return (
    <div role="dialog" aria-modal="true" aria-label="Choose image" className="fixed inset-0 z-[70] bg-ink/50 grid place-items-center p-4" onClick={onClose}>
      <div className="bg-paper w-full max-w-4xl max-h-[88vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
        <div className="p-4 border-b border-sand flex gap-3 items-center flex-wrap">
          <h2 className="font-display text-[22px] mr-auto">Choose an image</h2>
          <input value={q} onChange={(e) => { setQ(e.target.value); load(e.target.value); }} placeholder="Search" className={`${input} !w-48`} aria-label="Search media" />
          <input ref={file} type="file" accept="image/jpeg,image/png,image/webp,image/avif" className="sr-only" id="picker-file" onChange={(e) => upload(e.target.files)} />
          <label htmlFor="picker-file" className={`${btnGhost} cursor-pointer`}>{busy ? "Uploading…" : "Upload new"}</label>
          <button className={btn} onClick={onClose} type="button">Close</button>
        </div>
        {err && <p role="alert" className="text-rose text-[13px] px-4 pt-2">{err}</p>}
        <ul className="p-4 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3 overflow-y-auto">
          {items.map((m) => <li key={m.id}><button type="button" onClick={() => onPick(m)} className="block w-full aspect-[5/6] bg-linen border border-sand hover:border-ink" title={m.filename}>{/* eslint-disable-next-line @next/next/no-img-element */}<img src={m.url} alt={m.alt || m.filename} className="w-full h-full object-cover" /></button></li>)}
          {items.length === 0 && <li className="col-span-full text-stone text-center py-10">No images yet. Upload one.</li>}
        </ul>
      </div>
    </div>
  );
}

/** Form field that stores an image URL. Renders a hidden input named `name`. */
export function ImageField({ name, value, onChange, label = "Image" }: { name?: string; value: string; onChange?: (url: string, alt?: string) => void; label?: string }) {
  const [url, setUrl] = useState(value);
  const [open, setOpen] = useState(false);
  useEffect(() => setUrl(value), [value]);
  const set = (u: string, alt?: string) => { setUrl(u); onChange?.(u, alt); };
  return (
    <div>
      <span className="block text-[13px] text-stone mb-1">{label}</span>
      <div className="flex items-center gap-3">
        <div className="w-14 h-[67px] bg-linen border border-sand shrink-0">{url && /* eslint-disable-next-line @next/next/no-img-element */ <img src={url} alt="" className="w-full h-full object-cover" />}</div>
        <div className="flex gap-2 flex-wrap"><button type="button" className={btnGhost} onClick={() => setOpen(true)}>{url ? "Change" : "Choose"}</button>{url && <button type="button" className="text-[13px] underline" onClick={() => set("")}>Remove</button>}</div>
      </div>
      {name && <input type="hidden" name={name} value={url} />}
      {open && <MediaPickerModal onClose={() => setOpen(false)} onPick={(m) => { set(m.url, m.alt); setOpen(false); }} />}
    </div>
  );
}