import { useMemo, useState, type ReactNode } from "react";
import {
  AlertTriangle,
  CheckCircle2,
  Clock3,
  FileText,
  GitFork,
  Loader2,
  MessageSquare,
  RefreshCw,
  Route,
  ShieldCheck,
  UserCheck
} from "lucide-react";
import type { AgentExecutionPlan } from "@/features/agent";
import { Button } from "@/shared/ui/button";
import { cn } from "@/shared/ui/cn";
import { Disclosure } from "@/shared/ui/disclosure";
import { Input } from "@/shared/ui/input";
import { StatusBadge, StatusIcon, type StatusTone } from "@/shared/ui/status";
import type {
  OperationalTask,
  OperationalTaskAction,
  OperationalTaskDecision,
  OperationalTaskEvidence,
  OperationalTaskPlan,
  OperationalTaskDataSnapshot
} from "../api/operational-task-client";

type ExecutionNode = {
  id: string;
  title: string;
  status: "pending" | "running" | "waiting" | "completed" | "failed" | "skipped" | "cancelled";
  owner: "agent" | "human";
  detail: string;
  kind?: "activity" | "decision" | "parallel_split" | "parallel_join" | "gate" | null;
  selected_edge_id?: string | null;
  gate_ref?: string | null;
  revisits_node_id?: string | null;
};

type ExecutionEdge = {
  id?: string | null;
  from: string;
  to: string;
  label?: string | null;
  condition?: string | null;
};

export type ExecutionPlanView = {
  nodes: ExecutionNode[];
  edges: ExecutionEdge[];
};

type AgentExecutionPlanPanelProps = {
  task: OperationalTask;
  onContinue: () => void;
  onDecision: (actionId: string, expectedVersion: number, decision: OperationalTaskDecision, comment?: string) => Promise<unknown>;
  onExecute: (actionId: string, expectedVersion: number) => Promise<unknown>;
  onDraftUpdate?: (actionId: string, expectedVersion: number, payload: Record<string, unknown>) => Promise<unknown>;
  onConfirmDispatch?: (actionId: string, expectedVersion: number) => Promise<unknown>;
  onAccessDecision?: (requestId: string, expectedVersion: number, decision: "approved" | "rejected", scopes: string[]) => Promise<unknown>;
  onReconcile: (actionId: string, expectedVersion: number) => Promise<unknown>;
  onLoadEvidenceSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot>;
  onRefresh: () => void;
};

