import Link from "next/link";

import { AppShell } from "@/components/AppShell";
import { ProjectCard } from "@/components/ProjectCard";
import { fetchProjects } from "@/lib/api/server";
import type { ProjectResponse } from "@/lib/api/types";

// 作品库（Dashboard 入口，UX §6.1）。Server Component 读取。
export default async function DashboardPage() {
  let projects: ProjectResponse[] = [];
  let loadError = false;
  try {
    const data = await fetchProjects();
    projects = data.projects ?? [];
  } catch {
    loadError = true;
  }

  return (
    <AppShell>
      <div className="mx-auto max-w-5xl px-8 py-10">
        <div className="mb-8 flex items-center justify-between">
          <h1 className="font-serif text-3xl text-ink">我的作品</h1>
          <Link
            href="/projects/new"
            className="rounded bg-cinnabar px-4 py-2 text-sm text-panel hover:opacity-90"
          >
            ＋ 新建作品
          </Link>
        </div>

        {loadError ? (
          <p className="rounded border border-conflict bg-panel p-6 text-conflict">
            无法连接后端服务，请确认 API 已启动后刷新。
          </p>
        ) : projects.length === 0 ? (
          <EmptyState />
        ) : (
          <ul className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {projects.map((p) => (
              <li key={p.id}>
                <ProjectCard project={p} />
              </li>
            ))}
            <li>
              <NewProjectCard />
            </li>
          </ul>
        )}
      </div>
    </AppShell>
  );
}

function EmptyState() {
  return (
    <div className="flex flex-col items-center gap-4 rounded border border-line bg-panel py-20 text-center">
      <p className="font-serif text-2xl text-ink">还没有作品</p>
      <p className="text-ink-soft">从一句灵感开始你的第一本书。</p>
      <Link
        href="/projects/new"
        className="rounded bg-cinnabar px-5 py-2 text-sm text-panel hover:opacity-90"
      >
        ＋ 新建作品
      </Link>
    </div>
  );
}

function NewProjectCard() {
  return (
    <Link
      href="/projects/new"
      className="flex h-full min-h-[160px] flex-col items-center justify-center rounded border border-dashed border-line bg-panel text-center hover:border-cinnabar"
    >
      <span className="font-serif text-xl text-cinnabar">＋ 新建</span>
      <span className="mt-2 text-sm text-ink-soft">从一句灵感开始一本书</span>
    </Link>
  );
}