writer-work-flow/apps/web/components/ProjectWizard.tsx

"use client";

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

import { api } from "@/lib/api/client";
import { useToast } from "@/components/Toast";
import {
  GENRES,
  SELLING_POINT_PRESETS,
  STRUCTURES,
  WIZARD_STEPS,
  canAdvance,
  canSubmit,
  clampStep,
  emptyWizardForm,
  toCreateRequest,
  type WizardForm,
} from "@/lib/wizard/wizard";

const STEP_TITLES = [
  "书名 + 题材",
  "一句话故事 + 卖点 + 结构",
  "立意 / 总纲",
  "主角 / 金手指",
  "基础世界观",
];

// 立项向导（UX §6.2）。Client Component：收集字段 → POST /projects → 进工作台。
export function ProjectWizard() {
  const router = useRouter();
  const toast = useToast();
  const [step, setStep] = useState(1);
  const [form, setForm] = useState<WizardForm>(emptyWizardForm);
  const [submitting, setSubmitting] = useState(false);

  const update = (patch: Partial<WizardForm>): void =>
    setForm((prev) => ({ ...prev, ...patch }));

  const toggleSellingPoint = (point: string): void =>
    setForm((prev) => ({
      ...prev,
      sellingPoints: prev.sellingPoints.includes(point)
        ? prev.sellingPoints.filter((p) => p !== point)
        : [...prev.sellingPoints, point],
    }));

  const goBack = (): void => setStep((s) => clampStep(s - 1));
  const goNext = (): void => setStep((s) => clampStep(s + 1));

  const submit = async (): Promise<void> => {
    if (!canSubmit(form)) {
      toast("请先填写书名", "error");
      setStep(1);
      return;
    }
    setSubmitting(true);
    const { data, error } = await api.POST("/projects", {
      body: toCreateRequest(form),
    });
    if (error || !data) {
      setSubmitting(false);
      toast("创建作品失败，请重试", "error");
      return;
    }
    router.push(`/projects/${data.id}/write`);
  };

  const isLast = step === WIZARD_STEPS;

  return (
    <div className="mx-auto max-w-2xl rounded border border-line bg-panel p-8 shadow-paper">
      <div className="mb-6 flex items-center justify-between">
        <h1 className="font-serif text-2xl text-ink">新建作品</h1>
        <StepDots current={step} />
      </div>
      <p className="mb-4 text-sm text-ink-soft">
        步骤 {step}/{WIZARD_STEPS} · {STEP_TITLES[step - 1]}
      </p>

      <div className="min-h-[220px]">
        {step === 1 && <StepBasics form={form} update={update} />}
        {step === 2 && (
          <StepStory
            form={form}
            update={update}
            toggleSellingPoint={toggleSellingPoint}
          />
        )}
        {step === 3 && <StepPremise form={form} update={update} />}
        {step === 4 && <StepProtagonist form={form} update={update} />}
        {step === 5 && <StepWorld />}
      </div>

      <div className="mt-8 flex items-center justify-between">
        <button
          type="button"
          onClick={goBack}
          disabled={step === 1}
          className="rounded border border-line px-4 py-2 text-sm text-ink disabled:opacity-40"
        >
          ← 上一步
        </button>
        {isLast ? (
          <button
            type="button"
            onClick={submit}
            disabled={submitting || !canSubmit(form)}
            className="rounded bg-cinnabar px-5 py-2 text-sm text-panel disabled:opacity-40"
          >
            {submitting ? "创建中…" : "完成立项 →"}
          </button>
        ) : (
          <button
            type="button"
            onClick={goNext}
            disabled={!canAdvance(step, form)}
            className="rounded bg-cinnabar px-5 py-2 text-sm text-panel disabled:opacity-40"
          >
            下一步 →
          </button>
        )}
      </div>
    </div>
  );
}

function StepDots({ current }: { current: number }) {
  return (
    <div className="flex gap-1.5" aria-hidden="true">
      {Array.from({ length: WIZARD_STEPS }, (_, i) => (
        <span
          key={i}
          className={`h-2 w-2 rounded-full ${
            i + 1 <= current ? "bg-cinnabar" : "bg-line"
          }`}
        />
      ))}
    </div>
  );
}