export function AgentExecutionPlanPanel({
  task,
  onContinue,
  onDecision,
  onExecute,
  onDraftUpdate,
  onConfirmDispatch,
  onAccessDecision,
  onReconcile,
  onLoadEvidenceSnapshot,
  onRefresh
}: AgentExecutionPlanPanelProps) {
  const plan = task.latest_plan?.plan;
  const report = task.latest_report?.report;
  const planGeneration = task.latest_plan?.execution_generation;
  const planState = planGeneration == null
    ? "historical"
    : planGeneration === task.execution_generation
      ? "current"
      : "previous";
  const reportGeneration = task.latest_report?.execution_generation;
  const reportState = reportGeneration == null
    ? "historical"
    : reportGeneration === task.execution_generation
      ? "current"
      : "previous";
  const completed = plan?.nodes.filter((node) => node.status === "completed").length ?? 0;
  const active = plan?.nodes.filter((node) => node.status === "running").length ?? 0;
  const waiting = plan?.nodes.filter((node) => node.status === "waiting" || node.owner === "human" && node.status === "pending").length ?? 0;
  const externalEvidence = task.evidence.filter((item) => item.kind === "external_feedback");
  const taskActive = task.status === "queued" || task.status === "running";
  const planSummary = !plan
    ? "任务已持久化，等待 Agent 发布首版处理计划。"
    : planState === "current"
      ? `已完成 ${completed} 项 · 执行中 ${active} 项 · 待人工或资料 ${waiting} 项`
      : planState === "previous"
        ? taskActive
          ? "上一轮流程，本轮规划中"
          : `上一轮流程，当前任务${taskStatusLabel(task.status)}`
        : "历史流程";
  const reportLabel = reportState === "current"
    ? "当前结论"
    : reportState === "previous"
      ? taskActive
        ? "上一轮报告，本轮分析中"
        : `上一轮报告，当前任务${taskStatusLabel(task.status)}`
      : "历史报告";
  const nodeActions = plan ? Object.fromEntries(plan.nodes.map((node) => [
    node.id,
      task.actions.filter((action) => action.node_id === node.id).map((action) => (
      <HumanActionCard key={action.action_id} task={task} action={action} onDecision={onDecision} onExecute={onExecute} onDraftUpdate={onDraftUpdate} onConfirmDispatch={onConfirmDispatch} onReconcile={onReconcile} onRefresh={onRefresh} />
    ))
  ])) : {};
  const unlinkedActions = task.actions.filter((action) => !action.node_id || !plan?.nodes.some((node) => node.id === action.node_id));

  return (
    <section aria-label="工况任务处理" className="min-w-0 space-y-2.5">
      <section className="surface-reading overflow-hidden rounded-xl border border-slate-200/70">
        <div className="space-y-2 border-b border-slate-200/70 p-3">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800">
              <Route size={13} aria-hidden="true" />
              {task.task_type === "external_work_order" ? "外部工单进度" : "调查处理流程"}
            </h3>
            <StatusBadge tone={task.status === "failed" ? "danger" : task.status === "waiting_human" ? "warning" : task.status === "completed" ? "success" : "info"}>
              {taskStatusLabel(task.status)}
            </StatusBadge>
          </div>
          <p className="text-xs leading-5 text-slate-600" role="status">
            {planSummary}
          </p>
          <p className="text-[11px] leading-5 text-slate-500">
            {taskTypeLabel(task.task_type)} · 更新于 {formatDateTime(task.updated_at)}
          </p>
        </div>
        {task.task_type === "external_work_order" && externalEvidence.length > 0 ? (
          <ExternalProgress evidence={externalEvidence} />
        ) : plan ? (
          <ExecutionPlanSteps plan={plan} nodeActions={nodeActions} />
        ) : (
          <p className="p-3 text-xs leading-5 text-slate-500">尚无执行节点，页面不会按时间推算或虚构完成进度。</p>
        )}
      </section>

      {task.access_requests.length > 0 ? <section aria-label="数据访问审核" className="space-y-2">
        {task.access_requests.map((request) => <AccessRequestCard key={request.access_request_id} request={request}
          nodeTitle={plan?.nodes.find((node) => node.id === request.node_id)?.title}
          canDecide={task.permissions.can_decide_access} onDecision={onAccessDecision} onRefresh={onRefresh} />)}
      </section> : null}

      <section aria-label="任务报告" className="surface-reading space-y-3 rounded-xl border border-slate-200/70 p-3">
        <div>
          <h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800"><FileText size={13} aria-hidden="true" />任务报告</h3>
          <p className="mt-1 text-[11px] leading-5 text-slate-500">结论与证据独立呈现，不展示模型推理或节点执行日志。</p>
        </div>
        {report ? (
          <>
            <div className={cn(
              "rounded-lg px-3 py-2.5",
              reportState === "current" ? "bg-blue-50/70" : "bg-amber-50/80"
            )}>
              <p className={cn(
                "text-[11px] font-semibold",
                reportState === "current" ? "text-blue-700" : "text-amber-800"
              )}>
                {reportLabel}
              </p>
              <p className="mt-1 text-xs leading-6 text-slate-800">{report.current_conclusion}</p>
            </div>
            {report.recommendations.length > 0 ? (
              <ReportList title="处置建议" items={report.recommendations} tone="blue" />
            ) : null}
            {report.pending_items.length > 0 ? (
              <ReportList title="待确认事项" items={report.pending_items} tone="amber" />
            ) : null}
            <p className="border-t border-slate-200/70 pt-2 text-[11px] leading-5 text-slate-500">结论边界：{report.conclusion_boundary}</p>
          </>
        ) : (
          <p className="text-xs leading-6 text-slate-600">尚未形成任务报告。</p>
        )}
      </section>

      <EvidenceSection evidence={task.evidence} referencedIds={report?.evidence_refs ?? []} onLoadSnapshot={onLoadEvidenceSnapshot} />

      {unlinkedActions.length > 0 ? (
        <section aria-label="待人工确认动作" className="space-y-2.5">
          {unlinkedActions.map((action) => (
            <HumanActionCard
              key={action.action_id}
              task={task}
              action={action}
              onDecision={onDecision}
              onExecute={onExecute}
              onDraftUpdate={onDraftUpdate}
              onConfirmDispatch={onConfirmDispatch}
              onReconcile={onReconcile}
              onRefresh={onRefresh}
            />
          ))}
        </section>
      ) : null}

      <div className="flex justify-end">
        <Button variant="outline" size="sm" onClick={onContinue}>
          <MessageSquare size={14} aria-hidden="true" />Agent 协作
        </Button>
      </div>
    </section>
  );
}

