"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

// Start a project that is not there yet -- of any kind the registry says can be
// scaffolded. The kind select comes first; the fields under it are the ones
// that kind DECLARES (`scaffold.fields` in the registry), so this file renders
// from data and never branches on a kind id. `from` prefills the source field
// when the dashboard was opened with ?from=<channel>/<id>.
//
// It creates no cut files and no clip windows it cannot know. What it writes is
// a shape to fill in, which is the whole reason it exists: the five songs and
// six report videos made by hand each came out slightly different.

type Brand = { id: string; label: string };
type Kind = { id: string; label: string; scaffold?: { fields: string[]; brands?: Brand[] } | null };

const FIELD_LABEL: Record<string, string> = {
  from: "from — a sweep-report .md, a viewer share URL, or <channel>/<videoId>",
  siteOrigin: "site origin — the archive every QR resolves to (e.g. https://jeralyzer.pages.dev)",
  seed: "seed the timeline from the video's digest chapters (review each)",
  brand: "brand — a report-to-video preset: its palette and faces, the title lockup, the header mark, an end card",
};

export default function NewProjectMenu({ kinds, from = null }: { kinds: Kind[]; from?: string | null }) {
  const router = useRouter();
  const can = kinds.filter((k) => k.scaffold);
  const [open, setOpen] = useState(!!from);
  const [kind, setKind] = useState(can[0]?.id ?? "");
  const [slug, setSlug] = useState("");
  const [title, setTitle] = useState("");
  const [src, setSrc] = useState(from ?? "");
  const [origin, setOrigin] = useState("");
  const [seed, setSeed] = useState(false);
  const [brand, setBrand] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fields = can.find((k) => k.id === kind)?.scaffold?.fields ?? [];
  const brands = can.find((k) => k.id === kind)?.scaffold?.brands ?? [];
  // Seeding only means something for a video ref, and the server refuses it
  // otherwise -- so the box is offered only when the source looks like one.
  const looksLikeVideo = /[?&]v=/.test(src) || /^[\w.-]+\/[\w.-]+$/.test(src.trim());

  const create = async () => {
    setBusy(true);
    setError(null);
    try {
      const body: Record<string, unknown> = { kind, slug, title };
      if (fields.includes("from") && src.trim()) body.from = src.trim();
      if (fields.includes("siteOrigin") && origin.trim()) body.siteOrigin = origin.trim();
      if (fields.includes("seed") && seed && looksLikeVideo) body.seed = "chapters";
      if (fields.includes("brand") && brand) body.brand = brand;
      const res = await fetch("/api/projects/new", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(body),
        cache: "no-store",
      });
      const j = await res.json();
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      router.push(j.href);
      router.refresh();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
      setBusy(false);
    }
  };

  if (!can.length) return null;
  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        data-new-project
        className="rounded border border-dashed border-[var(--color-line)] px-2.5 py-1 text-[12px] text-[var(--color-dim)] hover:border-[var(--color-sel)] hover:text-[var(--color-sel)]"
      >
        + new project
      </button>
    );
  }

  const input = "rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-1 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]";
  const onEnter = (e: React.KeyboardEvent) => e.key === "Enter" && slug.trim() && create();

  return (
    <div
      data-new-project-form
      className="flex flex-wrap items-center gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-2"
    >
      <select
        value={kind}
        onChange={(e) => setKind(e.target.value)}
        aria-label="project kind"
        data-new-kind
        className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 text-[12px]"
      >
        {can.map((k) => (
          <option key={k.id} value={k.id}>
            {k.label}
          </option>
        ))}
      </select>
      <input
        autoFocus
        value={slug}
        onChange={(e) => setSlug(e.target.value)}
        onKeyDown={onEnter}
        placeholder="directory name, e.g. donkey-kong"
        aria-label="project directory name"
        data-new-slug
        className={`w-52 font-mono ${input}`}
      />
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        onKeyDown={onEnter}
        placeholder="title (optional)"
        aria-label="project title"
        data-new-title
        className={`w-56 ${input}`}
      />
      {fields.includes("from") && (
        <input
          value={src}
          onChange={(e) => setSrc(e.target.value)}
          onKeyDown={onEnter}
          placeholder="from: report.md, share URL, or channel/videoId"
          aria-label={FIELD_LABEL.from}
          title={FIELD_LABEL.from}
          data-new-from
          className={`w-72 font-mono ${input}`}
        />
      )}
      {fields.includes("siteOrigin") && (
        <input
          value={origin}
          onChange={(e) => setOrigin(e.target.value)}
          onKeyDown={onEnter}
          placeholder="site origin, e.g. https://…pages.dev"
          aria-label={FIELD_LABEL.siteOrigin}
          title={FIELD_LABEL.siteOrigin}
          data-new-origin
          className={`w-56 font-mono ${input}`}
        />
      )}
      {fields.includes("seed") && looksLikeVideo && (
        <label className="flex items-center gap-1 text-[11px] text-[var(--color-dim)]" title={FIELD_LABEL.seed}>
          <input type="checkbox" checked={seed} onChange={(e) => setSeed(e.target.checked)} data-new-seed />
          seed from chapters
        </label>
      )}
      {fields.includes("brand") && brands.length > 0 && (
        <select
          value={brand}
          onChange={(e) => setBrand(e.target.value)}
          aria-label={FIELD_LABEL.brand}
          title={FIELD_LABEL.brand}
          data-new-brand
          className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 text-[12px]"
        >
          <option value="">no brand</option>
          {brands.map((b) => (
            <option key={b.id} value={b.id}>
              {b.label}
            </option>
          ))}
        </select>
      )}
      <button
        type="button"
        disabled={busy || !slug.trim()}
        onClick={create}
        data-new-create
        className="rounded border border-[var(--color-sel)] px-2.5 py-1 text-[12px] text-[var(--color-sel)] disabled:opacity-40"
      >
        create
      </button>
      <button
        type="button"
        onClick={() => {
          setOpen(false);
          setError(null);
        }}
        className="text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
      >
        cancel
      </button>
      {error && (
        <span className="w-full text-[11px] text-[var(--color-bad)]" data-new-error>
          {error}
        </span>
      )}
    </div>
  );
}