"use client";

import { useParams } from "next/navigation";
import Link from "next/link";
import { TopicHeader } from "../components/TopicHeader";
import { TopicBreadcrumb } from "../components/TopicBreadcrumb";
import { TopicHero } from "../components/TopicHero";
import { TopicCurriculum } from "../components/TopicCurriculum";
import { TopicComingSoon } from "../components/TopicComingSoon";
import { TopicFooter } from "../components/TopicFooter";
import { getTopicConfig } from "../config";
import { ChatFloatButton } from "@/app/cloudphone/components/ChatFloatButton";

export default function TopicPage() {
  const params = useParams();
  const topicId = String(params?.topicId ?? "");
  const config = getTopicConfig(topicId);

  if (!config) {
    return (
      <div className="min-h-screen bg-[var(--background)]">
        <TopicHeader topicId="cloudphone" />
        <main className="pt-20 pb-16">
          <div className="mx-auto max-w-4xl px-4 py-16 text-center">
            <h1 className="mb-4 text-2xl font-bold">模块不存在</h1>
            <p className="mb-6 text-[var(--muted-foreground)]">请检查链接或返回首页</p>
            <Link
              href="/"
              className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
            >
              ← 返回首页
            </Link>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <TopicHeader topicId={topicId} />
      <ChatFloatButton />
      <main>
        <div className="mx-auto max-w-6xl px-4 pt-20 sm:px-6 md:px-6">
          <TopicBreadcrumb topicId={topicId} />
        </div>
        <TopicHero topicId={topicId} />
        <TopicCurriculum topicId={topicId} />
        <TopicComingSoon topicId={topicId} />
        <TopicFooter topicId={topicId} />
      </main>
    </div>
  );
}