import { AnswerUiView, type AnswerUiBlock } from "@/features/agent";
import { Card, CardContent, CardHeader } from "@/shared/ui/card";
import { FloatingWindow } from "@/shared/ui/floating-window";
import type { InvestigationMapTarget } from "../api/investigation-report";

type Props = {
  blocks: AnswerUiBlock[];
  records: Array<Record<string, unknown>>;
  reviewing: boolean;
  onLocateTargets?: (targets: InvestigationMapTarget[]) => Promise<unknown>;
};

export function PresentationBusinessResults({
  blocks,
  records,
  reviewing,
  onLocateTargets
}: Props) {
  if (!blocks.length && !records.length) return null;
  return (
    <section aria-label="展示结果" className="min-w-0 space-y-3">
      {blocks.map((block) => (
        <AnswerUiView
          key={block.block_id}
          block={block}
          disabled={reviewing}
          onLocate={
            onLocateTargets && !reviewing
              ? (target) =>
                  onLocateTargets(
                    target.feature_ids.map((feature_id) => ({
                      source_id: target.layer,
                      feature_id
                    }))
                  )
              : undefined
          }
        />
      ))}
      {!blocks.length && records.length ? (
        <Card className="border-border shadow-none">
          <CardHeader className="flex-row items-center justify-between gap-2 space-y-0 p-3 pb-2">
            <h3 className="text-xs font-semibold">调查数据 · {records.length} 条</h3>
            <FloatingWindow title="调查数据摘要" triggerLabel="放大查看表格 调查数据摘要">{() => <PresentationRecordTable records={records} />}</FloatingWindow>
          </CardHeader>
          <CardContent className="overflow-x-auto px-3 pb-3 pt-0">
            <PresentationRecordTable records={records} />
          </CardContent>
        </Card>
      ) : null}
    </section>
  );
}

function PresentationRecordTable({ records }: { records: Array<Record<string, unknown>> }) {
  return (
    <table className="w-full text-left text-[11px] leading-5">
      <caption className="sr-only">调查数据摘要</caption>
      <thead>
        <tr className="border-b">
          <th className="py-1 pr-3 font-medium">类型</th>
          <th className="py-1 pr-3 font-medium">对象</th>
          <th className="py-1 font-medium">来源</th>
        </tr>
      </thead>
      <tbody>
        {records.map((record, index) => (
          <tr key={index} className="border-b last:border-0">
            <td className="break-all py-1.5 pr-3">{String(record.record_type)}</td>
            <td className="break-all py-1.5 pr-3">
              {String(
                record.element_id ??
                  record.device_id ??
                  record.action_id ??
                  record.item ??
                  `记录 ${index + 1}`
              )}
            </td>
            <td className="break-all py-1.5">{String(record.origin)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}