import { Alert, Typography } from 'antd';
import type { Observation } from '../types';
import { failurePhaseName, RequestFailureDetails } from './VerificationFailureNotice';

/** Render only the bounded diagnostic fields supplied by the learning API. */
export function ActionFailureNotice({ observation }: { observation: Observation }) {
  if (observation.source !== 'action_failure' && !observation.action_failure) return null;
  const failure = observation.action_failure;
  return <Alert className="action-failure-notice" type="error" showIcon data-testid="action-failure-notice"
    message="动作失败，未计入成功步骤"
    description={<>
      <p>页面可能已有局部变化，请先核对本次前后证据，再决定下一步。</p>
      {failure && <>
        <Typography.Paragraph>错误代码：<Typography.Text code>{failure.code}</Typography.Text> · 阶段：{failurePhaseName(failure.phase)} · 阻止请求总数：{failure.diagnostics?.blocked_request_count ?? '未记录'} · {failure.moment === 'before' ? '操作前证据' : '失败后证据'}</Typography.Paragraph>
        <RequestFailureDetails diagnostics={failure.diagnostics} />
      </>}
    </>} />;
}