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

"use client";

import { useCallback, useState } from "react";
import {
  Plus,
  Pencil,
  Trash2,
  Loader2,
  Save,
  X,
  ExternalLink,
  Megaphone,
} from "lucide-react";
import {
  apiAdminListAnnouncements,
  apiAdminCreateAnnouncement,
  apiAdminUpdateAnnouncement,
  apiAdminDeleteAnnouncement,
  type Announcement,
  type AnnouncementColor,
  type AnnouncementInput,
} from "@/lib/api";
import { formatDate } from "@/lib/format";
import { toast } from "@/lib/toast";
import ConfirmDialog from "@/components/ConfirmDialog";
import {
  AdminEmpty,
  AdminField,
  AdminIconButton,
  AdminPageHeader,
  AdminSegmented,
} from "@/components/admin";

const COLORS: { value: AnnouncementColor; label: string }[] = [
  { value: "blue", label: "蓝色" },
  { value: "green", label: "绿色" },
  { value: "orange", label: "橙色" },
  { value: "red", label: "红色" },
  { value: "purple", label: "紫色" },
  { value: "gray", label: "灰色" },
];

type FormState = AnnouncementInput & { id: number | null };
type PublishKey = "published" | "draft";

const EMPTY_FORM: FormState = {
  id: null,
  title: "",
  content: "",
  tag: "公告",
  tag_color: "blue",
  published: true,
};

