"use client";

import type { ForeshadowView } from "@/lib/api/types";
import type { ForeshadowStatus } from "@/lib/foreshadow/board";
import { ForeshadowCard } from "./ForeshadowCard";

interface KanbanColumnProps {
  status: ForeshadowStatus;
  items: ForeshadowView[];
  busy: boolean;
  onTransition: (
    code: string,
    toStatus: ForeshadowStatus | null,
    progressNote: string,
  ) => void;
}

// 单个状态泳道（UX §6.8）。OVERDUE 列整列琥珀强调（表头 + 卡片）。
export function KanbanColumn({
  status,
  items,
  busy,
  onTransition,
}: KanbanColumnProps) {
  const overdue = status === "OVERDUE";
  return (
    <section
      className="flex min-w-0 flex-col rounded border border-line bg-bg"
      aria-label={`${status} 泳道`}
    >
      <header
        className={`flex items-center justify-between rounded-t border-b px-3 py-2 ${
          overdue
            ? "border-overdue bg-overdue/10 text-overdue"
            : "border-line bg-panel text-ink-soft"
        }`}
      >
        <span className="font-mono text-xs font-semibold">
          {overdue ? "⚠ " : ""}
          {status}
        </span>
        <span className="font-mono text-xs">{items.length}</span>
      </header>
      <ul className="flex-1 space-y-2 overflow-auto p-2">
        {items.length === 0 ? (
          <li className="px-1 py-3 text-xs text-ink-soft/60">—</li>
        ) : (
          items.map((item) => (
            <ForeshadowCard
              key={item.code}
              item={item}
              overdue={overdue}
              busy={busy}
              onTransition={onTransition}
            />
          ))
        )}
      </ul>
    </section>
  );
}