"use client";

import { useEffect, useState, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { apiMe } from "@/lib/api";
import PostComposer from "@/components/PostComposer";

function ComposeInner() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const initialBoardId = Number(searchParams.get("board")) || 0;
  const [ready, setReady] = useState(false);

  useEffect(() => {
    apiMe()
      .then((res) => {
        if (!res.user) {
          const q = initialBoardId > 0 ? `?board=${initialBoardId}` : "";
          router.push(`/login?redirect=${encodeURIComponent(`/compose${q}`)}`);
          return;
        }
        setReady(true);
      })
      .catch(() => {
        router.push("/login?redirect=/compose");
      });
  }, [router, initialBoardId]);

  if (!ready) {
    return (
      <div className="j13-compose-stage px-8 py-16 text-center">
        <p className="meta">正在准备发帖…</p>
      </div>
    );
  }

  return <PostComposer mode="create" initialBoardId={initialBoardId} />;
}

export default function ComposePage() {
  return (
    <div className="j13-compose-page">
      <nav className="meta mb-4 flex items-center gap-1.5 text-[13px] shrink-0">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">
          首页
        </Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--ink-2)" }}>发布新帖</span>
      </nav>

      <Suspense
        fallback={
          <div className="j13-compose-stage px-8 py-16 text-center">
            <p className="meta">正在准备发帖…</p>
          </div>
        }
      >
        <ComposeInner />
      </Suspense>
    </div>
  );
}