"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { X, Paperclip, Download } from "lucide-react";
import {
  apiCreatePost,
  apiUpdatePost,
  apiUploadPostFile,
  apiDeletePostFile,
  apiUpdatePostFilePrice,
  fetchBoards,
  type Board,
  type PostAttachment,
} from "@/lib/api";
import {
  POST_TYPES,
  CONTENT_ACCESS,
  BOUNTY_EXPIRE_DAYS,
  LOTTERY_EXPIRE_DAYS,
  normalizePostType,
  type PostTypeValue,
  type ContentAccessValue,
} from "@/lib/postMeta";
import { toast } from "@/lib/toast";
import MarkdownEditor from "@/components/MarkdownEditor";
import BoardPicker, { BoardBadge } from "@/components/BoardPicker";

const TITLE_MAX = 256;
const DRAFT_KEY = "j13-compose-draft";
const DRAFT_DEBOUNCE_MS = 600;

type ComposeDraft = {
  title: string;
  content: string;
  tags: string;
  boardId: number;
  postType?: string;
  contentAccess?: string;
  accessPoints?: number;
  typeMeta?: string;
  updatedAt: number;
};

function parseTags(raw: string): string[] {
  return [
    ...new Set(
      raw
        .split(/[,，]/)
        .map((t) => t.trim())
        .filter(Boolean)
    ),
  ].slice(0, 12);
}

function serializeTags(tags: string[]): string {
  return tags.join(", ");
}

function mapPostError(msg: string): string {
  if (!msg) return "操作失败";
  const cooldown = msg.match(/新用户注册\s*(\d+)\s*小时后才能发帖/);
  if (cooldown) {
    return `新用户注册满 ${cooldown[1]} 小时后才能发帖，请稍后再试`;
  }
  if (msg.includes("24 小时") || msg.includes("24小时") || msg.includes("冷静")) {
    return "新用户尚在发帖冷静期内，请稍后再试";
  }
  if (msg.includes("积分")) return msg;
  if (msg.includes("rate") || msg.includes("频繁") || msg.includes("太快")) {
    return "操作过于频繁，请稍后再试";
  }
  return msg;
}

function readDraft(): ComposeDraft | null {
  try {
    const raw = localStorage.getItem(DRAFT_KEY);
    if (!raw) return null;
    const d = JSON.parse(raw) as ComposeDraft;
    if (!d || typeof d !== "object") return null;
    return d;
  } catch {
    return null;
  }
}

function clearDraft() {
  try {
    localStorage.removeItem(DRAFT_KEY);
  } catch {
    /* ignore */
  }
}

function writeDraft(d: ComposeDraft) {
  try {
    localStorage.setItem(DRAFT_KEY, JSON.stringify(d));
  } catch {
    /* ignore */
  }
}

