"use client";

import { useState } from "react";

import type { RegisterInput } from "@/lib/foreshadow/board";

interface RegisterFormProps {
  projectId: string;
  busy: boolean;
  onRegister: (input: RegisterInput) => Promise<boolean>;
}

const EMPTY = {
  code: "",
  title: "",
  plantedAt: "",
  content: "",
  expectedCloseFrom: "",
  expectedCloseTo: "",
  importance: "",
};

// 登记新伏笔（UX §6.8）。受控表单 → 组装 RegisterInput；成功后清空。
export function RegisterForm({
  projectId,
  busy,
  onRegister,
}: RegisterFormProps) {
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ ...EMPTY });

  const set = (key: keyof typeof EMPTY, value: string): void =>
    setForm((prev) => ({ ...prev, [key]: value }));

  const submit = async (): Promise<void> => {
    const ok = await onRegister({
      projectId,
      code: form.code,
      title: form.title,
      plantedAt: toInt(form.plantedAt),
      content: form.content || null,
      expectedCloseFrom: toInt(form.expectedCloseFrom),
      expectedCloseTo: toInt(form.expectedCloseTo),
      importance: form.importance || null,
    });
    if (ok) {
      setForm({ ...EMPTY });
      setOpen(false);
    }
  };

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90"
      >
        ＋ 登记伏笔
      </button>
    );
  }

  const canSubmit =
    form.code.trim().length > 0 && form.title.trim().length > 0 && !busy;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        void submit();
      }}
      className="rounded border border-line bg-panel p-4"
    >
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <Field label="代号 *" id="f-code">
          <input
            id="f-code"
            value={form.code}
            onChange={(e) => set("code", e.target.value)}
            className={inputCls}
          />
        </Field>
        <Field label="标题 *" id="f-title" span2>
          <input
            id="f-title"
            value={form.title}
            onChange={(e) => set("title", e.target.value)}
            className={inputCls}
          />
        </Field>
        <Field label="埋设章" id="f-planted">
          <input
            id="f-planted"
            inputMode="numeric"
            value={form.plantedAt}
            onChange={(e) => set("plantedAt", e.target.value)}
            className={inputCls}
          />
        </Field>
        <Field label="回收窗口起" id="f-from">
          <input
            id="f-from"
            inputMode="numeric"
            value={form.expectedCloseFrom}
            onChange={(e) => set("expectedCloseFrom", e.target.value)}
            className={inputCls}
          />
        </Field>
        <Field label="回收窗口止" id="f-to">
          <input
            id="f-to"
            inputMode="numeric"
            value={form.expectedCloseTo}
            onChange={(e) => set("expectedCloseTo", e.target.value)}
            className={inputCls}
          />
        </Field>
        <Field label="重要度" id="f-imp">
          <input
            id="f-imp"
            value={form.importance}
            onChange={(e) => set("importance", e.target.value)}
            placeholder="主线/支线"
            className={inputCls}
          />
        </Field>
        <Field label="线索内容" id="f-content" span3>
          <input
            id="f-content"
            value={form.content}
            onChange={(e) => set("content", e.target.value)}
            className={inputCls}
          />
        </Field>
      </div>
      <div className="mt-3 flex items-center gap-2">
        <button
          type="submit"
          disabled={!canSubmit}
          className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-40"
        >
          {busy ? "登记中…" : "登记"}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="rounded border border-line px-3 py-1.5 text-sm text-ink-soft hover:border-cinnabar"
        >
          取消
        </button>
      </div>
    </form>
  );
}

const inputCls =
  "w-full rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none";

interface FieldProps {
  label: string;
  id: string;
  span2?: boolean;
  span3?: boolean;
  children: React.ReactNode;
}

function Field({ label, id, span2, span3, children }: FieldProps) {
  const span = span3 ? "col-span-2 sm:col-span-3" : span2 ? "col-span-2" : "";
  return (
    <div className={span}>
      <label htmlFor={id} className="block text-xs text-ink-soft">
        {label}
      </label>
      <div className="mt-0.5">{children}</div>
    </div>
  );
}

function toInt(raw: string): number | null {
  const trimmed = raw.trim();
  if (trimmed.length === 0) return null;
  const n = Number.parseInt(trimmed, 10);
  return Number.isInteger(n) ? n : null;
}