import Link from "next/link";
import { BookOpen, PenLine, Plus } from "lucide-react";

import { AppShell } from "@/components/AppShell";
import { BackendDownNotice } from "@/components/BackendDownNotice";
import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
import { PageContainer } from "@/components/ui/PageContainer";
import { PageHeader } from "@/components/ui/PageHeader";
import { fetchProjects } from "@/lib/api/server";
import type { ProjectResponse } from "@/lib/api/types";
import { buttonClass } from "@/lib/ui/variants";

// 作品库（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>
      <PageContainer>
        <PageHeader
          title="我的作品"
          description="从一个灵感进入正文、设定、审稿与验收闭环。"
          actions={
            <div className="flex flex-wrap items-center gap-2">
              <Link
                href="/write"
                className={buttonClass({ variant: "primary" })}
              >
                <PenLine className="h-4 w-4" aria-hidden="true" />
                直接开始写
              </Link>
              <Link
                href="/projects/new"
                className={buttonClass({ variant: "secondary" })}
              >
                <Plus className="h-4 w-4" aria-hidden="true" />
                先立项
              </Link>
            </div>
          }
        />

        {loadError ? (
          <BackendDownNotice />
        ) : projects.length === 0 ? (
          // 首次进入的暖深色编辑部英雄（对标 DESIGN.md cta-band-dark；仅零作品时出现，不干扰工作库）。
          <div className="rounded-xl border border-line/50 bg-callout px-8 py-14 text-center shadow-paper sm:px-12 sm:py-20">
            <BookOpen className="mx-auto h-9 w-9 text-cinnabar" aria-hidden="true" />
            <h2 className="mt-5 font-serif text-display-sm text-on-callout">
              从一句灵感，写成一本书
            </h2>
            <p className="mx-auto mt-3 max-w-md text-body leading-7 text-on-callout-soft">
              直接开始写，落笔即成书；或先立项，从一句灵感搭好设定、大纲再动笔。
            </p>
            <div className="mt-7 flex flex-wrap items-center justify-center gap-2">
              <Link
                href="/write"
                className={buttonClass({ variant: "primary", size: "lg" })}
              >
                <PenLine className="h-4 w-4" aria-hidden="true" />
                直接开始写
              </Link>
              <Link
                href="/projects/new"
                className={buttonClass({ variant: "secondary", size: "lg" })}
              >
                <Plus className="h-4 w-4" aria-hidden="true" />
                先立项
              </Link>
            </div>
          </div>
        ) : (
          <ProjectLibrary projects={projects} />
        )}
      </PageContainer>
    </AppShell>
  );
}