import Link from "next/link";
import { BookOpen, ChevronRight, Clock3 } from "lucide-react";

import { Badge } from "@/components/ui/Badge";
import type { ProjectResponse } from "@/lib/api/types";
import {
  formatProjectUpdatedAt,
  pendingReviewCount,
} from "@/lib/projects/projects";
import { cardClass, focusRing } from "@/lib/ui/variants";

interface ProjectCardProps {
  project: ProjectResponse;
  compact?: boolean;
}

// 作品卡（UX §6.1）：书名衬线大字、题材、一句话故事。
// M1 无字数/章数/待办统计端点 → 暂不展示该徽标（避免编造 API）。
export function ProjectCard({ project, compact = false }: ProjectCardProps) {
  const pendingCount = pendingReviewCount(project);
  const updatedLabel = formatProjectUpdatedAt(project.updated_at);
  if (compact) {
    return (
      <Link
        href={`/projects/${project.id}/write`}
        className={cardClass(
          `group flex items-center gap-3 p-3 transition-colors hover:border-cinnabar ${focusRing}`,
        )}
      >
        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded bg-[var(--color-cinnabar-wash)] text-cinnabar">
          <BookOpen className="h-4 w-4" aria-hidden="true" />
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate font-serif text-base text-ink">
            〈{project.title || "未命名作品"}〉
          </span>
          <span className="mt-1 flex items-center gap-2 text-xs text-ink-soft">
            {project.genre ? <Badge>{project.genre}</Badge> : null}
            {pendingCount > 0 ? (
              <Badge variant="warning">{pendingCount} 待审</Badge>
            ) : null}
            <span className="truncate">{project.logline ?? "暂无一句话故事"}</span>
          </span>
          <span className="mt-1 block font-mono text-[11px] text-ink-soft">
            最近编辑 {updatedLabel}
          </span>
        </span>
        <ChevronRight
          className="h-4 w-4 shrink-0 text-ink-soft transition-colors group-hover:text-cinnabar"
          aria-hidden="true"
        />
      </Link>
    );
  }

  return (
    <Link
      href={`/projects/${project.id}/write`}
      className={cardClass(
        `group flex h-full min-h-[176px] flex-col p-6 transition-colors hover:border-cinnabar ${focusRing}`,
      )}
    >
      <div className="mb-4 flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h2 className="truncate font-serif text-2xl text-ink">
            〈{project.title || "未命名作品"}〉
          </h2>
          <div className="mt-2 flex flex-wrap gap-2">
            {project.genre ? <Badge>{project.genre}</Badge> : null}
            {pendingCount > 0 ? (
              <Badge variant="warning">{pendingCount} 待审</Badge>
            ) : null}
          </div>
        </div>
        <span className="rounded border border-line bg-bg p-2 text-ink-soft transition-colors group-hover:border-cinnabar group-hover:text-cinnabar">
          <BookOpen className="h-4 w-4" aria-hidden="true" />
        </span>
      </div>
      {project.logline ? (
        <p className="line-clamp-3 text-sm leading-6 text-ink">
          {project.logline}
        </p>
      ) : null}
      <span className="mt-3 flex items-center gap-1 font-mono text-[11px] text-ink-soft">
        <Clock3 className="h-3.5 w-3.5" aria-hidden="true" />
        最近编辑 {updatedLabel}
      </span>
      <span className="mt-auto flex items-center gap-1 pt-4 text-xs text-cinnabar opacity-0 motion-safe:transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
        进入写作台
        <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
      </span>
    </Link>
  );
}