"use client";

import Link from "next/link";

import type { OutlineChapterView } from "@/lib/api/types";
import {
  isCloseWindow,
  windowBadgeLabel,
} from "@/lib/outline/outline";

interface OutlineChapterRowProps {
  chapter: OutlineChapterView;
  projectId: string;
}

// 单章大纲行（UX §6.7）：章号 + beats + 伏笔窗口徽标（⚑）+ 「写此章」入口。
// 接近回收窗口的徽标用琥珀 + 「可回收」提示（a11y：图标 + 文案，不单靠色）。
export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps) {
  const windows = chapter.foreshadow_windows ?? [];
  return (
    <li className="border-l-2 border-line py-2 pl-3">
      <div className="flex flex-wrap items-center gap-2">
        <span className="font-mono text-xs text-ink-soft">
          第 {chapter.no} 章
        </span>
        <Link
          href={`/projects/${projectId}/write?chapter=${chapter.no}`}
          className="rounded border border-line px-1.5 py-0.5 text-xs text-ink-soft hover:border-cinnabar hover:text-cinnabar"
        >
          ✍ 写此章
        </Link>
        {windows.map((w) => {
          const close = isCloseWindow(chapter, w);
          return (
            <span
              key={w.code}
              title={close ? "进入回收窗口，建议本章安排回收" : undefined}
              className={`rounded px-1.5 py-0.5 text-xs ${
                close
                  ? "bg-overdue/15 text-overdue"
                  : "bg-[var(--color-cinnabar-wash)] text-cinnabar"
              }`}
            >
              {windowBadgeLabel(w)}
              {close ? " · 可回收" : ""}
            </span>
          );
        })}
      </div>
      {chapter.beats && chapter.beats.length > 0 ? (
        <p className="mt-1 text-sm text-ink">
          <span className="text-ink-soft">beats: </span>
          {chapter.beats.join(" / ")}
        </p>
      ) : (
        <p className="mt-1 text-sm text-ink-soft/60">（无节拍）</p>
      )}
    </li>
  );
}