jiang13-bbs/frontend/app/compose/page.tsx

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ChevronRight, PenSquare } from "lucide-react";
import { apiCreatePost, apiMe, fetchBoards, type Board } from "@/lib/api";

export default function ComposePage() {
  const router = useRouter();
  const [boards, setBoards] = useState<Board[]>([]);
  const [boardId, setBoardId] = useState<number>(0);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [tags, setTags] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    apiMe()
      .then((res) => {
        if (!res.user) {
          router.push("/login?redirect=/compose");
          return;
        }
        fetchBoards().then((data) => {
          setBoards(data.boards);
          if (data.boards.length > 0) setBoardId(data.boards[0].id);
        });
      })
      .catch(() => router.push("/login?redirect=/compose"));
  }, [router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await apiCreatePost({
        board_id: boardId,
        title,
        content,
        tags,
        post_type: "normal",
      });
      if (res.post) {
        router.push(`/post/${res.post.id}`);
      } else {
        setError(res.error || "发帖失败");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-3xl mx-auto">
      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>发布新帖</span>
      </nav>

      <div className="mb-7 flex items-center gap-3.5">
        <span
          className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
        >
          <PenSquare size={22} />
        </span>
        <div>
          <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight leading-tight" style={{ color: "var(--ink)" }}>
            发布新帖
          </h1>
          <p className="meta mt-0.5">清晰的标题和内容，更容易获得回应</p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
        {error && <div className="alert-error">{error}</div>}

        <div>
          <label className="field-label">选择板块</label>
          <select
            value={boardId}
            onChange={(e) => setBoardId(Number(e.target.value))}
            className="field"
          >
            {boards.map((b) => (
              <option key={b.id} value={b.id}>
                {b.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="field-label">标题</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
            maxLength={256}
            placeholder="一句话说清楚你要讨论什么"
            className="field"
          />
        </div>

        <div>
          <label className="field-label">标签（逗号分隔，可选）</label>
          <input
            type="text"
            value={tags}
            onChange={(e) => setTags(e.target.value)}
            placeholder="Go, PostgreSQL, 架构"
            className="field"
          />
        </div>

        <div>
          <label className="field-label">正文（支持 Markdown）</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            required
            rows={14}
            placeholder="# 开头写结论&#10;&#10;支持 Markdown 语法..."
            className="field"
          />
        </div>

        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={loading || !title.trim() || !content.trim()}
            className="btn btn-primary"
          >
            {loading ? "发布中..." : "发布帖子"}
          </button>
          <Link href="/" className="btn btn-line">
            取消
          </Link>
        </div>
      </form>
    </div>
  );
}