jiang13-bbs/frontend/app/post/[id]/edit/page.tsx

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { fetchPostDetail, apiMe, apiUpdatePost, type Post, type User } from "@/lib/api";

interface EditPageProps {
  params: Promise<{ id: string }>;
}

export default function EditPostPage({ params }: EditPageProps) {
  const router = useRouter();
  const [post, setPost] = useState<Post | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [tags, setTags] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [checking, setChecking] = useState(true);

  // params 是 Promise，需要解包
  const [id, setId] = useState("");
  useEffect(() => {
    params.then((p) => setId(p.id));
  }, [params]);

  // 加载帖子 + 校验权限
  useEffect(() => {
    if (!id) return;
    Promise.all([fetchPostDetail(id), apiMe()])
      .then(([postData, meData]) => {
        setPost(postData.post);
        setTitle(postData.post.title);
        setContent(postData.post.content);
        setTags(postData.post.tags || "");
        const u = meData.user;
        setUser(u || null);
        // 非作者且非管理员 → 跳转
        if (!u || (u.id !== postData.post.user.id && u.role !== "admin")) {
          router.push(`/post/${id}`);
        }
      })
      .catch(() => router.push(`/post/${id}`))
      .finally(() => setChecking(false));
  }, [id, router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!post) return;
    setLoading(true);
    setError("");
    try {
      const res = await apiUpdatePost(String(post.id), { title, content, tags });
      if (res.post) {
        router.push(`/post/${post.id}`);
      } else {
        setError(res.error || "更新失败");
      }
    } finally {
      setLoading(false);
    }
  };

  if (checking) {
    return (
      <div className="max-w-3xl mx-auto mt-12 text-center" style={{ color: "var(--text-secondary)" }}>
        加载中...
      </div>
    );
  }

  if (!post) return null;

  return (
    <div className="max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">编辑帖子</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
        )}
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标题</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
            maxLength={256}
            className="w-full px-3 py-2 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标签（逗号分隔，可选）</label>
          <input
            type="text"
            value={tags}
            onChange={(e) => setTags(e.target.value)}
            placeholder="例如：技术,Go"
            className="w-full px-3 py-2 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>内容（支持 Markdown）</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            required
            rows={12}
            className="w-full px-3 py-2 rounded-lg border resize-y font-mono"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div className="flex gap-3">
          <button
            type="submit"
            disabled={loading || !title.trim() || !content.trim()}
            className="px-6 py-2 rounded-lg text-white disabled:opacity-50"
            style={{ background: "var(--primary)" }}
          >
            {loading ? "保存中..." : "保存修改"}
          </button>
          <button
            type="button"
            onClick={() => router.push(`/post/${post.id}`)}
            className="px-6 py-2 rounded-lg"
            style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
          >
            取消
          </button>
        </div>
      </form>
    </div>
  );
}