interface StepProps {
  form: WizardForm;
  update: (patch: Partial<WizardForm>) => void;
}

function Field({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <label className="mb-4 block">
      <span className="mb-1 block text-sm text-ink-soft">{label}</span>
      {children}
    </label>
  );
}

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

function StepBasics({ form, update }: StepProps) {
  return (
    <div>
      <Field label="书名（必填）">
        <input
          className={inputCls}
          value={form.title}
          onChange={(e) => update({ title: e.target.value })}
          placeholder="例：逐光而行"
          autoFocus
        />
      </Field>
      <Field label="题材">
        <select
          className={inputCls}
          value={form.genre}
          onChange={(e) => update({ genre: e.target.value })}
        >
          <option value="">未选择</option>
          {GENRES.map((g) => (
            <option key={g} value={g}>
              {g}
            </option>
          ))}
        </select>
      </Field>
    </div>
  );
}

function StepStory({
  form,
  update,
  toggleSellingPoint,
}: StepProps & { toggleSellingPoint: (p: string) => void }) {
  return (
    <div>
      <Field label="一句话故事（logline）">
        <textarea
          className={`${inputCls} h-20 resize-none`}
          value={form.logline}
          onChange={(e) => update({ logline: e.target.value })}
          placeholder="废柴少年觉醒禁忌血脉，在仙门倾轧中逆势封神。"
        />
      </Field>
      <Field label="故事结构">
        <div className="flex gap-2">
          {STRUCTURES.map((s) => (
            <button
              type="button"
              key={s}
              onClick={() => update({ structure: s })}
              className={`rounded border px-3 py-1.5 text-sm ${
                form.structure === s
                  ? "border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
                  : "border-line text-ink"
              }`}
            >
              {s}
            </button>
          ))}
        </div>
      </Field>
      <fieldset>
        <legend className="mb-1 block text-sm text-ink-soft">核心卖点</legend>
        <div className="flex flex-wrap gap-2">
          {SELLING_POINT_PRESETS.map((p) => (
            <button
              type="button"
              key={p}
              aria-pressed={form.sellingPoints.includes(p)}
              onClick={() => toggleSellingPoint(p)}
              className={`rounded border px-3 py-1.5 text-sm ${
                form.sellingPoints.includes(p)
                  ? "border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
                  : "border-line text-ink"
              }`}
            >
              {p}
            </button>
          ))}
        </div>
      </fieldset>
    </div>
  );
}

function StepPremise({ form, update }: StepProps) {
  return (
    <div>
      <Field label="立意（premise）">
        <textarea
          className={`${inputCls} h-20 resize-none`}
          value={form.premise}
          onChange={(e) => update({ premise: e.target.value })}
          placeholder="故事的核心命题与前提。"
        />
      </Field>
      <Field label="主题（theme）">
        <input
          className={inputCls}
          value={form.theme}
          onChange={(e) => update({ theme: e.target.value })}
          placeholder="例：抗争与代价"
        />
      </Field>
    </div>
  );
}

function StepProtagonist({ form, update }: StepProps) {
  // M1 projects 表无独立主角/金手指字段；先并入立意/总纲文本，避免编造 API。
  return (
    <div>
      <p className="mb-3 text-sm text-ink-soft">
        主角与金手指（M1 暂并入总纲，后续设定库独立建模）。
      </p>
      <Field label="主角 / 金手指概要">
        <textarea
          className={`${inputCls} h-28 resize-none`}
          value={form.premise}
          onChange={(e) => update({ premise: e.target.value })}
          placeholder="主角设定、金手指来源与限制……"
        />
      </Field>
    </div>
  );
}

function StepWorld() {
  return (
    <div className="rounded border border-dashed border-line bg-bg p-6 text-sm text-ink-soft">
      基础世界观将在「设定库」里建模（后续里程碑）。现在可直接完成立项，进入工作台开始写第一章。
    </div>
  );
}