import { Alert, Button, Checkbox, Form, Input, InputNumber, Select, Typography } from 'antd';
import { useEffect } from 'react';
import { operationName } from '../learning-view-model';
import type { BrowserElement, DynamicTarget, ExtractionField, RecordedStep } from '../types';

const kinds: RecordedStep['kind'][] = ['fill', 'press', 'click', 'read', 'scroll', 'wait', 'extract'];
const identifier = /^[A-Za-z][A-Za-z0-9_]{0,63}$/;
interface ActionValues extends RecordedStep {
  use_target?: boolean;
  target_field?: DynamicTarget['field'];
  target_attribute?: string;
  target_value?: string;
  target_parameter?: string;
  use_batch?: boolean;
  batch_scroll_selector?: string;
  batch_pixels?: number;
  batch_max_batches?: number;
  batch_dedupe_field?: string;
  empty_state_selector?: string;
  empty_state_text?: string;
  use_until_target?: boolean;
  use_viewport_scroll?: boolean;
  until_target_selector?: string;
  until_target_field?: DynamicTarget['field'];
  until_target_attribute?: string;
  until_target_value?: string;
  until_target_parameter?: string;
  seek_timeout_ms?: number;
}

function guessKind(element: BrowserElement): RecordedStep['kind'] {
  const type = `${element.kind || ''} ${element.tag || ''}`.toLowerCase();
  if (/input|textarea|fill/.test(type)) return 'fill';
  if (/button|link|click|\ba\b/.test(type)) return 'click';
  return 'read';
}

function ExtractionFields() {
  const form = Form.useFormInstance<ActionValues>();
  const values = Form.useWatch('fields', form) as ExtractionField[] | undefined;
  return <Form.List name="fields" rules={[{ validator: async (_, fields: ExtractionField[] | undefined) => {
    if (!fields?.length || fields.length > 12) throw new Error('请配置 1–12 个字段');
    if (new Set(fields.map(field => field.name)).size !== fields.length) throw new Error('字段名称不能重复');
  } }]}>{(fields, { add, remove }, { errors }) => <>
    {fields.map(({ key, name, ...rest }) => <div className="extraction-field" key={key}>
      <div className="extraction-field-heading"><Typography.Text strong>字段 {name + 1}</Typography.Text><Button size="small" type="text" danger disabled={fields.length <= 1} onClick={() => remove(name)}>移除</Button></div>
      <Form.Item {...rest} name={[name, 'name']} label="字段名称" rules={[{ required: true, message: '填写输出字段名' }, { pattern: identifier, message: '使用字母、数字或下划线，字母开头，最多 64 字符' }, { validator: async (_, value) => { if (['constructor', 'prototype'].includes(value)) throw new Error('请使用普通业务字段名称'); } }]}><Input placeholder="例如 text 或 author_url" /></Form.Item>
      <Form.Item {...rest} name={[name, 'selector']} label="行内定位" extra="留空表示当前行；填写时只在该行内部查找。"><Input placeholder="例如 .comment-content" maxLength={500} /></Form.Item>
      <Form.Item {...rest} name={[name, 'source']} label="取值来源" rules={[{ required: true }]}><Select onChange={source => { if (source === 'content') form.setFieldsValue({ fields: (form.getFieldValue('fields') || []).map((field: ExtractionField, index: number) => index === name ? { ...field, required: true, max_media: field.max_media ?? 4 } : field) }); }} options={[{ value: 'text', label: '页面文字' }, { value: 'href', label: '链接地址' }, { value: 'attribute', label: '只读属性' }, { value: 'content', label: '文字与媒体内容' }]} /></Form.Item>
      {values?.[name]?.source === 'attribute' && <Form.Item {...rest} name={[name, 'attribute']} label="属性名称" rules={[{ required: true, message: '填写属性名称' }]}><Input placeholder="例如 data-id" maxLength={64} /></Form.Item>}
      {values?.[name]?.source === 'content' && <div data-testid="content-field-options">
        <Form.Item {...rest} name={[name, 'text_selector']} label="内容根内文字定位" extra="在行内定位所选内容根中读取文字；没有可读文字时仍须有符合范围的媒体。" rules={[{ required: true, whitespace: true, message: '填写文字相对定位' }]}><Input maxLength={1000} placeholder="例如 .comment-text" /></Form.Item>
        <Form.Item {...rest} name={[name, 'media_selector']} label="内容根内媒体定位" rules={[{ required: true, whitespace: true, message: '填写图片或视频相对定位' }]}><Input maxLength={1000} placeholder="例如 img.comment-image, video.comment-video" /></Form.Item>
        <Form.Item {...rest} name={[name, 'max_media']} label="每项最多记录媒体数" rules={[{ required: true }]}><InputNumber min={1} max={4} precision={0} /></Form.Item>
        <Alert type="info" showIcon title="显式区分文字、媒体与混合内容" description="媒体只记录实际可见类型和定位，内容尚未解释，不执行 OCR。此字段必须有内容；旧文字必填候选保持原规则，需另存修订候选。" />
      </div>}
      <Form.Item {...rest} name={[name, 'required']} valuePropName="checked"><Checkbox disabled={values?.[name]?.source === 'content'}>每项必须包含该字段</Checkbox></Form.Item>
    </div>)}
    <Form.ErrorList errors={errors} />
    <Button block disabled={fields.length >= 12} onClick={() => add({ name: '', source: 'text', required: true })}>增加提取字段</Button>
  </>}</Form.List>;
}