function ReportList({ title, items, tone }: { title: string; items: string[]; tone: "blue" | "amber" }) {
  return (
    <div>
      <p className="text-[11px] font-semibold text-slate-600">{title}</p>
      <ul className="mt-1.5 grid gap-1.5">
        {items.map((item) => (
          <li key={item} className="grid grid-cols-[6px_1fr] gap-2 text-xs leading-5 text-slate-700">
            <span className={cn("mt-2 h-1.5 w-1.5 rounded-full", tone === "blue" ? "bg-blue-500" : "bg-amber-400")} aria-hidden="true" />
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function ExecutionPlanSteps({ plan, nodeActions = {} }: { plan: ExecutionPlanView | AgentExecutionPlan | OperationalTaskPlan; nodeActions?: Record<string, ReactNode> }) {
  return <div aria-label="调查执行步骤" className="px-3 py-3">{
    plan.nodes.some((node) => node.kind)
      ? <SemanticExecutionFlow plan={plan} nodeActions={nodeActions} />
      : <ExactDependencyList plan={plan} nodeActions={nodeActions} />
  }</div>;
}

function SemanticExecutionFlow({ plan, nodeActions }: { plan: ExecutionPlanView; nodeActions: Record<string, ReactNode> }) {
  const nodeById = new Map(plan.nodes.map((node) => [node.id, node]));
  const activeEdges = plan.edges.filter((edge) => {
    const source = nodeById.get(edge.from);
    return source?.kind !== "decision" || source.selected_edge_id === edge.id;
  });
  const roots = plan.nodes.filter((node) => !plan.edges.some((edge) => edge.to === node.id));
  const visible = new Set<string>();
  const queue = roots.map((node) => node.id);
  while (queue.length > 0) {
    const current = queue.shift()!;
    if (visible.has(current)) continue;
    visible.add(current);
    for (const edge of activeEdges.filter((item) => item.from === current)) queue.push(edge.to);
  }
  const ordered = topologicalNodes(plan);
  const alternatives = ordered.filter((node) => !visible.has(node.id));
  return <div className="space-y-3">
    <div className="space-y-2 border-l border-slate-200 pl-3">
      {roots.filter((node) => visible.has(node.id)).map((node) => <SemanticPath key={node.id} nodeId={node.id} stopId={null} plan={plan} activeEdges={activeEdges} nodeById={nodeById} nodeActions={nodeActions} seen={new Set()} />)}
    </div>
    {alternatives.length > 0 ? <Disclosure label={`其他规划路线 ${alternatives.length} 项`} className="surface-control rounded-lg border border-slate-200/70 px-2.5">
      <ol className="grid gap-2 border-t border-slate-200/70 py-2">{alternatives.map((node) => <li key={node.id}><ExecutionNodeCard node={node} action={nodeActions[node.id]} compact /></li>)}</ol>
    </Disclosure> : null}
  </div>;
}

function SemanticPath({ nodeId, stopId, plan, activeEdges, nodeById, nodeActions, seen }: {
  nodeId: string; stopId: string | null; plan: ExecutionPlanView; activeEdges: ExecutionEdge[];
  nodeById: Map<string, ExecutionNode>; nodeActions: Record<string, ReactNode>; seen: Set<string>;
}) {
  if (nodeId === stopId || seen.has(nodeId)) return null;
  const node = nodeById.get(nodeId);
  if (!node) return null;
  const nextSeen = new Set(seen).add(nodeId);
  const outgoing = activeEdges.filter((edge) => edge.from === nodeId);
  const allRoutes = plan.edges.filter((edge) => edge.from === nodeId);
  const join = node.kind === "parallel_split" ? findSemanticJoin(outgoing, activeEdges, nodeById, stopId) : null;
  const branchEnd = join?.id ?? stopId;
  return <div className="space-y-2">
    <ExecutionNodeCard node={node} action={nodeActions[node.id]} />
    {node.kind === "decision" ? <div className="rounded-lg bg-blue-50/70 px-3 py-2 text-xs leading-5 text-slate-700">
      <span className="font-semibold">路线选择：</span>{allRoutes.find((edge) => edge.id === node.selected_edge_id)?.condition ?? allRoutes.find((edge) => edge.id === node.selected_edge_id)?.label ?? "等待判断"}
      <div className="mt-1 text-slate-500">{allRoutes.map((edge) => `${edge.condition ?? edge.label ?? "未命名路线"}${edge.id === node.selected_edge_id ? "（已选择）" : ""}`).join(" · ")}</div>
    </div> : null}
    {node.kind === "parallel_split" ? <section aria-label={`并行处理 ${outgoing.length} 路`} className="min-w-0 rounded-xl border border-blue-100 bg-blue-50/40 p-2">
      <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold text-blue-800"><GitFork size={13} aria-hidden="true" />并行处理 · {outgoing.length} 路</p>
      <div className="grid gap-2 sm:grid-cols-2">{outgoing.map((edge, index) => <div key={edge.id ?? edge.to} className="min-w-0 rounded-lg border border-slate-200/70 bg-white p-2">
        <p className="mb-1.5 text-[11px] font-semibold text-slate-600">分支 {index + 1} · {edge.condition ?? edge.label ?? nodeById.get(edge.to)?.title}</p>
        <SemanticPath nodeId={edge.to} stopId={branchEnd} plan={plan} activeEdges={activeEdges} nodeById={nodeById} nodeActions={nodeActions} seen={nextSeen} />
      </div>)}</div>
    </section> : outgoing[0] ? <SemanticPath nodeId={outgoing[0].to} stopId={stopId} plan={plan} activeEdges={activeEdges} nodeById={nodeById} nodeActions={nodeActions} seen={nextSeen} /> : null}
    {join ? <SemanticPath nodeId={join.id} stopId={stopId} plan={plan} activeEdges={activeEdges} nodeById={nodeById} nodeActions={nodeActions} seen={nextSeen} /> : null}
  </div>;
}

function findSemanticJoin(outgoing: ExecutionEdge[], activeEdges: ExecutionEdge[], nodeById: Map<string, ExecutionNode>, stopId: string | null) {
  if (outgoing.length < 2) return null;
  const reachable = outgoing.map((edge) => reachableFrom(edge.to, new Map([...nodeById.keys()].map((id) => [id, activeEdges.filter((item) => item.from === id)]))));
  for (const node of nodeById.values()) {
    if (node.id === stopId) continue;
    if (node.kind === "parallel_join" && reachable.every((items) => items.has(node.id))) return node;
  }
  return null;
}

function ExactDependencyList({ plan, nodeActions }: { plan: ExecutionPlanView; nodeActions: Record<string, ReactNode> }) {
  const titleById = new Map(plan.nodes.map((node) => [node.id, node.title]));
  return <div><p className="mb-2 text-[11px] leading-5 text-slate-500">历史流程按原始依赖展示；未标注路线或并行类型。</p><ol className="grid gap-2">{topologicalNodes(plan).map((node) => {
    const prerequisites = plan.edges.filter((edge) => edge.to === node.id);
    return <li key={node.id}><ExecutionNodeCard node={node} action={nodeActions[node.id]} compact />{prerequisites.length > 0 ? <p className="px-2 pt-1 text-[11px] leading-5 text-slate-500">前置：{prerequisites.map((edge) => `${titleById.get(edge.from) ?? edge.from}${edge.condition || edge.label ? `（${edge.condition ?? edge.label}）` : ""}`).join("、")}</p> : null}</li>;
  })}</ol></div>;
}

function ExecutionNodeCard({ node, action, compact = false }: { node: ExecutionNode; action?: ReactNode; compact?: boolean }) {
  const { tone, Icon, label } = executionNodePresentation(node);
  return (
    <article data-execution-node={node.id} className={cn("surface-reading min-w-0 rounded-xl border border-slate-200/70", compact ? "px-2.5 py-2" : "px-3 py-2.5")}>
      <div className="flex min-w-0 items-start gap-2">
        <StatusIcon tone={tone} activity={node.status === "running" ? "loading" : "static"} shape="circle" size="md" className="mt-0.5 shrink-0"><Icon size={14} /></StatusIcon>
        <div className="min-w-0 flex-1">
          <div className="flex min-w-0 flex-wrap items-center justify-between gap-2"><span className="text-xs font-semibold leading-5 text-slate-900">{node.title}</span><StatusBadge tone={tone}>{label}</StatusBadge></div>
          {node.kind && node.kind !== "activity" ? <p className="mt-0.5 text-[11px] font-medium text-blue-700">{{ decision: "条件判断", parallel_split: "并行分叉", parallel_join: "并行汇合", gate: "等待审核" }[node.kind]}</p> : null}
          <p className="mt-1 break-words text-xs leading-5 text-slate-700">{node.detail || (node.owner === "human" ? "等待人工补充执行事实。" : "等待 Agent 更新执行事实。")}</p>
          {action ? <div className="mt-2">{action}</div> : null}
        </div>
      </div>
    </article>
  );
}

function ExternalProgress({ evidence }: { evidence: OperationalTaskEvidence[] }) {
  const ordered = [...evidence].sort((left, right) => Date.parse(left.observed_at) - Date.parse(right.observed_at));
  return (
    <ol className="grid gap-2 p-3">
      {ordered.map((item, index) => (
        <li key={item.evidence_id} className="grid grid-cols-[28px_1fr] gap-2">
          <span className="relative flex justify-center">
            {index < ordered.length - 1 ? <span className="absolute bottom-[-0.65rem] top-7 w-px bg-slate-200" aria-hidden="true" /> : null}
            <StatusIcon tone="info" shape="circle" size="md" className="relative z-10 ring-4 ring-white"><Clock3 size={14} /></StatusIcon>
          </span>
          <article className="surface-reading rounded-xl border border-slate-200/70 px-3 py-2.5">
            <div className="flex flex-wrap items-center justify-between gap-2"><span className="text-xs font-semibold text-slate-900">{item.source_label}</span><span className="font-mono text-[11px] text-slate-500">{formatDateTime(item.observed_at)}</span></div>
            <p className="mt-1 text-xs leading-5 text-slate-700">{item.summary}</p>
          </article>
        </li>
      ))}
    </ol>
  );
}

function EvidenceSection({ evidence, referencedIds, onLoadSnapshot }: { evidence: OperationalTaskEvidence[]; referencedIds: string[]; onLoadSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot> }) {
  const ordered = useMemo(() => {
    const referenced = new Set(referencedIds);
    return [...evidence].sort((left, right) => Number(referenced.has(right.evidence_id)) - Number(referenced.has(left.evidence_id)));
  }, [evidence, referencedIds]);
  return (
    <section aria-label="关键证据" className="surface-reading rounded-xl border border-slate-200/70 p-3">
      <div className="flex items-center justify-between gap-2"><h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800"><ShieldCheck size={13} />关键证据</h3><span className="text-[11px] text-slate-500">{ordered.length} 条</span></div>
      {ordered.length > 0 ? <div className="mt-2 grid gap-1.5">{ordered.map((item) => <EvidenceDisclosure key={item.evidence_id} item={item} onLoadSnapshot={onLoadSnapshot} />)}</div> : <p className="mt-2 text-xs leading-5 text-slate-500">尚无可核验的支撑证据。</p>}
    </section>
  );
}

function EvidenceDisclosure({ item, onLoadSnapshot }: { item: OperationalTaskEvidence; onLoadSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot> }) {
  const [snapshot, setSnapshot] = useState<OperationalTaskDataSnapshot | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const load = async () => {
    setLoading(true); setError(null);
    try { setSnapshot(await onLoadSnapshot(item.evidence_id)); }
    catch (nextError) { setError(nextError instanceof Error ? nextError.message : "数据快照读取失败。"); }
    finally { setLoading(false); }
  };
  return <Disclosure label={<span className="line-clamp-2 text-left text-xs leading-5 text-slate-700">{item.summary}</span>} className="surface-control rounded-lg border border-slate-200/70 px-2.5">
    <div className="border-t border-slate-200/70 py-2">
      <dl className="grid gap-1 text-[11px] leading-5"><EvidenceMeta label="来源" value={item.source_label} /><EvidenceMeta label="时间" value={formatDateTime(item.observed_at)} /><EvidenceMeta label="类型" value={evidenceKindLabel(item.kind)} />{item.source_ref ? <EvidenceMeta label="引用" value={item.source_ref} mono /> : null}</dl>
      {item.has_snapshot && !snapshot ? <Button className="mt-2" variant="outline" size="sm" disabled={loading} onClick={() => void load()}>{loading ? <Loader2 className="animate-spin" /> : null}查看数据快照</Button> : null}
      {error ? <p role="alert" className="mt-2 text-xs text-red-700">{error}</p> : null}
      {snapshot ? <SnapshotSummary snapshot={snapshot} /> : null}
    </div>
  </Disclosure>;
}

function SnapshotSummary({ snapshot }: { snapshot: OperationalTaskDataSnapshot }) {
  const rows = snapshotRows(snapshot.data).slice(0, 12);
  return <section aria-label="数据快照" className="mt-2 rounded-lg bg-white px-2.5 py-2 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.3)]"><p className="text-[11px] font-semibold text-slate-700">{snapshot.source_ref} · 查询于 {formatDateTime(snapshot.queried_at)}</p><dl className="mt-1 grid gap-1 text-[11px] leading-5">{rows.map(([key, value]) => <EvidenceMeta key={key} label={key} value={value} />)}</dl>{snapshot.truncated ? <p className="mt-1 text-[11px] text-amber-700">数据已按有界查询范围截断。</p> : null}</section>;
}

function snapshotRows(value: unknown, prefix = ""): [string, string][] {
  if (Array.isArray(value)) return value.slice(0, 6).flatMap((item, index) => snapshotRows(item, `${prefix}${index + 1}`));
  if (value && typeof value === "object") return Object.entries(value as Record<string, unknown>).flatMap(([key, item]) => snapshotRows(item, prefix ? `${prefix}.${key}` : key));
  return [[prefix || "值", value === null || value === undefined ? "空" : String(value)]];
}

function EvidenceMeta({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
  return <div className="grid grid-cols-[48px_1fr] gap-2"><dt className="font-semibold text-slate-500">{label}</dt><dd className={cn("break-words text-slate-700", mono && "font-mono")}>{value}</dd></div>;
}

export function AccessRequestCard({ request, nodeTitle, canDecide, onDecision, onRefresh }: {
  request: OperationalTask["access_requests"][number];
  nodeTitle?: string;
  canDecide: boolean;
  onDecision?: AgentExecutionPlanPanelProps["onAccessDecision"];
  onRefresh: () => void;
}) {
  const [selected, setSelected] = useState(request.scopes);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const decide = async (decision: "approved" | "rejected") => {
    if (!onDecision) return;
    setBusy(true); setError(null);
    try {
      await onDecision(request.access_request_id, request.version, decision, decision === "approved" ? selected : []);
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : "审核提交失败");
      if (/409|版本|conflict/i.test(String(nextError))) onRefresh();
    } finally { setBusy(false); }
  };
  return <article className="surface-reading rounded-xl border border-amber-200/80 p-3">
    <div className="flex items-center justify-between gap-2"><h3 className="text-xs font-semibold text-slate-900">数据访问申请</h3><StatusBadge tone={request.status === "approved" ? "success" : request.status === "rejected" ? "danger" : "warning"}>{request.status === "approved" ? "已批准" : request.status === "rejected" ? "已拒绝" : "待审核"}</StatusBadge></div>
    <p className="mt-1 text-xs leading-5 text-slate-700">{request.reason}</p>
    <p className="mt-1 text-[11px] text-slate-500">关联步骤 {nodeTitle ?? request.node_id} · 申请于 {formatDateTime(request.requested_at)}</p>
    <div className="mt-2 grid gap-1">{request.scopes.map((scope) => <label key={scope} className="flex min-h-10 items-center gap-2 text-xs text-slate-700"><input type="checkbox" checked={selected.includes(scope)} disabled={request.status !== "pending" || !canDecide || busy} onChange={(event) => setSelected((current) => event.target.checked ? [...current, scope] : current.filter((item) => item !== scope))} />{dataScopeLabel(scope)}</label>)}</div>
    {request.status !== "pending" ? <p className="mt-1 text-xs text-slate-600">{request.status === "approved" ? `已授权：${request.approved_scopes.map(dataScopeLabel).join("、")}` : "未授予数据访问权限"}</p> : null}
    {request.status === "pending" && canDecide && onDecision ? <div className="mt-2 flex justify-end gap-2"><Button variant="outline" size="sm" disabled={busy} onClick={() => void decide("rejected")}>拒绝</Button><Button size="sm" disabled={busy || selected.length === 0} onClick={() => void decide("approved")}>批准所选范围</Button></div> : null}
    {request.status === "pending" && !canDecide ? <p className="mt-2 text-xs text-slate-500">等待具有该数据源读取权限的项目成员审核。</p> : null}
    {error ? <p role="alert" className="mt-2 text-xs text-red-700">{error}</p> : null}
  </article>;
}

export function HumanActionCard({ task, action, onDecision, onExecute, onDraftUpdate, onConfirmDispatch, onReconcile, onRefresh }: {
  task: OperationalTask;
  action: OperationalTaskAction;
  onDecision: AgentExecutionPlanPanelProps["onDecision"];
  onExecute: AgentExecutionPlanPanelProps["onExecute"];
  onDraftUpdate?: AgentExecutionPlanPanelProps["onDraftUpdate"];
  onConfirmDispatch?: AgentExecutionPlanPanelProps["onConfirmDispatch"];
  onReconcile: AgentExecutionPlanPanelProps["onReconcile"];
  onRefresh: () => void;
}) {
  const [submitting, setSubmitting] = useState<"approve" | "reject" | "execute" | "reconcile" | "save" | "confirm" | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [stale, setStale] = useState(false);
  const [rejectComment, setRejectComment] = useState("");
  const [editing, setEditing] = useState(false);
  const [savedVersion, setSavedVersion] = useState<number | null>(null);
  const [draft, setDraft] = useState<Record<string, unknown>>(action.payload);
  const command = action.kind === "issue_command";
  const canDecide = command ? task.permissions.can_decide_commands : task.permissions.can_decide_work_orders;
  const canExecute = command ? task.permissions.can_execute_commands : task.permissions.can_execute_work_orders;
  const run = async (kind: "approve" | "reject" | "execute" | "reconcile" | "save" | "confirm") => {
    setSubmitting(kind); setError(null);
    try {
      if (kind === "save") {
        if (!onDraftUpdate) throw new Error("工单草稿编辑不可用");
        await onDraftUpdate(action.action_id, action.version, draft);
        setSavedVersion(action.version);
        setEditing(false);
      } else if (kind === "confirm") {
        if (!onConfirmDispatch) throw new Error("工单确认下发不可用");
        await onConfirmDispatch(action.action_id, action.version);
      } else if (kind === "execute") await onExecute(action.action_id, action.version);
      else if (kind === "reconcile") await onReconcile(action.action_id, action.version);
      else {
        if (kind === "reject" && !rejectComment.trim()) {
          setError("请填写退回理由后再拒绝动作。");
          return;
        }
        await onDecision(action.action_id, action.version, kind === "approve" ? "approved" : "rejected", kind === "reject" ? rejectComment.trim() : undefined);
      }
    } catch (nextError) {
      const message = nextError instanceof Error ? nextError.message : "人工动作提交失败。";
      setError(message);
      setStale(/version|版本|409|conflict/i.test(message));
    } finally { setSubmitting(null); }
  };
  return (
    <article className="surface-reading rounded-xl border border-amber-200/80 p-3" data-action-id={action.action_id}>
      <div className="flex items-start gap-2.5">
        <StatusIcon tone="warning" shape="circle" size="md" className="mt-0.5"><UserCheck size={14} /></StatusIcon>
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center justify-between gap-2"><h3 className="text-xs font-semibold text-slate-900">{command ? "命令下发确认" : "工单创建确认"}</h3><div className="flex flex-wrap gap-1.5"><StatusBadge tone={approvalTone(action.approval_status)}>{approvalLabel(action.approval_status)}</StatusBadge><StatusBadge tone={executionTone(action.execution_status)}>{executionLabel(action.execution_status)}</StatusBadge></div></div>
          <p className="mt-2 text-xs leading-5 text-slate-700"><span className="font-semibold text-slate-500">原因：</span>{action.reason}</p>
          <ActionPayloadSummary payload={action.payload} />
          {editing && !command ? <div className="mt-2 grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2.5">
            <Input aria-label="工单标题" value={String(draft.title ?? "")} onChange={(event) => setDraft({ ...draft, title: event.target.value })} />
            <Input aria-label="工单说明" value={String(draft.description ?? "")} onChange={(event) => setDraft({ ...draft, description: event.target.value })} />
            <div className="grid grid-cols-2 gap-2"><select aria-label="工单类型" className="min-h-10 rounded-lg border border-slate-200 bg-white px-2 text-xs" value={String(draft.work_order_type ?? "general")} onChange={(event) => setDraft({ ...draft, work_order_type: event.target.value })}><option value="general">一般工单</option><option value="water_quality_complaint">水质投诉</option><option value="burst_report">爆管上报</option></select><select aria-label="工单优先级" className="min-h-10 rounded-lg border border-slate-200 bg-white px-2 text-xs" value={String(draft.priority ?? "normal")} onChange={(event) => setDraft({ ...draft, priority: event.target.value })}><option value="normal">普通</option><option value="urgent">紧急</option></select></div>
            <Input aria-label="工单位置" value={String(draft.location ?? "")} onChange={(event) => setDraft({ ...draft, location: event.target.value || null })} />
            <Input aria-label="处理班组" value={String(draft.assignee ?? "")} onChange={(event) => setDraft({ ...draft, assignee: event.target.value || null })} />
            <Input aria-label="预约时间" type="datetime-local" value={toLocalDateTime(draft.scheduled_at)} onChange={(event) => setDraft({ ...draft, scheduled_at: event.target.value ? new Date(event.target.value).toISOString() : null })} />
            <div className="flex justify-end gap-2"><Button variant="outline" size="sm" onClick={() => { setDraft(action.payload); setEditing(false); }}>取消编辑</Button><Button size="sm" disabled={submitting !== null || !String(draft.title ?? "").trim() || !String(draft.description ?? "").trim()} onClick={() => void run("save")}>保存草稿</Button></div>
          </div> : null}
          {action.evidence_refs.length > 0 ? (
            <div className="mt-2 rounded-lg bg-blue-50/70 px-2.5 py-2 text-xs leading-5 text-slate-700">
              <p className="font-semibold text-blue-700">确认依据</p>
              <ul className="mt-1 grid gap-1">
                {action.evidence_refs.map((evidenceId) => {
                  const evidence = task.evidence.find((item) => item.evidence_id === evidenceId);
                  return <li key={evidenceId}>{evidence ? `${evidence.summary} · ${evidence.source_label}` : `证据 ${evidenceId}`}</li>;
                })}
              </ul>
            </div>
          ) : null}
          {action.receipt ? <ActionReceipt receipt={action.receipt} /> : null}
          {action.execution_detail && !action.receipt ? <p className="mt-2 rounded-lg bg-slate-50 px-2.5 py-2 text-xs leading-5 text-slate-700">{action.execution_detail}</p> : null}
          <Disclosure label="查看原始参数" className="surface-control mt-2 rounded-lg border border-slate-200/70 px-2.5"><pre className="max-h-52 overflow-auto whitespace-pre-wrap break-all border-t border-slate-200/70 py-2 font-mono text-[11px] leading-5 text-slate-700">{JSON.stringify(action.payload, null, 2)}</pre></Disclosure>
          <p className="mt-2 text-[11px] leading-5 text-slate-500">确认版本 v{action.version}。内容或版本变化后必须重新确认。</p>
          {error ? <p role="alert" className="mt-2 text-xs leading-5 text-red-700">{error} 当前状态未按成功处理。</p> : null}
          {stale ? <Button variant="outline" size="sm" className="mt-2" onClick={() => { setStale(false); onRefresh(); }}><RefreshCw size={14} />刷新后重新确认</Button> : null}
          {!canDecide && action.approval_status === "pending" ? <p className="mt-2 rounded-lg bg-slate-50 px-2.5 py-2 text-xs leading-5 text-slate-600">当前账号仅可查看，需要具备此动作审批权限的人员确认。</p> : null}
          {action.approval_status === "pending" && canDecide ? <Input className="mt-2" aria-label="退回理由" placeholder="退回理由，拒绝动作时必填" value={rejectComment} onChange={(event) => setRejectComment(event.target.value)} /> : null}
          <div className="mt-3 flex flex-wrap justify-end gap-2">
            {action.approval_status === "pending" && canDecide ? <><Button variant="outline" size="sm" disabled={submitting !== null} onClick={() => void run("reject")}>拒绝动作</Button>{!command && onDraftUpdate ? <Button variant="outline" size="sm" disabled={submitting !== null || editing} onClick={() => { setDraft(action.payload); setEditing(true); }}>编辑草稿</Button> : null}<Button size="sm" disabled={submitting !== null || editing || savedVersion === action.version || (!command && !!onConfirmDispatch && !canExecute)} onClick={() => void run(!command && onConfirmDispatch ? "confirm" : "approve")}>{submitting === "approve" || submitting === "confirm" ? <Loader2 className="animate-spin" /> : null}{command ? "批准下发命令" : onConfirmDispatch ? "确认并下发工单" : "批准创建工单"}</Button></> : null}
            {action.approval_status === "approved" && action.execution_status === "not_submitted" ? <Button size="sm" disabled={!canExecute || submitting !== null} title={!canExecute ? "当前账号无此动作执行权限" : undefined} onClick={() => void run("execute")}>{submitting === "execute" ? <Loader2 className="animate-spin" /> : null}{command ? "下发命令" : "创建工单"}</Button> : null}
            {action.approval_status === "approved" && ["submitted", "unknown"].includes(action.execution_status) ? <Button variant="outline" size="sm" disabled={!canExecute || submitting !== null} onClick={() => void run("reconcile")}>{submitting === "reconcile" ? <Loader2 className="animate-spin" /> : <RefreshCw size={14} />}核对执行回执</Button> : null}
          </div>
        </div>
      </div>
    </article>
  );
}

function ActionReceipt({ receipt }: { receipt: NonNullable<OperationalTaskAction["receipt"]> }) {
  return <section aria-label="执行回执" className="mt-2 rounded-lg bg-emerald-50/70 px-2.5 py-2">
    <p className="text-xs font-semibold text-emerald-800">执行回执</p>
    <dl className="mt-1 grid gap-1 text-[11px] leading-5">
      <EvidenceMeta label="回执编号" value={receipt.receipt_id} mono />
      <EvidenceMeta label="外部状态" value={externalStatusLabel(receipt.external_status)} />
      <EvidenceMeta label="提交时间" value={formatDateTime(receipt.submitted_at)} />
      {receipt.completed_at ? <EvidenceMeta label="完成时间" value={formatDateTime(receipt.completed_at)} /> : null}
      <EvidenceMeta label="说明" value={receipt.detail} />
    </dl>
  </section>;
}

function ActionPayloadSummary({ payload }: { payload: Record<string, unknown> }) {
  const rows = Object.entries(payload).flatMap(([key, value]) => {
    if (key !== "parameters" && value && typeof value === "object" && !Array.isArray(value)) {
      return Object.entries(value as Record<string, unknown>).map(([childKey, childValue]) => ({ key: `${key}.${childKey}`, value: childValue }));
    }
    return [{ key, value }];
  });
  return <dl className="surface-control mt-2 grid gap-1 rounded-lg border border-slate-200/70 px-2.5 py-2 text-xs leading-5">{rows.map((row) => <div key={row.key} className="grid grid-cols-[76px_1fr] gap-2"><dt className="font-semibold text-slate-500">{payloadLabel(row.key)}</dt><dd className="break-words text-slate-800">{payloadValue(row.key, row.value)}</dd></div>)}</dl>;
}

function payloadLabel(key: string) {
  const labels: Record<string, string> = {
    title: "工单标题", description: "工作内容", work_order_type: "工单类型", priority: "优先级",
    scheduled_at: "预约时间", location: "位置", assignee: "处理班组", command_type: "命令类型",
    "target.kind": "对象类型", "target.id": "目标对象", parameters: "执行参数", impact_summary: "影响说明",
    preconditions: "执行条件", expires_at: "失效时间"
  };
  return labels[key] ?? key;
}

function payloadValue(key: string, value: unknown) {
  if (value === null || value === undefined || value === "") return "未指定";
  if (key === "command_type") return knownLabel(value, { set_valve: "调节阀门" });
  if (key === "target.kind") return knownLabel(value, { valve: "阀门", pump: "泵站", pipe: "管段" });
  if (key === "work_order_type") return knownLabel(value, { general: "一般工单", water_quality_complaint: "水质投诉", burst_report: "爆管上报" });
  if (key === "priority") return knownLabel(value, { normal: "普通", urgent: "紧急", high: "高", low: "低" });
  if (key === "scheduled_at" || key === "expires_at") return typeof value === "string" ? formatDateTime(value) : String(value);
  if (Array.isArray(value)) return value.map(String).join("、") || "无";
  if (key === "parameters" && typeof value === "object") {
    return Object.entries(value as Record<string, unknown>).map(([parameter, item]) =>
      parameter === "opening" ? `开度 ${String(item)}%` : `${parameter}=${String(item)}`
    ).join("；");
  }
  if (typeof value === "object") return Object.entries(value as Record<string, unknown>).map(([itemKey, item]) => `${itemKey}=${String(item)}`).join("；");
  return String(value);
}

function knownLabel(value: unknown, labels: Record<string, string>) {
  const raw = String(value);
  return labels[raw] ?? raw;
}

function externalStatusLabel(value: string) {
  return ({ completed: "已完成", submitted: "已提交", accepted: "已接收", failed: "失败", pending: "处理中" } as Record<string, string>)[value] ?? value;
}

function reachableFrom(start: string, outgoing: Map<string, ExecutionEdge[]>) {
  const seen = new Set<string>();
  const stack = [start];
  while (stack.length > 0) { const current = stack.pop()!; if (seen.has(current)) continue; seen.add(current); for (const edge of outgoing.get(current) ?? []) stack.push(edge.to); }
  return seen;
}

function topologicalNodes(plan: ExecutionPlanView) {
  const remaining = new Map(plan.nodes.map((node) => [node.id, node]));
  const result: ExecutionNode[] = [];
  while (remaining.size > 0) {
    const ready = plan.nodes.filter((node) => remaining.has(node.id) && plan.edges.filter((edge) => edge.to === node.id).every((edge) => !remaining.has(edge.from)));
    if (ready.length === 0) return result;
    ready.forEach((node) => { result.push(node); remaining.delete(node.id); });
  }
  return result;
}

function executionNodePresentation(node: ExecutionNode) {
  const tone: StatusTone = node.status === "completed" ? "success" : node.status === "running" ? "info" : node.status === "failed" ? "danger" : node.status === "waiting" ? "warning" : "neutral";
  const Icon = node.status === "completed" ? CheckCircle2 : node.status === "running" ? Loader2 : node.status === "waiting" || node.status === "failed" ? AlertTriangle : Clock3;
  const labels = { pending: "待执行", running: "执行中", waiting: "待人工／资料", completed: "已完成", failed: "失败", skipped: "不适用", cancelled: "已取消" } as const;
  return { tone, Icon, label: labels[node.status] };
}

function taskTypeLabel(type: OperationalTask["task_type"]) { return { scheduled_flow: "定时流程", external_work_order: "外部工单", event_investigation: "事件调查" }[type]; }
function dataScopeLabel(scope: string) { return ({
  workbench_runtime: "工作台运行数据", scada_devices: "SCADA 设备", scada_readings: "SCADA 监测读数",
  peripheral_points: "外围监测点", peripheral_work_orders: "外围工单",
  peripheral_observations: "外围监测记录", peripheral_test_data: "外围测试数据"
} as Record<string, string>)[scope] ?? scope; }
function taskStatusLabel(status: OperationalTask["status"]) { return { queued: "排队中", running: "处理中", waiting_human: "待人工", completed: "已完成", failed: "失败", cancelled: "已取消" }[status]; }
function evidenceKindLabel(kind: OperationalTaskEvidence["kind"]) { return { system_data: "系统数据", external_feedback: "外部反馈", human_input: "人工提供", synthetic: "合成演练" }[kind]; }
function formatDateTime(value: string) { const parsed = new Date(value); return Number.isNaN(parsed.getTime()) ? value : new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }).format(parsed); }
function toLocalDateTime(value: unknown) {
  if (typeof value !== "string") return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000).toISOString().slice(0, 16);
}
function approvalLabel(status: OperationalTaskAction["approval_status"]) { return { pending: "待确认", approved: "已批准", rejected: "已拒绝" }[status]; }
function approvalTone(status: OperationalTaskAction["approval_status"]): StatusTone { return status === "approved" ? "success" : status === "rejected" ? "danger" : "warning"; }
function executionLabel(status: OperationalTaskAction["execution_status"]) { return { not_submitted: "未提交", submitted: "已提交", succeeded: "执行成功", failed: "执行失败", unsupported: "未接执行器", unknown: "结果未知" }[status]; }
function executionTone(status: OperationalTaskAction["execution_status"]): StatusTone { return status === "succeeded" ? "success" : status === "failed" || status === "unsupported" ? "danger" : status === "submitted" || status === "unknown" ? "warning" : "neutral"; }