"use client";

import type { ForeshadowView } from "@/lib/api/types";
import { LANE_LABELS, type ForeshadowStatus } from "@/lib/foreshadow/board";
import { Badge } from "@/components/ui/Badge";
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
      data-status={status}
      className="flex min-w-0 flex-col rounded border border-line bg-bg"
      aria-label={`${LANE_LABELS[status]} 泳道`}
    >
      <header
        className={`flex items-center justify-between rounded-t border-b px-3 py-2 ${
          overdue
            ? "border-overdue bg-overdue/10 text-ink"
            : "border-line bg-panel text-ink-soft"
        }`}
      >
        <span className="flex items-center gap-2">
          {overdue ? (
            <Badge variant="warning">{LANE_LABELS[status]}</Badge>
          ) : (
            <span className="text-sm font-medium text-ink">
              {LANE_LABELS[status]}
            </span>
          )}
        </span>
        <span className="font-mono text-xs">{items.length}</span>
      </header>
      <ul className="space-y-2 p-2 xl:flex-1 xl:overflow-auto">
        {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>
  );
}