export function LearningActionForm({ selected, latestElements, parameters, busy, ready, onExecute }: {
  selected?: BrowserElement;
  latestElements: BrowserElement[];
  parameters: Record<string, unknown>;
  busy: boolean;
  ready: boolean;
  onExecute: (action: RecordedStep) => Promise<boolean>;
}) {
  const [form] = Form.useForm<ActionValues>();
  const kind = Form.useWatch('kind', form) || 'read';
  const parameter = Form.useWatch('parameter', form);
  const waitState = Form.useWatch('state', form);
  const minCount = Form.useWatch('min_count', form);
  const waitScope = Form.useWatch('wait_scope', form);
  const useTarget = Form.useWatch('use_target', form);
  const targetField = Form.useWatch('target_field', form);
  const targetParameter = Form.useWatch('target_parameter', form);
  const rowSelector = Form.useWatch('row_selector', form);
  const useBatch = Form.useWatch('use_batch', form);
  const allowEmpty = Form.useWatch('allow_empty', form);
  const useUntilTarget = Form.useWatch('use_until_target', form);
  const untilTargetField = Form.useWatch('until_target_field', form);
  const untilTargetParameter = Form.useWatch('until_target_parameter', form);
  const fields = Form.useWatch('fields', form) as ExtractionField[] | undefined;
  const containerRows = Boolean(rowSelector?.trim());
  const dynamic = ['click', 'read', 'extract'].includes(kind) && !(kind === 'extract' && (containerRows || useBatch || allowEmpty));
  const dedupeOptions = (fields || []).filter(field => field.required && field.source === 'attribute' && /^(?:id|data-[A-Za-z0-9_.:-]+)$/.test(field.attribute?.trim() || '') && identifier.test(field.name?.trim() || '')).map(field => ({ value: field.name.trim(), label: `${field.name.trim()} (${field.attribute?.trim()})` }));
  const parameterOptions = Object.entries(parameters).map(([value, sample]) => ({ value, label: `${value} = ${String(sample)}` }));
  const scopedWait = kind === 'wait' && waitState === 'visible' && typeof minCount === 'number';
  const waitScopeOptions = latestElements.filter(element => element.kind === 'read' && element.unique === true && !element.sensitive && element.tag && !['body', 'html', 'form'].includes(element.tag.toLowerCase())).map(element => ({ value: element.selector, label: `${element.selector}${element.label ? ` · ${element.label}` : ''}` }));
  useEffect(() => {
    if (selected) form.setFieldsValue({ selector: selected.selector, kind: guessKind(selected), parameter: undefined, value: '', use_target: false, use_viewport_scroll: false, wait_scope: undefined });
  }, [selected?.selector, selected?.kind, selected?.tag, form]);
  useEffect(() => {
    if (waitScope && (!scopedWait || !waitScopeOptions.some(option => option.value === waitScope))) form.setFieldValue('wait_scope', undefined);
  }, [scopedWait, waitScope, latestElements, form]);

  async function submit(values: ActionValues) {
    const action: RecordedStep = { kind: values.kind, selector: values.selector.trim() };
    if (values.kind === 'press') action.key = 'Enter';
    if (values.kind === 'fill') {
      if (values.parameter) action.parameter = values.parameter;
      else action.value = values.value || '';
    }
    if (values.kind === 'read' || values.kind === 'extract') action.output_name = values.output_name?.trim();
    if (values.kind === 'scroll') Object.assign(action, { direction: values.direction, pixels: values.pixels, max_scrolls: values.max_scrolls,
      ...(values.use_until_target ? { until_target: {
        selector: values.until_target_selector?.trim(), field: values.until_target_field || 'text',
        ...(values.until_target_parameter ? { parameter: values.until_target_parameter } : { value: values.until_target_value?.trim() }),
        ...(values.until_target_field === 'attribute' ? { attribute: values.until_target_attribute?.trim() } : {}),
      }, timeout_ms: values.seek_timeout_ms, ...(values.use_viewport_scroll ? { scroll_scope: 'viewport' } : {}) } : values.until_selector?.trim() ? { until_selector: values.until_selector.trim() } : {}),
    });
    if (values.kind === 'wait') Object.assign(action, { state: values.state, timeout_ms: values.timeout_ms, ...(values.state === 'text' ? { text: values.text } : {}), ...(values.state === 'visible' && typeof values.min_count === 'number' ? { min_count: values.min_count, ...(values.wait_scope?.trim() ? { wait_scope: values.wait_scope.trim() } : {}) } : {}) });
    if (values.kind === 'extract') Object.assign(action, {
      limit: values.limit,
      ...(values.complete_only || values.use_batch ? { complete_only: true } : {}),
      ...(values.row_selector?.trim() ? { row_selector: values.row_selector.trim() } : {}),
      ...(values.use_batch ? { batch: { scroll_selector: values.batch_scroll_selector?.trim(), pixels: values.batch_pixels, max_batches: values.batch_max_batches, dedupe_field: values.batch_dedupe_field } } : {}),
      ...(values.allow_empty && !values.use_batch ? { allow_empty: true, empty_state: { selector: values.empty_state_selector?.trim(), text: values.empty_state_text?.trim() } } : {}),
      fields: (values.fields || []).map(field => ({ name: field.name.trim(), source: field.source, required: field.source === 'content' || Boolean(field.required), ...(field.selector?.trim() ? { selector: field.selector.trim() } : {}), ...(field.source === 'attribute' ? { attribute: field.attribute?.trim() } : {}), ...(field.source === 'content' ? { text_selector: field.text_selector?.trim(), media_selector: field.media_selector?.trim(), max_media: field.max_media ?? 4 } : {}) })),
    });
    if (dynamic && values.use_target) action.target = {
      field: values.target_field || 'text',
      ...(values.target_parameter ? { parameter: values.target_parameter } : { value: values.target_value?.trim() }),
      ...(values.target_field === 'attribute' ? { attribute: values.target_attribute?.trim() } : {}),
    };
    if (await onExecute(action)) form.setFieldValue('selector', '');
  }

  return <Form<ActionValues> form={form} layout="vertical" disabled={busy} onFinish={values => void submit(values)} data-testid="learning-action-form" initialValues={{
    kind: 'read', selector: '', value: '', output_name: 'results', direction: 'down', pixels: 600, max_scrolls: 1,
    state: 'visible', timeout_ms: 5000, limit: 20, complete_only: false, until_selector: '', fields: [{ name: 'text', source: 'text', required: true }], use_target: false, target_field: 'text',
    row_selector: '', use_batch: false, batch_scroll_selector: '', batch_pixels: 400, batch_max_batches: 3, allow_empty: false, empty_state_selector: '', empty_state_text: '',
    use_until_target: false, use_viewport_scroll: false, until_target_field: 'text', until_target_selector: '', seek_timeout_ms: 5000,
  }}>
    <Form.Item name="kind" label="操作类型" rules={[{ required: true }]}><Select aria-label="操作类型" options={kinds.map(value => ({ value, label: operationName(value) }))} /></Form.Item>
    <Form.Item name="selector" label={kind === 'extract' ? containerRows || useBatch || allowEmpty ? '读取容器定位' : '结果行定位' : kind === 'scroll' ? '滚动容器定位' : '页面定位'} extra={kind === 'scroll' ? useUntilTarget ? '使用最新观察中的唯一普通可滚动容器；动态目标查找不能使用 body。' : '填写 body 滚动页面，或使用观察到的滚动容器。' : kind === 'wait' && waitState === 'hidden' ? '可以等待本次观察中已消失的元素。' : '使用最新观察中的根元素定位，执行前会重新核对；字段内部可配置相对定位。'} rules={[{ required: true, whitespace: true, message: '填写页面定位' }]}><Input.TextArea aria-label="选中的页面定位" rows={2} maxLength={1000} placeholder={kind === 'scroll' && !useUntilTarget ? 'body' : '选择或填写本次操作的定位'} /></Form.Item>
    {kind === 'fill' && <>
      <Form.Item name="parameter" label="绑定任务参数"><Select allowClear placeholder="选择参数，或填写固定值" options={parameterOptions} /></Form.Item>
      {!parameter && <Form.Item name="value" label="本次输入内容" rules={[{ required: true, whitespace: true, message: '填写普通搜索或查询内容' }]}><Input autoComplete="off" maxLength={2000} placeholder="普通搜索或查询内容" /></Form.Item>}
    </>}
    {kind === 'press' && <Alert type="info" showIcon message="在搜索框提交已有内容" description="固定按一次 Enter，仅支持已观察到的普通搜索输入框或文本域。请先填写搜索内容并核对页面；失败后先查看新证据。" />}
    {(kind === 'read' || kind === 'extract') && <Form.Item name="output_name" label="输出名称" rules={[{ required: true }, { pattern: identifier, message: '使用字母、数字或下划线，字母开头，最多 64 字符' }]}><Input placeholder="例如 results 或 comments" maxLength={64} /></Form.Item>}
    {kind === 'scroll' && <>
      <Form.Item name="direction" label="方向"><Select options={[{ value: 'down', label: '向下' }, { value: 'up', label: '向上' }]} /></Form.Item>
      <div className="action-form-grid"><Form.Item name="pixels" label="每次像素" rules={[{ required: true }]}><InputNumber min={1} max={1600} precision={0} /></Form.Item><Form.Item name="max_scrolls" label="最多次数" rules={[{ required: true }]}><InputNumber min={1} max={10} precision={0} /></Form.Item></div>
      <Form.Item name="use_until_target" valuePropName="checked"><Checkbox onChange={event => { if (event.target.checked) form.setFieldValue('until_selector', ''); }}>按动态目标停止滚动</Checkbox></Form.Item>
      {!useUntilTarget && <Form.Item name="until_selector" label="滚动停止条件（容器内 CSS）" extra="可选。在当前滚动容器内部寻找目标，完整可见即停止，仍受最多次数限制。"><Input maxLength={1000} placeholder="例如 .comments-container" autoComplete="off" /></Form.Item>}
      {useUntilTarget && <div className="dynamic-target-fields" data-testid="scroll-until-target-options">
        <Form.Item name="use_viewport_scroll" valuePropName="checked" extra="用于整页滚动的页面。上方定位仍须是已观察的普通容器，目标仅在该容器内查找。"><Checkbox>滚动整页寻找容器内目标</Checkbox></Form.Item>
        <Form.Item name="until_target_selector" label="容器内目标集合" extra="在已观察容器内匹配目标的 CSS；八步阅读链路需与后续点击定位完全一致。" rules={[{ required: true, whitespace: true, message: '填写容器内目标集合定位' }]}><Input maxLength={1000} placeholder="例如 #global a.title" autoComplete="off" /></Form.Item>
        <Form.Item name="until_target_field" label="滚动目标匹配依据"><Select options={[{ value: 'text', label: '完整文字' }, { value: 'href', label: '链接地址' }, { value: 'attribute', label: '只读属性' }]} /></Form.Item>
        {untilTargetField === 'attribute' && <Form.Item name="until_target_attribute" label="滚动目标匹配属性" rules={[{ required: true, whitespace: true, message: '填写属性名称' }]}><Input maxLength={64} placeholder="例如 data-id" /></Form.Item>}
        <Form.Item name="until_target_parameter" label="绑定滚动目标参数"><Select allowClear options={parameterOptions} placeholder="选择参数，或填写固定目标值" /></Form.Item>
        {untilTargetParameter && <Typography.Paragraph className="form-note" type="secondary">本次停止目标：<code>{String(parameters[untilTargetParameter] ?? '')}</code></Typography.Paragraph>}
        {!untilTargetParameter && <Form.Item name="until_target_value" label="滚动目标精确值" rules={[{ required: true, whitespace: true, message: '填写目标的精确值' }]}><Input maxLength={2000} autoComplete="off" /></Form.Item>}
        <Form.Item name="seek_timeout_ms" label="动态查找最长毫秒" rules={[{ required: true }]}><InputNumber min={1} max={15000} precision={0} /></Form.Item>
        <Alert type="info" showIcon title="限定次数、距离与时间查找" description="目标必须唯一且完整进入视口才会完成；找不到、重复或预算耗尽会停止。此模式使用已观察的普通滚动容器，不能用 body。" />
      </div>}
      <Typography.Paragraph type="secondary" className="form-note">限定范围内滚动；到达边界或无法继续移动即停止。</Typography.Paragraph>
    </>}
    {kind === 'wait' && <>
      <Form.Item name="state" label="等待条件"><Select options={[{ value: 'visible', label: '元素可见' }, { value: 'hidden', label: '元素消失' }, { value: 'text', label: '元素包含文字' }]} /></Form.Item>
      {waitState === 'visible' && <Form.Item name="min_count" label="至少可见数量" extra="可选，1–100。填写后按当前视口内可见集合数量等待；留空仍要求唯一对象。"><InputNumber min={1} max={100} precision={0} placeholder="留空使用唯一目标" /></Form.Item>}
      {scopedWait && <Form.Item name="wait_scope" label="等待范围（普通容器）" preserve={false} extra="可选，从最新观察中选择唯一普通容器，目标仅在其内部等待出现；留空使用原等待方式。" rules={[{ validator: async (_, value) => { if (value && !waitScopeOptions.some(option => option.value === value)) throw new Error('请选择最新观察中的唯一普通容器'); } }]}><Select aria-label="等待范围（普通容器）" allowClear showSearch optionFilterProp="label" options={waitScopeOptions} placeholder="可选，不自动选择范围" notFoundContent="当前观察没有可选普通容器，请先采集页面" /></Form.Item>}
      {waitState === 'text' && <Form.Item name="text" label="预期文字" rules={[{ required: true, whitespace: true, message: '填写等待出现的文字' }]}><Input maxLength={500} /></Form.Item>}
      <Form.Item name="timeout_ms" label="最长等待毫秒" rules={[{ required: true }]}><InputNumber min={1} max={15000} precision={0} /></Form.Item>
    </>}
    {kind === 'extract' && <>
      <Form.Item name="row_selector" label="容器内结果行（CSS，可选）" extra="填写后，页面定位须为最新观察中的唯一普通容器，结果行只在该容器内查找，不再使用动态对象匹配。" rules={[{ required: Boolean(useBatch || allowEmpty), whitespace: true, message: '多批或空态读取须填写容器内结果行定位' }]}><Input maxLength={1000} placeholder="例如 .comment-item" autoComplete="off" /></Form.Item>
      <Form.Item name="limit" label="最多提取项数" rules={[{ required: true }]}><InputNumber min={1} max={100} precision={0} /></Form.Item>
      <Form.Item name="complete_only" valuePropName="checked" extra="跳过被视口或滚动容器边缘裁剪的字段行；真实缺失字段仍会停止。"><Checkbox disabled={busy || Boolean(useBatch)}>只读完整可见行</Checkbox></Form.Item>
      <ExtractionFields />
      <Form.Item name="use_batch" valuePropName="checked"><Checkbox onChange={event => { if (event.target.checked) form.setFieldsValue({ complete_only: true, allow_empty: false, use_target: false }); }}>有限多批读取并去重</Checkbox></Form.Item>
      {useBatch && <div className="dynamic-target-fields" data-testid="extract-batch-options">
        <Form.Item name="batch_scroll_selector" label="批次滚动容器定位" extra="使用最新观察中的唯一可滚动容器完整定位，须为读取容器本身或其内部容器。" rules={[{ required: true, whitespace: true, message: '填写已观察的滚动容器定位' }]}><Input maxLength={1000} autoComplete="off" /></Form.Item>
        <div className="action-form-grid"><Form.Item name="batch_pixels" label="每批滚动像素" rules={[{ required: true }]}><InputNumber min={1} max={1600} precision={0} /></Form.Item><Form.Item name="batch_max_batches" label="最多读取批数" extra="包含首批，最多 5 批。" rules={[{ required: true }]}><InputNumber min={1} max={5} precision={0} /></Form.Item></div>
        <Form.Item name="batch_dedupe_field" label="跨批去重字段" extra="从必填的 id 或 data-* 属性字段中选择；每批保留实际证据。" rules={[{ required: true, message: '选择稳定标识字段' }, { validator: async (_, value) => { if (value && !dedupeOptions.some(option => option.value === value)) throw new Error('去重字段须为必填的 id 或 data-* 属性字段'); } }]}><Select options={dedupeOptions} placeholder="先配置必填属性字段" /></Form.Item>
      </div>}
      <Form.Item name="allow_empty" valuePropName="checked"><Checkbox onChange={event => { if (event.target.checked) form.setFieldsValue({ use_batch: false, use_target: false }); }}>允许明确空态结果</Checkbox></Form.Item>
      {allowEmpty && !useBatch && <div className="dynamic-target-fields" data-testid="extract-empty-options">
        <Form.Item name="empty_state_selector" label="容器内空态定位" rules={[{ required: true, whitespace: true, message: '填写容器内可见空态定位' }]}><Input maxLength={1000} placeholder="例如 .empty-state" autoComplete="off" /></Form.Item>
        <Form.Item name="empty_state_text" label="空态精确文字" extra="填写观察到的完整可见文字，按归一化后的文字精确核对；零匹配本身不算空态。" rules={[{ required: true, whitespace: true, message: '填写页面明确显示的空态文字' }]}><Input.TextArea rows={2} maxLength={2000} /></Form.Item>
      </div>}
      <Typography.Paragraph type="secondary" className="form-note">只提取当前视口内可见的行；输出包含 items、数量、来源和覆盖范围，超过上限会标注截断。</Typography.Paragraph>
    </>}
    {dynamic && <>
      <Form.Item name="use_target" valuePropName="checked" className="action-target-toggle"><Checkbox>按当前对象精确匹配</Checkbox></Form.Item>
      {useTarget && <div className="dynamic-target-fields">
        <Form.Item name="target_field" label="匹配依据"><Select options={[{ value: 'text', label: '完整文字' }, { value: 'href', label: '链接地址' }, { value: 'attribute', label: '只读属性' }]} /></Form.Item>
        {targetField === 'attribute' && <Form.Item name="target_attribute" label="匹配属性" rules={[{ required: true, whitespace: true, message: '填写属性名称' }]}><Input placeholder="例如 data-id" maxLength={64} /></Form.Item>}
        <Form.Item name="target_parameter" label="绑定对象参数" extra="选择后，录制使用当前任务样本值，试跑使用本次传入值。"><Select allowClear placeholder="可选；更换对象时使用参数" options={parameterOptions} /></Form.Item>
        {targetParameter && <Typography.Paragraph className="form-note" type="secondary">本次精确值：<code>{String(parameters[targetParameter] ?? '')}</code></Typography.Paragraph>}
        {!targetParameter && <Form.Item name="target_value" label="本次对象的精确值" rules={[{ required: true, whitespace: true, message: '填写当前页面对象的精确值' }]}><Input autoComplete="off" maxLength={2000} /></Form.Item>}
        <Alert type="info" showIcon message="仅在范围内精确命中唯一对象后继续；多匹配或未命中会停止。" />
      </div>}
    </>}
    <Button type="primary" block htmlType="submit" disabled={!ready || busy} loading={busy}>执行并记录步骤</Button>
    <Typography.Paragraph className="form-note" type="secondary">首条只读链路。登录资料和发送、关注等动作不进入此流程；条件等待依据页面状态，未承诺平台账号效果。</Typography.Paragraph>
  </Form>;
}