writer-work-flow/apps/web/components/templates/TemplatesManager.tsx

"use client";

import { useCallback, useState } from "react";

import { useToast } from "@/components/Toast";
import { api } from "@/lib/api/client";
import type { TemplateResponse } from "@/lib/api/types";
import {
  buildTemplateCreateRequest,
  EMPTY_TEMPLATE_DRAFT,
  isTemplateDraftValid,
  type TemplateDraft,
} from "@/lib/templates/templates";

interface TemplatesManagerProps {
  // 初始模板列表（Server Component 预取；失败给空数组 + loadError 文案）。
  initial: TemplateResponse[];
}

// 提示词/模板库管理（F3，单用户本地版）：列出 / 新建 / 删除。
// 列表本地维护（乐观更新失败回滚）；CRUD 走 OpenAPI 客户端。分享/市场不做（需多租户）。
export function TemplatesManager({ initial }: TemplatesManagerProps) {
  const toast = useToast();
  const [templates, setTemplates] = useState<TemplateResponse[]>(initial);
  const [draft, setDraft] = useState<TemplateDraft>(EMPTY_TEMPLATE_DRAFT);
  const [creating, setCreating] = useState(false);

  const setField = useCallback(
    (field: keyof TemplateDraft, value: string): void => {
      setDraft((prev) => ({ ...prev, [field]: value }));
    },
    [],
  );

  const onCreate = useCallback(async (): Promise<void> => {
    if (!isTemplateDraftValid(draft)) {
      toast("请填写标题与正文。", "error");
      return;
    }
    setCreating(true);
    try {
      const { data, error } = await api.POST("/templates", {
        body: buildTemplateCreateRequest(draft),
      });
      if (error || !data) {
        toast("新建模板失败，请重试。", "error");
        return;
      }
      setTemplates((prev) => [data, ...prev]);
      setDraft(EMPTY_TEMPLATE_DRAFT);
      toast("已新建模板。", "success");
    } catch {
      toast("新建模板请求异常，请检查网络。", "error");
    } finally {
      setCreating(false);
    }
  }, [draft, toast]);

  const onDelete = useCallback(
    async (id: string): Promise<void> => {
      const prev = templates;
      // 乐观删除：先移除，失败回滚。
      setTemplates((cur) => cur.filter((t) => t.id !== id));
      try {
        const { error } = await api.DELETE("/templates/{template_id}", {
          params: { path: { template_id: id } },
        });
        if (error) {
          setTemplates(prev);
          toast("删除模板失败，请重试。", "error");
          return;
        }
        toast("已删除模板。", "success");
      } catch {
        setTemplates(prev);
        toast("删除模板请求异常，请检查网络。", "error");
      }
    },
    [templates, toast],
  );

  return (
    <div className="flex flex-col gap-6">
      <form
        className="flex flex-col gap-3 rounded border border-line bg-panel p-5"
        aria-label="新建模板"
        onSubmit={(e) => {
          e.preventDefault();
          void onCreate();
        }}
      >
        <h2 className="font-serif text-lg text-ink">新建模板</h2>
        <label className="block text-sm text-ink-soft">
          标题 *
          <input
            type="text"
            value={draft.title}
            onChange={(e) => setField("title", e.target.value)}
            className="mt-1 w-full rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
            aria-label="标题"
          />
        </label>
        <label className="block text-sm text-ink-soft">
          正文 *（一键填入生成器的 brief/原文）
          <textarea
            value={draft.body}
            onChange={(e) => setField("body", e.target.value)}
            rows={4}
            className="mt-1 w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
            aria-label="正文"
          />
        </label>
        <div className="flex flex-wrap gap-4">
          <label className="block text-sm text-ink-soft">
            分类（可选）
            <input
              type="text"
              value={draft.category}
              onChange={(e) => setField("category", e.target.value)}
              className="mt-1 w-48 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
              aria-label="分类"
            />
          </label>
          <label className="block text-sm text-ink-soft">
            关联生成器 key（可选）
            <input
              type="text"
              value={draft.toolKey}
              onChange={(e) => setField("toolKey", e.target.value)}
              className="mt-1 w-48 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
              aria-label="关联生成器 key"
            />
          </label>
        </div>
        <button
          type="submit"
          disabled={creating || !isTemplateDraftValid(draft)}
          className="self-start rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
        >
          {creating ? "新建中…" : "新建模板"}
        </button>
      </form>

      <section className="flex flex-col gap-3" aria-label="模板列表">
        <h2 className="font-serif text-lg text-ink">已存模板（{templates.length}）</h2>
        {templates.length === 0 ? (
          <p className="text-sm text-ink-soft">（暂无模板，先新建一个吧。）</p>
        ) : (
          <ul className="flex flex-col gap-2">
            {templates.map((t) => (
              <li
                key={t.id}
                className="flex items-start justify-between gap-4 rounded border border-line bg-bg p-3 text-sm"
              >
                <div className="min-w-0 flex-1">
                  <p className="font-serif text-base text-ink">{t.title}</p>
                  {t.category || t.tool_key ? (
                    <p className="text-xs text-ink-soft">
                      {[t.category, t.tool_key].filter(Boolean).join(" · ")}
                    </p>
                  ) : null}
                  <p className="mt-1 whitespace-pre-wrap text-ink-soft">
                    {t.body}
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => void onDelete(t.id)}
                  className="shrink-0 rounded border border-line px-3 py-1 text-ink-soft hover:text-conflict"
                  aria-label={`删除模板 ${t.title}`}
                >
                  删除
                </button>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}