jiang13-bbs/frontend/app/admin/announcements/AnnouncementComposeClient.tsx

"use client";

import { useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, Megaphone } from "lucide-react";
import {
  apiAdminCreateAnnouncement,
  apiAdminUpdateAnnouncement,
  type Announcement,
  type AnnouncementColor,
  type AnnouncementInput,
} from "@/lib/api";
import { toast } from "@/lib/toast";
import MarkdownEditor from "@/components/MarkdownEditor";
import {
  AdminField,
  AdminPageHeader,
  AdminSegmented,
  AdminSettingsActions,
  AdminSettingsGroup,
  AdminSettingsPage,
  AdminSettingsRow,
  AdminSwitch,
} from "@/components/admin";
import ConfirmDialog from "@/components/ConfirmDialog";
import useUnsavedGuard from "@/hooks/useUnsavedGuard";
import { ANNOUNCEMENT_COLORS } from "./announcementColors";

type PublishKey = "published" | "draft";

type FormState = {
  title: string;
  content: string;
  tag: string;
  tag_color: AnnouncementColor;
  published: boolean;
  pinned: boolean;
};

function toForm(a?: Announcement | null): FormState {
  return {
    title: a?.title ?? "",
    content: a?.content ?? "",
    tag: a?.tag ?? "公告",
    tag_color: a?.tag_color ?? "blue",
    published: a?.published ?? true,
    pinned: a?.pinned ?? false,
  };
}

function sameForm(a: FormState, b: FormState): boolean {
  return (
    a.title === b.title &&
    a.content === b.content &&
    a.tag === b.tag &&
    a.tag_color === b.tag_color &&
    a.published === b.published &&
    a.pinned === b.pinned
  );
}

export default function AnnouncementComposeClient({
  mode,
  initial,
}: {
  mode: "create" | "edit";
  initial?: Announcement | null;
}) {
  const router = useRouter();
  const baseline = useMemo(() => toForm(initial), [initial]);
  const [form, setForm] = useState<FormState>(baseline);
  const formRef = useRef(form);
  const [saving, setSaving] = useState(false);
  const isEdit = mode === "edit" && initial != null;
  const dirty = !sameForm(form, baseline);
  const { leaveOpen, confirmLeave, cancelLeave } = useUnsavedGuard(dirty && !saving);

  const patchForm = (patch: Partial<FormState> | ((prev: FormState) => FormState)) => {
    setForm((prev) => {
      const next = typeof patch === "function" ? patch(prev) : { ...prev, ...patch };
      formRef.current = next;
      return next;
    });
  };

  async function save() {
    if (saving) return;
    const current = formRef.current;
    const payload: AnnouncementInput = {
      title: current.title.trim(),
      content: current.content.trim(),
      tag: current.tag.trim() || "公告",
      tag_color: current.tag_color,
      published: current.published,
      pinned: current.pinned,
    };
    if (!payload.title || !payload.content) {
      toast("标题和内容不能为空");
      return;
    }
    setSaving(true);
    try {
      if (isEdit) {
        await apiAdminUpdateAnnouncement(initial.id, payload);
        toast("公告已更新", "ok");
      } else {
        await apiAdminCreateAnnouncement(payload);
        toast(payload.published ? "公告已发布" : "草稿已保存", "ok");
      }
      router.push("/admin/announcements");
      router.refresh();
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  }

  const saveLabel = isEdit ? "保存修改" : form.published ? "发布公告" : "保存草稿";

  return (
    <AdminSettingsPage className="is-fill">
      <AdminPageHeader
        icon={Megaphone}
        title={isEdit ? "编辑公告" : "新建公告"}
        description="标签与置顶会出现在首页右栏；正文支持 Markdown。"
        actions={
          <Link href="/admin/announcements" className="btn btn-line btn-sm">
            <ArrowLeft size={14} /> 返回列表
          </Link>
        }
      />

      <div className="admin-settings-main admin-settings-stack">
        <AdminSettingsGroup title="发布设置" description="标签色与置顶只影响前台展示，不改正文。">
          <AdminSettingsRow label="标签" htmlFor="anno-tag">
            <AdminField
              id="anno-tag"
              label="标签"
              embed
              className="admin-settings-control-text"
              maxLength={32}
              value={form.tag}
              onChange={(tag) => patchForm({ tag })}
              placeholder="公告"
            />
          </AdminSettingsRow>
          <AdminSettingsRow label="标签颜色">
            <div className="flex items-center gap-2 flex-wrap">
              {ANNOUNCEMENT_COLORS.map((c) => (
                <button
                  key={c.value}
                  type="button"
                  data-tip={c.label}
                  aria-label={c.label}
                  aria-pressed={form.tag_color === c.value}
                  className={`j13-anno-dot is-${c.value}`}
                  onClick={() => patchForm({ tag_color: c.value })}
                />
              ))}
            </div>
          </AdminSettingsRow>
          <AdminSettingsRow label="发布状态">
            <AdminSegmented<PublishKey>
              role="group"
              ariaLabel="发布状态"
              value={form.published ? "published" : "draft"}
              onChange={(key) => patchForm({ published: key === "published" })}
              options={[
                { key: "published", label: "立即发布" },
                { key: "draft", label: "存为草稿" },
              ]}
            />
          </AdminSettingsRow>
          <AdminSettingsRow label="置顶" hintBelow="置顶后优先显示在首页右栏">
            <AdminSwitch
              checked={form.pinned}
              onChange={() => patchForm((f) => ({ ...f, pinned: !f.pinned }))}
              label="置顶公告"
            />
          </AdminSettingsRow>
        </AdminSettingsGroup>

        <AdminSettingsGroup
          className="is-fill"
          title="标题与正文"
          footer={
            <AdminSettingsActions
              dirty={dirty}
              saving={saving}
              saveLabel={saveLabel}
              onSave={() => void save()}
              onDiscard={() => {
                formRef.current = baseline;
                setForm(baseline);
              }}
            />
          }
        >
          <AdminSettingsRow label="标题" htmlFor="anno-title" wide>
            <AdminField
              id="anno-title"
              label="标题"
              embed
              maxLength={200}
              value={form.title}
              onChange={(title) => patchForm({ title })}
              placeholder="请输入公告标题"
            />
          </AdminSettingsRow>
          <AdminSettingsRow className="admin-settings-md-editor" label="正文" htmlFor="anno-content" wide>
            <div className="admin-settings-md">
              <MarkdownEditor
                id="anno-content"
                value={form.content}
                onChange={(content) => patchForm({ content })}
                allowHide
                allowReplyHide={false}
                placeholder="请输入公告正文，支持 Markdown…"
                rows={18}
                onSubmitShortcut={() => void save()}
              />
            </div>
          </AdminSettingsRow>
        </AdminSettingsGroup>
      </div>

      <ConfirmDialog
        open={leaveOpen}
        title="有未保存的修改"
        message="离开后，尚未写入的修改会丢失。确定离开？"
        confirmLabel="离开"
        danger
        onCancel={cancelLeave}
        onConfirm={confirmLeave}
      />
    </AdminSettingsPage>
  );
}