import type { SelectionFailure } from "../api/selection.types"

interface IncompleteEvaluationTableProps {
  failures: SelectionFailure[]
}

const failureStatusLabels: Record<string, string> = {
  data_error: "数据读取失败",
  insufficient_history: "历史数据不足",
  missing_target_bar: "缺少目标交易日行情",
}

export function IncompleteEvaluationTable({
  failures,
}: IncompleteEvaluationTableProps) {
  return (
    <div className="min-w-0 overflow-hidden rounded-md border border-border/70">
      <table className="w-full table-fixed border-collapse text-left text-xs">
        <caption className="sr-only">未完成评估明细</caption>
        <colgroup>
          <col className="w-[22%]" />
          <col className="w-[24%]" />
          <col className="w-[22%]" />
          <col className="w-[32%]" />
        </colgroup>
        <thead className="bg-muted/50 text-[11px] text-muted-foreground">
          <tr className="border-b border-border/70">
            <th className="px-2.5 py-2 font-medium" scope="col">
              股票名称
            </th>
            <th className="px-2.5 py-2 font-medium" scope="col">
              股票代码
            </th>
            <th className="px-2.5 py-2 font-medium" scope="col">
              评估状态
            </th>
            <th className="px-2.5 py-2 font-medium" scope="col">
              失败原因
            </th>
          </tr>
        </thead>
        <tbody>
          {failures.length > 0 ? (
            failures.map((failure, index) => (
              <tr
                key={`${failure.ts_code}-${failure.status}-${index}`}
                className="border-b border-border/60 last:border-b-0"
              >
                <td className="break-words px-2.5 py-2.5 align-top font-medium text-foreground">
                  {failure.name}
                </td>
                <td className="break-all px-2.5 py-2.5 align-top font-mono text-[11px] text-muted-foreground">
                  {failure.ts_code}
                </td>
                <td className="break-words px-2.5 py-2.5 align-top text-muted-foreground">
                  {formatFailureStatus(failure.status)}
                </td>
                <td className="break-words px-2.5 py-2.5 align-top leading-5 text-muted-foreground">
                  {formatFailureReason(failure.reason)}
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td
                className="px-3 py-10 text-center text-sm text-muted-foreground"
                colSpan={4}
              >
                暂无未完成评估
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}

function formatFailureStatus(status: string) {
  return failureStatusLabels[status] ?? status
}

function formatFailureReason(reason: string | null) {
  return reason?.trim() || "—"
}