function formatSize(n: number) {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / 1024 / 1024).toFixed(1)} MB`;
}

type CreateProps = {
  mode: "create";
  initialBoardId?: number;
  cancelHref?: string;
};

type EditProps = {
  mode: "edit";
  postId: number;
  initialTitle: string;
  initialContent: string;
  initialTags?: string;
  initialPostType?: string;
  initialContentAccess?: string;
  initialAccessPoints?: number;
  initialTypeMeta?: string;
  initialAttachments?: PostAttachment[];
  /** 投票帖：有票后禁止改选项 */
  canEditPollOptions?: boolean;
  boardName?: string;
  boardId?: number;
  boardColorIndex?: number;
  cancelHref: string;
};

export type PostComposerProps = CreateProps | EditProps;

export default function PostComposer(props: PostComposerProps) {
  const router = useRouter();
  const isCreate = props.mode === "create";

  const [boards, setBoards] = useState<Board[]>([]);
  const [boardsReady, setBoardsReady] = useState(!isCreate);
  const [boardId, setBoardId] = useState(
    isCreate ? props.initialBoardId || 0 : props.boardId || 0
  );
  const [title, setTitle] = useState(isCreate ? "" : props.initialTitle);
  const [content, setContent] = useState(isCreate ? "" : props.initialContent);
  const [tagList, setTagList] = useState<string[]>(
    parseTags(isCreate ? "" : props.initialTags || "")
  );
  const [tagInput, setTagInput] = useState("");
  const [postType, setPostType] = useState<PostTypeValue>(
    normalizePostType(isCreate ? "discussion" : props.initialPostType)
  );
  const [contentAccess, setContentAccess] = useState<ContentAccessValue>(
    (isCreate
      ? "public"
      : (props.initialContentAccess as ContentAccessValue) || "public") as ContentAccessValue
  );
  const [accessPoints, setAccessPoints] = useState(
    isCreate ? 10 : props.initialAccessPoints || 10
  );
  const [typeMeta, setTypeMeta] = useState(
    isCreate ? "" : props.initialTypeMeta || ""
  );
  // 类型专属表单状态
  const [pollOptions, setPollOptions] = useState<string[]>(() => {
    try {
      const m = JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}");
      return Array.isArray(m.options) && m.options.length >= 2
        ? m.options
        : ["", ""];
    } catch {
      return ["", ""];
    }
  });
  const [pollMulti, setPollMulti] = useState(() => {
    try {
      return !!JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}").multi;
    } catch {
      return false;
    }
  });
  const [pollAnonymous, setPollAnonymous] = useState(() => {
    if (isCreate) return true;
    try {
      const m = JSON.parse(props.initialTypeMeta || "{}");
      // 缺省视为匿名（与后端一致）
      return m.anonymous !== false;
    } catch {
      return true;
    }
  });
  const [bountyPoints, setBountyPoints] = useState(() => {
    try {
      const p = Number(JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}").points);
      return p > 0 ? p : 20;
    } catch {
      return 20;
    }
  });
  const [lotterySlots, setLotterySlots] = useState(() => {
    try {
      const s = Number(JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}").slots);
      return s > 0 ? s : 1;
    } catch {
      return 1;
    }
  });
  const [bountyExpireDays, setBountyExpireDays] = useState(() => {
    try {
      const d = Number(JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}").expire_days);
      return (BOUNTY_EXPIRE_DAYS as readonly number[]).includes(d) ? d : 7;
    } catch {
      return 7;
    }
  });
  const [lotteryExpireDays, setLotteryExpireDays] = useState(() => {
    try {
      const d = Number(JSON.parse(isCreate ? "{}" : props.initialTypeMeta || "{}").expire_days);
      return (LOTTERY_EXPIRE_DAYS as readonly number[]).includes(d) ? d : 7;
    } catch {
      return 7;
    }
  });
  const canEditPoll =
    isCreate || (props.mode === "edit" && props.canEditPollOptions !== false);
  const [attachments, setAttachments] = useState<PostAttachment[]>(
    isCreate ? [] : props.initialAttachments || []
  );
  const [fileBusy, setFileBusy] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [draftBanner, setDraftBanner] = useState<ComposeDraft | null>(null);
  const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const skipDraftSave = useRef(true);
  const formRef = useRef<HTMLFormElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  const preferredBoardId = isCreate ? props.initialBoardId || 0 : 0;

  useEffect(() => {
    if (!isCreate) return;
    let cancelled = false;
    fetchBoards()
      .then((data) => {
        if (cancelled) return;
        const list = data.boards || [];
        setBoards(list);
        setBoardsReady(true);
        const preferred = preferredBoardId;
        const hit = preferred && list.some((b) => b.id === preferred);
        if (hit) {
          setBoardId(preferred);
        } else if (list.length > 0) {
          setBoardId((cur) =>
            cur && list.some((b) => b.id === cur) ? cur : list[0].id
          );
        }
        const draft = readDraft();
        if (
          draft &&
          (draft.title.trim() || draft.content.trim() || draft.tags.trim())
        ) {
          setDraftBanner(draft);
          skipDraftSave.current = true;
        } else {
          skipDraftSave.current = false;
        }
      })
      .catch(() => {
        if (!cancelled) {
          setBoardsReady(true);
          skipDraftSave.current = false;
        }
      });
    return () => {
      cancelled = true;
    };
  }, [isCreate, preferredBoardId]);

  useEffect(() => {
    if (!isCreate || skipDraftSave.current) return;
    if (draftTimer.current) clearTimeout(draftTimer.current);
    draftTimer.current = setTimeout(() => {
      if (!title.trim() && !content.trim() && tagList.length === 0) {
        clearDraft();
        return;
      }
      writeDraft({
        title,
        content,
        tags: serializeTags(tagList),
        boardId,
        postType,
        contentAccess,
        accessPoints,
        typeMeta,
        updatedAt: Date.now(),
      });
    }, DRAFT_DEBOUNCE_MS);
    return () => {
      if (draftTimer.current) clearTimeout(draftTimer.current);
    };
  }, [
    isCreate,
    title,
    content,
    tagList,
    boardId,
    postType,
    contentAccess,
    accessPoints,
    typeMeta,
  ]);

  const restoreDraft = () => {
    if (!draftBanner) return;
    setTitle(draftBanner.title || "");
    setContent(draftBanner.content || "");
    setTagList(parseTags(draftBanner.tags || ""));
    if (draftBanner.boardId) setBoardId(draftBanner.boardId);
    if (draftBanner.postType) setPostType(normalizePostType(draftBanner.postType));
    if (draftBanner.contentAccess) {
      setContentAccess(draftBanner.contentAccess as ContentAccessValue);
    }
    if (draftBanner.accessPoints) setAccessPoints(draftBanner.accessPoints);
    if (draftBanner.typeMeta) setTypeMeta(draftBanner.typeMeta);
    setDraftBanner(null);
    skipDraftSave.current = false;
    toast("已恢复草稿", "ok");
  };

  const discardDraft = () => {
    clearDraft();
    setDraftBanner(null);
    skipDraftSave.current = false;
  };

  const commitTagInput = useCallback(() => {
    const parts = parseTags(tagInput);
    if (parts.length === 0) {
      setTagInput("");
      return;
    }
    setTagList((prev) => {
      const next = [...prev];
      for (const p of parts) {
        if (next.length >= 12) break;
        if (!next.includes(p)) next.push(p);
      }
      return next;
    });
    setTagInput("");
  }, [tagInput]);

  const removeTag = (t: string) => {
    setTagList((prev) => prev.filter((x) => x !== t));
  };

  const buildTypeMeta = (): string => {
    if (postType === "discussion") return "";
    if (postType === "question") {
      return JSON.stringify({ solved: false, accepted_comment_id: 0 });
    }
    if (postType === "poll") {
      return JSON.stringify({
        options: pollOptions.map((o) => o.trim()).filter(Boolean),
        multi: pollMulti,
        anonymous: pollAnonymous,
        closed: false,
      });
    }
    if (postType === "bounty") {
      return JSON.stringify({
        points: Math.max(1, bountyPoints || 1),
        accepted_comment_id: 0,
        escrowed: false,
        refunded: false,
        expired: false,
        expire_days: bountyExpireDays,
      });
    }
    if (postType === "lottery") {
      return JSON.stringify({
        slots: Math.max(1, lotterySlots || 1),
        drawn: false,
        winner_ids: [],
        closed: false,
        expire_days: lotteryExpireDays,
      });
    }
    return typeMeta.trim();
  };

  const onPickFile = async (file: File | null) => {
    if (!file || fileBusy) return;
    if (attachments.length >= 10) {
      toast("最多 10 个附件", "error");
      return;
    }
    setFileBusy(true);
    try {
      const res = await apiUploadPostFile(file, 0);
      if (res.attachment) {
        setAttachments((prev) => [...prev, res.attachment!]);
        toast("附件已上传", "ok");
      } else {
        toast(res.error || "上传失败", "error");
      }
    } catch {
      toast("上传失败", "error");
    } finally {
      setFileBusy(false);
      if (fileRef.current) fileRef.current.value = "";
    }
  };

  const removeAttachment = async (id: number) => {
    setAttachments((prev) => prev.filter((a) => a.id !== id));
    try {
      await apiDeletePostFile(id);
    } catch {
      /* 本地已移除 */
    }
  };

  const setAttPrice = async (id: number, price: number) => {
    const p = Math.max(0, Math.min(100000, Math.floor(price) || 0));
    setAttachments((prev) =>
      prev.map((a) => (a.id === id ? { ...a, price_points: p } : a))
    );
    await apiUpdatePostFilePrice(id, p);
  };

  const canSubmit =
    !loading &&
    title.trim().length > 0 &&
    content.trim().length > 0 &&
    (isCreate ? boardsReady && boardId > 0 : true) &&
    (contentAccess !== "points" || accessPoints > 0) &&
    (postType !== "poll" ||
      pollOptions.map((o) => o.trim()).filter(Boolean).length >= 2) &&
    (postType !== "bounty" || bountyPoints > 0) &&
    (postType !== "lottery" || lotterySlots > 0);

  const handleSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!canSubmit) return;
    setLoading(true);
    setError("");
    const tags = serializeTags(tagList);
    const meta = buildTypeMeta();
    const attIds = attachments.map((a) => a.id);
    try {
      if (isCreate) {
        const res = await apiCreatePost({
          board_id: boardId,
          title: title.trim(),
          content: content.trim(),
          tags,
          post_type: postType,
          content_access: contentAccess,
          access_points: contentAccess === "points" ? accessPoints : 0,
          type_meta: meta,
          attachment_ids: attIds,
        });
        if (res.post) {
          clearDraft();
          if (res.post.status === "pending") {
            toast("已提交，等待审核通过后公开", "ok");
          } else {
            toast("发布成功", "ok");
          }
          router.push(`/post/${res.post.id}`);
        } else {
          setError(mapPostError(res.error || "发帖失败"));
        }
      } else {
        const res = await apiUpdatePost(String(props.postId), {
          title: title.trim(),
          content: content.trim(),
          tags,
          content_access: contentAccess,
          access_points: contentAccess === "points" ? accessPoints : 0,
          type_meta: meta,
          attachment_ids: attIds,
        });
        if (res.post) {
          toast("已保存", "ok");
          router.push(props.cancelHref);
        } else {
          setError(mapPostError(res.error || "保存失败"));
        }
      }
    } catch {
      setError("网络错误，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  const cancelHref = isCreate ? props.cancelHref || "/" : props.cancelHref;

  return (
    <form ref={formRef} onSubmit={handleSubmit} className="j13-compose-stage">
      <div className="j13-compose-body">
        {draftBanner && (
          <div
            className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 rounded-[12px] text-[13px] shrink-0"
            style={{
              background: "var(--accent-soft)",
              color: "var(--ink)",
              border:
                "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
            }}
          >
            <span>
              检测到未发布的本地草稿
              {draftBanner.updatedAt
                ? `（${new Date(draftBanner.updatedAt).toLocaleString("zh-CN")}）`
                : ""}
            </span>
            <span className="flex gap-2">
              <button type="button" className="btn btn-primary btn-sm" onClick={restoreDraft}>
                恢复
              </button>
              <button type="button" className="btn btn-line btn-sm" onClick={discardDraft}>
                丢弃
              </button>
            </span>
          </div>
        )}

        {error && <div className="alert-error shrink-0">{error}</div>}

        {/* 帖子类型 */}
        <div className="shrink-0">
          <div className="field-label mb-2">帖子类型</div>
          <div className="j13-compose-typebar" role="radiogroup" aria-label="帖子类型">
            {POST_TYPES.map((t) => (
              <button
                key={t.value}
                type="button"
                role="radio"
                aria-checked={postType === t.value}
                className={`j13-compose-typechip${postType === t.value ? " is-on" : ""}`}
                disabled={loading || (!isCreate && t.value !== postType)}
                data-tip={!isCreate && t.value !== postType ? "编辑时不可更改类型" : t.hint}
                onClick={() => setPostType(t.value)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        {/* 元信息：板块 + 标签（标签 flex 占满） + 可见性 */}
        <div className="j13-compose-meta shrink-0">
          <div className="j13-compose-meta-board">
            <label className="field-label" htmlFor="compose-board">
              板块
            </label>
            {isCreate ? (
              <BoardPicker
                id="compose-board"
                boards={boards}
                value={boardId}
                onChange={setBoardId}
                disabled={loading}
                loading={!boardsReady}
              />
            ) : (
              <BoardBadge
                name={props.boardName || "未知板块"}
                colorIndex={props.boardColorIndex ?? 0}
              />
            )}
          </div>

          <div className="j13-compose-meta-tags">
            <label className="field-label" htmlFor="compose-tag-input">
              标签
              <span className="font-normal" style={{ color: "var(--ink-3)" }}>
                {" "}
                · 可选，最多 12 个
              </span>
            </label>
            <div
              className="j13-tag-field"
              onClick={() => document.getElementById("compose-tag-input")?.focus()}
            >
              {tagList.map((t) => (
                <span key={t} className="chip inline-flex items-center gap-1 !py-0.5">
                  # {t}
                  <button
                    type="button"
                    data-tip={`移除 ${t}`}
                    aria-label={`移除标签 ${t}`}
                    className="opacity-60 hover:opacity-100"
                    onClick={(e) => {
                      e.stopPropagation();
                      removeTag(t);
                    }}
                  >
                    <X size={12} />
                  </button>
                </span>
              ))}
              <input
                id="compose-tag-input"
                value={tagInput}
                disabled={loading || tagList.length >= 12}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === "," || e.key === "，") {
                    e.preventDefault();
                    commitTagInput();
                  } else if (e.key === "Backspace" && !tagInput && tagList.length > 0) {
                    removeTag(tagList[tagList.length - 1]);
                  }
                }}
                onBlur={commitTagInput}
                placeholder={tagList.length === 0 ? "输入后回车添加" : ""}
                className="j13-tag-field-input flex-1 min-w-[8rem] self-stretch h-8 text-[13px]"
                style={{ color: "var(--ink)" }}
              />
            </div>
          </div>

          <div className="j13-compose-meta-access">
            <label className="field-label" htmlFor="compose-access">
              正文可见性
            </label>
            <select
              id="compose-access"
              className="j13-compose-field"
              value={contentAccess}
              disabled={loading}
              onChange={(e) => setContentAccess(e.target.value as ContentAccessValue)}
            >
              {CONTENT_ACCESS.map((a) => (
                <option key={a.value} value={a.value}>
                  {a.label}
                </option>
              ))}
            </select>
            {contentAccess === "points" && (
              <div className="mt-2 flex items-center gap-2">
                <label className="meta text-[12.5px] shrink-0" htmlFor="compose-access-pts">
                  所需积分
                </label>
                <input
                  id="compose-access-pts"
                  type="number"
                  min={1}
                  max={100000}
                  value={accessPoints}
                  disabled={loading}
                  onChange={(e) => setAccessPoints(Number(e.target.value) || 0)}
                  className="j13-compose-field !py-1.5 w-28"
                />
              </div>
            )}
          </div>
        </div>

        {/* 类型专属面板 */}
        {postType === "poll" && (
          <div className="j13-compose-typepanel shrink-0 space-y-3">
            <p className="font-semibold text-[14px]" style={{ color: "var(--ink)" }}>
              投票选项
            </p>
            {!canEditPoll && (
              <p className="meta text-[12.5px]">已有人投票，无法修改选项、单/多选或匿名设置</p>
            )}
            {pollOptions.map((opt, i) => (
              <div key={i} className="flex items-center gap-2">
                <input
                  className="j13-compose-field flex-1"
                  value={opt}
                  maxLength={64}
                  placeholder={`选项 ${i + 1}`}
                  disabled={loading || !canEditPoll}
                  onChange={(e) => {
                    const next = [...pollOptions];
                    next[i] = e.target.value;
                    setPollOptions(next);
                  }}
                />
                {pollOptions.length > 2 && canEditPoll && (
                  <button
                    type="button"
                    className="btn btn-line btn-sm !px-2"
                    onClick={() => setPollOptions((p) => p.filter((_, j) => j !== i))}
                  >
                    <X size={14} />
                  </button>
                )}
              </div>
            ))}
            <div className="flex flex-wrap items-center gap-3">
              {pollOptions.length < 10 && canEditPoll && (
                <button
                  type="button"
                  className="btn btn-line btn-sm"
                  onClick={() => setPollOptions((p) => [...p, ""])}
                >
                  添加选项
                </button>
              )}
              <label className="meta text-[13px] inline-flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={pollMulti}
                  disabled={loading || !canEditPoll}
                  onChange={(e) => setPollMulti(e.target.checked)}
                />
                允许多选
              </label>
              <label className="meta text-[13px] inline-flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={pollAnonymous}
                  disabled={loading || !canEditPoll}
                  onChange={(e) => setPollAnonymous(e.target.checked)}
                />
                匿名投票
              </label>
            </div>
            {!pollAnonymous && (
              <p className="meta text-[12px]">非匿名：投票结果公开后可看到每位投票人</p>
            )}
          </div>
        )}
        {postType === "bounty" && (
          <div className="j13-compose-typepanel shrink-0 space-y-3">
            <p className="font-semibold text-[14px]" style={{ color: "var(--ink)" }}>
              悬赏积分
            </p>
            <p className="meta text-[12.5px]">
              发布时从你的积分余额托管；到期未采纳将自动退回。采纳回答后发给对方。
            </p>
            <div className="flex flex-wrap items-center gap-2">
              <input
                type="number"
                min={1}
                max={100000}
                value={bountyPoints}
                disabled={loading || !isCreate}
                onChange={(e) => setBountyPoints(Number(e.target.value) || 0)}
                className="j13-compose-field w-36"
              />
              <span className="meta text-[13px]">积分</span>
              {!isCreate && (
                <span className="meta text-[12.5px]">编辑不可更改已托管金额</span>
              )}
            </div>
            {isCreate && (
              <div className="flex flex-wrap items-center gap-2">
                <span className="meta text-[13px]">过期天数</span>
                {BOUNTY_EXPIRE_DAYS.map((d) => (
                  <button
                    key={d}
                    type="button"
                    className={`btn btn-sm ${bountyExpireDays === d ? "btn-primary" : "btn-line"}`}
                    disabled={loading}
                    onClick={() => setBountyExpireDays(d)}
                  >
                    {d} 天
                  </button>
                ))}
              </div>
            )}
          </div>
        )}
        {postType === "lottery" && (
          <div className="j13-compose-typepanel shrink-0 space-y-3">
            <p className="font-semibold text-[14px]" style={{ color: "var(--ink)" }}>
              抽奖设置
            </p>
            <p className="meta text-[12.5px]">
              对本帖发表评论的用户自动进入奖池（楼主除外）；截止时可自动开奖。
            </p>
            <div className="flex items-center gap-2">
              <label className="meta text-[13px]" htmlFor="lottery-slots">
                中奖名额
              </label>
              <input
                id="lottery-slots"
                type="number"
                min={1}
                max={100}
                value={lotterySlots}
                disabled={loading || !isCreate}
                onChange={(e) => setLotterySlots(Number(e.target.value) || 1)}
                className="j13-compose-field w-28"
              />
            </div>
            {isCreate && (
              <div className="flex flex-wrap items-center gap-2">
                <span className="meta text-[13px]">截止天数</span>
                {LOTTERY_EXPIRE_DAYS.map((d) => (
                  <button
                    key={d}
                    type="button"
                    className={`btn btn-sm ${lotteryExpireDays === d ? "btn-primary" : "btn-line"}`}
                    disabled={loading}
                    onClick={() => setLotteryExpireDays(d)}
                  >
                    {d} 天
                  </button>
                ))}
              </div>
            )}
          </div>
        )}

        {/* 大标题 */}
        <div className="shrink-0">
          <div className="flex items-end justify-between gap-3 mb-1">
            <label className="sr-only" htmlFor="compose-title">
              标题
            </label>
            <span className="meta text-[12px] tabular-nums ml-auto">
              {title.length}/{TITLE_MAX}
            </span>
          </div>
          <input
            id="compose-title"
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value.slice(0, TITLE_MAX))}
            required
            maxLength={TITLE_MAX}
            placeholder="一句话说清楚你要讨论什么"
            className="j13-compose-title"
            disabled={loading}
          />
        </div>

        {/* 正文 */}
        <div className="j13-compose-canvas">
          <label className="sr-only" htmlFor="compose-content">
            正文
          </label>
          <MarkdownEditor
            id="compose-content"
            value={content}
            onChange={setContent}
            disabled={loading}
            rows={18}
            placeholder={
              "从这里开始写正文…\n\n支持 Markdown；可用工具栏插入格式与图片。可点全屏沉浸写作。"
            }
            onSubmitShortcut={() => {
              if (canSubmit) void handleSubmit();
            }}
          />
        </div>

        {/* 附件 */}
        <div className="j13-compose-attach shrink-0">
          <div className="flex items-center justify-between gap-3 mb-2">
            <div className="field-label !mb-0">附件</div>
            <button
              type="button"
              className="btn btn-line btn-sm inline-flex items-center gap-1.5"
              disabled={loading || fileBusy || attachments.length >= 10}
              onClick={() => fileRef.current?.click()}
            >
              <Paperclip size={14} />
              {fileBusy ? "上传中…" : "添加文件"}
            </button>
            <input
              ref={fileRef}
              type="file"
              className="hidden"
              onChange={(e) => void onPickFile(e.target.files?.[0] ?? null)}
            />
          </div>
          <p className="meta text-[12.5px] mb-2">
            单文件 ≤20MB，最多 10 个；可设免费或积分下载
          </p>
          {attachments.length === 0 ? (
            <p className="meta text-[13px] py-2">暂无附件</p>
          ) : (
            <ul className="space-y-2">
              {attachments.map((a) => (
                <li key={a.id} className="j13-compose-attach-row">
                  <Download size={15} className="shrink-0 opacity-50" />
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-[13.5px]">{a.name}</div>
                    <div className="meta text-[12px]">{formatSize(a.size)}</div>
                  </div>
                  <label className="meta text-[12px] flex items-center gap-1.5 shrink-0">
                    积分
                    <input
                      type="number"
                      min={0}
                      max={100000}
                      value={a.price_points}
                      disabled={loading}
                      onChange={(e) => void setAttPrice(a.id, Number(e.target.value))}
                      className="j13-compose-field !py-1 !px-2 w-20 text-[13px]"
                      data-tip="0 = 免费下载"
                    />
                  </label>
                  <button
                    type="button"
                    className="btn btn-line btn-sm !px-2"
                    data-tip="移除附件"
                    aria-label="移除附件"
                    onClick={() => void removeAttachment(a.id)}
                  >
                    <X size={14} />
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>

      <div className="j13-compose-actions">
        <button
          type="submit"
          disabled={!canSubmit}
          className="btn btn-primary min-w-[8.5rem] !px-7 !py-3 !text-[15px]"
        >
          {loading
            ? isCreate
              ? "发布中…"
              : "保存中…"
            : isCreate
              ? "发布帖子"
              : "保存修改"}
        </button>
        {isCreate ? (
          <Link href={cancelHref} className="btn btn-line !py-3">
            取消
          </Link>
        ) : (
          <button
            type="button"
            onClick={() => router.push(cancelHref)}
            className="btn btn-line !py-3"
          >
            取消
          </button>
        )}
        <span className="meta text-[12.5px] sm:ml-auto max-w-md">
          {isCreate
            ? "普通用户发帖需审核 · Ctrl/⌘+Enter 提交 · Esc 退出全屏"
            : "保存后立即生效 · 类型不可更改"}
        </span>
      </div>
    </form>
  );
}