export default function AnnouncementAdmin({
  initial,
  initError,
}: {
  initial: Announcement[];
  initError: string;
}) {
  const [list, setList] = useState(initial);
  const [loadError, setLoadError] = useState(initError);
  const [form, setForm] = useState<FormState | null>(null);
  const [saving, setSaving] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Announcement | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await apiAdminListAnnouncements();
      setList(res.announcements);
      setLoadError("");
    } catch (e) {
      setLoadError(e instanceof Error ? e.message : "加载公告失败");
    }
  }, []);

  const startCreate = () => setForm({ ...EMPTY_FORM });
  const startEdit = (a: Announcement) =>
    setForm({
      id: a.id,
      title: a.title,
      content: a.content,
      tag: a.tag,
      tag_color: a.tag_color,
      published: a.published,
    });

  async function save() {
    if (!form) return;
    const payload: AnnouncementInput = {
      title: form.title.trim(),
      content: form.content.trim(),
      tag: form.tag.trim() || "公告",
      tag_color: form.tag_color,
      published: form.published,
    };
    if (!payload.title || !payload.content) {
      toast("标题和内容不能为空");
      return;
    }
    setSaving(true);
    try {
      if (form.id == null) {
        await apiAdminCreateAnnouncement(payload);
        toast("公告已发布", "ok");
      } else {
        await apiAdminUpdateAnnouncement(form.id, payload);
        toast("公告已更新", "ok");
      }
      setForm(null);
      await load();
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  }

  async function remove(a: Announcement) {
    setDeletingId(a.id);
    try {
      await apiAdminDeleteAnnouncement(a.id);
      setList((l) => l.filter((x) => x.id !== a.id));
      if (form?.id === a.id) setForm(null);
      toast("公告已删除", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "删除失败");
    } finally {
      setDeletingId(null);
      setDeleteTarget(null);
    }
  }

  return (
    <div>
      <AdminPageHeader
        icon={Megaphone}
        title="站点公告管理"
        description="发布、编辑与下线右栏站点公告，支持自定义标签与标签颜色"
        actions={
          form?.id == null ? (
            <button type="button" onClick={startCreate} className="btn btn-primary">
              <Plus size={15} /> 新建公告
            </button>
          ) : undefined
        }
      />

      <div className="grid grid-cols-1 gap-6 items-start">
        {/* 编辑/新建表单：仅在新建或编辑时展开，空闲不占位 */}
        {form && (
          <div className="panel p-5">
            <p className="font-semibold text-[15px] mb-4" style={{ color: "var(--ink)" }}>
              {form.id == null ? "新建公告" : "编辑公告"}
            </p>

            <AdminField
              id="anno-title"
              className="mb-4"
              label="标题"
              maxLength={200}
              value={form.title}
              onChange={(title) => setForm({ ...form, title })}
              placeholder="请输入公告标题"
            />

            <div className="flex items-end gap-4 mb-4 flex-wrap">
              <div className="w-36">
                <AdminField
                  id="anno-tag"
                  label="标签"
                  maxLength={32}
                  value={form.tag}
                  onChange={(tag) => setForm({ ...form, tag })}
                  placeholder="公告"
                />
              </div>
              <div>
                <p className="field-label">标签颜色</p>
                <div className="flex items-center gap-2">
                  {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={() => setForm({ ...form, tag_color: c.value })}
                    />
                  ))}
                </div>
              </div>
            </div>

            <p className="field-label">发布状态</p>
            <div className="mb-4">
              <AdminSegmented<PublishKey>
                role="group"
                ariaLabel="发布状态"
                value={form.published ? "published" : "draft"}
                onChange={(key) => setForm({ ...form, published: key === "published" })}
                options={[
                  { key: "published", label: "立即发布" },
                  { key: "draft", label: "存为草稿" },
                ]}
              />
            </div>

            <AdminField
              id="anno-content"
              label="正文（支持 Markdown）"
              as="textarea"
              minHeight="260px"
              value={form.content}
              onChange={(content) => setForm({ ...form, content })}
              placeholder="请输入公告正文，支持 Markdown 语法…"
            />

            <div className="flex items-center gap-2.5 mt-4">
              <button type="button" onClick={save} disabled={saving} className="btn btn-primary flex-1 justify-center">
                {saving ? (
                  <>
                    <Loader2 size={15} className="animate-spin" /> 保存中…
                  </>
                ) : (
                  <>
                    <Save size={15} /> {form.id == null ? "发布公告" : "保存修改"}
                  </>
                )}
              </button>
              <button
                type="button"
                onClick={() => setForm(null)}
                disabled={saving}
                className="btn btn-line"
                aria-label="取消编辑"
              >
                <X size={15} /> 取消
              </button>
            </div>
          </div>
        )}

        {/* 公告列表 */}
        <div className="panel overflow-hidden">
          <div
            className="px-4 sm:px-5 py-3.5 flex items-center justify-between"
            style={{ borderBottom: "1px solid var(--line)" }}
          >
            <span className="font-medium text-[15px]" style={{ color: "var(--ink)" }}>
              全部公告
            </span>
            <span className="meta text-[12px] tabular-nums">共 {list.length} 条</span>
          </div>

          {loadError ? (
            <p className="alert-error m-4">{loadError}</p>
          ) : list.length === 0 ? (
            <AdminEmpty
              icon={<Megaphone size={22} />}
              title="还没有公告"
              description="点击「新建公告」发布第一条吧"
            />
          ) : (
            list.map((a) => (
              <div
                key={a.id}
                className="group flex items-center gap-3 px-4 sm:px-5 py-3.5"
                style={{ borderTop: "1px solid var(--line)" }}
              >
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
                    {!a.published && (
                      <span
                        className="inline-flex items-center rounded-full px-2 py-px text-[10.5px] leading-[1.55]"
                        style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
                      >
                        草稿
                      </span>
                    )}
                    <span className="meta text-[11px] tabular-nums">{formatDate(a.created_at)}</span>
                  </div>
                  <p
                    className="mt-1 truncate text-[14px]"
                    style={{ color: "var(--ink)" }}
                    data-tip={a.title}
                  >
                    {a.title}
                  </p>
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  {a.published && (
                    <AdminIconButton
                      href={`/announcement/${a.id}`}
                      tip="查看"
                      ariaLabel="查看公告"
                    >
                      <ExternalLink size={15} />
                    </AdminIconButton>
                  )}
                  <AdminIconButton tip="编辑" ariaLabel="编辑公告" onClick={() => startEdit(a)}>
                    <Pencil size={15} />
                  </AdminIconButton>
                  <AdminIconButton
                    tip="删除"
                    ariaLabel="删除公告"
                    tone="danger"
                    disabled={deletingId === a.id}
                    onClick={() => setDeleteTarget(a)}
                  >
                    {deletingId === a.id ? <Loader2 size={15} className="animate-spin" /> : <Trash2 size={15} />}
                  </AdminIconButton>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      <ConfirmDialog
        open={!!deleteTarget}
        title="删除公告"
        message={deleteTarget ? `确定删除公告「${deleteTarget.title}」吗？此操作不可撤销。` : ""}
        danger
        busy={deletingId != null}
        confirmLabel="删除"
        onCancel={() => deletingId == null && setDeleteTarget(null)}
        onConfirm={() => {
          if (deleteTarget) void remove(deleteTarget);
        }}
      />
    </div>
  );
}