"use client";

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

import { Badge } from "@/components/ui/Badge";
import type { OutlineChapterView } from "@/lib/api/types";
import {
  isCloseWindow,
  windowBadgeLabel,
} from "@/lib/outline/outline";
import { buttonClass } from "@/lib/ui/variants";

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

// 单章大纲行（UX §6.7）：章号 + beats + 伏笔窗口徽标（lucide Flag 图标）+ 「写此章」入口。
// 接近回收窗口的徽标用琥珀 + 「可回收」提示（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={buttonClass({ variant: "secondary", size: "sm" })}
        >
          <PenLine className="h-3.5 w-3.5" aria-hidden="true" />
          写此章
        </Link>
        {windows.map((w) => {
          const close = isCloseWindow(chapter, w);
          return (
            <Badge
              key={w.code}
              variant={close ? "warning" : "accent"}
              title={close ? "进入回收窗口，建议本章安排回收" : undefined}
            >
              <Flag className="h-4 w-4" aria-hidden="true" />
              {windowBadgeLabel(w)}
              {close ? " · 可回收" : ""}
            </Badge>
          );
        })}
      </div>
      {chapter.beats && chapter.beats.length > 0 ? (
        <p className="mt-1 text-sm text-ink">
          <span className="text-ink-soft">节拍：</span>
          {chapter.beats.join(" / ")}
        </p>
      ) : (
        <p className="mt-1 text-sm text-ink-soft/60">（无节拍）</p>
      )}
    </li>
  );
}