/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import MonacoEditor from '@monaco-editor/react';
import { useTranslation } from 'react-i18next';
import {
  Banner,
  Button,
  Card,
  Col,
  Input,
  Modal,
  Row,
  Select,
  Space,
  Switch,
  Tag,
  Typography,
} from '@douyinfe/semi-ui';
import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
import { showError, verifyJSON } from '../../../../helpers';
import JSONEditor from '../../../common/ui/JSONEditor';

const { Text } = Typography;

const OPERATION_MODE_OPTIONS = [
  { label: 'JSON · set', value: 'set' },
  { label: 'JSON · delete', value: 'delete' },
  { label: 'JSON · append', value: 'append' },
  { label: 'JSON · prepend', value: 'prepend' },
  { label: 'JSON · copy', value: 'copy' },
  { label: 'JSON · move', value: 'move' },
  { label: 'JSON · replace', value: 'replace' },
  { label: 'JSON · regex_replace', value: 'regex_replace' },
  { label: 'JSON · trim_prefix', value: 'trim_prefix' },
  { label: 'JSON · trim_suffix', value: 'trim_suffix' },
  { label: 'JSON · ensure_prefix', value: 'ensure_prefix' },
  { label: 'JSON · ensure_suffix', value: 'ensure_suffix' },
  { label: 'JSON · trim_space', value: 'trim_space' },
  { label: 'JSON · to_lower', value: 'to_lower' },
  { label: 'JSON · to_upper', value: 'to_upper' },
  { label: 'Control · return_error', value: 'return_error' },
  { label: 'Control · prune_objects', value: 'prune_objects' },
  { label: 'Header · set_header', value: 'set_header' },
  { label: 'Header · delete_header', value: 'delete_header' },
  { label: 'Header · copy_header', value: 'copy_header' },
  { label: 'Header · move_header', value: 'move_header' },
];

const OPERATION_MODE_VALUES = new Set(
  OPERATION_MODE_OPTIONS.map((item) => item.value),
);

const CONDITION_MODE_OPTIONS = [
  { label: 'full', value: 'full' },
  { label: 'prefix', value: 'prefix' },
  { label: 'suffix', value: 'suffix' },
  { label: 'contains', value: 'contains' },
  { label: 'gt', value: 'gt' },
  { label: 'gte', value: 'gte' },
  { label: 'lt', value: 'lt' },
  { label: 'lte', value: 'lte' },
];

const CONDITION_MODE_VALUES = new Set(
  CONDITION_MODE_OPTIONS.map((item) => item.value),
);

const MODE_META = {
  delete: { path: true },
  set: { path: true, value: true, keepOrigin: true },
  append: { path: true, value: true, keepOrigin: true },
  prepend: { path: true, value: true, keepOrigin: true },
  copy: { from: true, to: true },
  move: { from: true, to: true },
  replace: { path: true, from: true, to: false },
  regex_replace: { path: true, from: true, to: false },
  trim_prefix: { path: true, value: true },
  trim_suffix: { path: true, value: true },
  ensure_prefix: { path: true, value: true },
  ensure_suffix: { path: true, value: true },
  trim_space: { path: true },
  to_lower: { path: true },
  to_upper: { path: true },
  return_error: { value: true },
  prune_objects: { pathOptional: true, value: true },
  set_header: { path: true, value: true, keepOrigin: true },
  delete_header: { path: true },
  copy_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
  move_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
};

const VALUE_REQUIRED_MODES = new Set([
  'trim_prefix',
  'trim_suffix',
  'ensure_prefix',
  'ensure_suffix',
  'set_header',
  'return_error',
  'prune_objects',
]);

const FROM_REQUIRED_MODES = new Set([
  'copy',
  'move',
  'replace',
  'regex_replace',
  'copy_header',
  'move_header',
]);

const TO_REQUIRED_MODES = new Set(['copy', 'move', 'copy_header', 'move_header']);

const MODE_DESCRIPTIONS = {
  set: 'Set JSON value at path',
  delete: 'Delete JSON field at path',
  append: 'Append value to array/string/object',
  prepend: 'Prepend value to array/string/object',
  copy: 'Copy JSON value from from -> to',
  move: 'Move JSON value from from -> to',
  replace: 'String replace on target path',
  regex_replace: 'Regex replace on target path',
  trim_prefix: 'Trim prefix on string value',
  trim_suffix: 'Trim suffix on string value',
  ensure_prefix: 'Ensure string starts with prefix',
  ensure_suffix: 'Ensure string ends with suffix',
  trim_space: 'Trim spaces/newlines on string value',
  to_lower: 'Convert string to lower case',
  to_upper: 'Convert string to upper case',
  return_error: 'Stop processing and return custom error',
  prune_objects: 'Remove objects matching conditions',
  set_header: 'Set runtime override header',
  delete_header: 'Delete runtime override header',
  copy_header: 'Copy header from from -> to',
  move_header: 'Move header from from -> to',
};

const OPERATION_PATH_SUGGESTIONS = [
  'model',
  'temperature',
  'max_tokens',
  'messages.-1.content',
  'metadata.conversation_id',
];

const CONDITION_PATH_SUGGESTIONS = [
  'model',
  'retry.is_retry',
  'last_error.code',
  'request_headers.authorization',
  'header_override_normalized.x_debug_mode',
];

const LEGACY_TEMPLATE = {
  temperature: 0,
  max_tokens: 1000,
};

const OPERATION_TEMPLATE = {
  operations: [
    {
      path: 'temperature',
      mode: 'set',
      value: 0.7,
      conditions: [
        {
          path: 'model',
          mode: 'prefix',
          value: 'gpt',
        },
      ],
      logic: 'AND',
    },
  ],
};

const MONACO_SCHEMA_URI = 'https://new-api.local/schemas/param-override.schema.json';
const MONACO_MODEL_URI = 'inmemory://new-api/param-override.json';

const JSON_SCALAR_SCHEMA = {
  oneOf: [
    { type: 'string' },
    { type: 'number' },
    { type: 'boolean' },
    { type: 'null' },
    { type: 'array' },
    { type: 'object' },
  ],
};

const PARAM_OVERRIDE_JSON_SCHEMA = {
  $schema: 'http://json-schema.org/draft-07/schema#',
  type: 'object',
  properties: {
    operations: {
      type: 'array',
      description: 'Operation pipeline for new param override format.',
      items: {
        type: 'object',
        properties: {
          mode: {
            type: 'string',
            enum: OPERATION_MODE_OPTIONS.map((item) => item.value),
          },
          path: { type: 'string' },
          from: { type: 'string' },
          to: { type: 'string' },
          keep_origin: { type: 'boolean' },
          value: JSON_SCALAR_SCHEMA,
          logic: { type: 'string', enum: ['AND', 'OR'] },
          conditions: {
            oneOf: [
              {
                type: 'array',
                items: {
                  type: 'object',
                  properties: {
                    path: { type: 'string' },
                    mode: {
                      type: 'string',
                      enum: CONDITION_MODE_OPTIONS.map((item) => item.value),
                    },
                    value: JSON_SCALAR_SCHEMA,
                    invert: { type: 'boolean' },
                    pass_missing_key: { type: 'boolean' },
                  },
                  required: ['path', 'mode'],
                  additionalProperties: false,
                },
              },
              {
                type: 'object',
                additionalProperties: JSON_SCALAR_SCHEMA,
              },
            ],
          },
        },
        required: ['mode'],
        additionalProperties: false,
        allOf: [
          {
            if: { properties: { mode: { const: 'set' } }, required: ['mode'] },
            then: { required: ['path'] },
          },
          {
            if: { properties: { mode: { const: 'delete' } }, required: ['mode'] },
            then: { required: ['path'] },
          },
          {
            if: { properties: { mode: { const: 'append' } }, required: ['mode'] },
            then: { required: ['path'] },
          },
          {
            if: { properties: { mode: { const: 'prepend' } }, required: ['mode'] },
            then: { required: ['path'] },
          },
          {
            if: { properties: { mode: { const: 'copy' } }, required: ['mode'] },
            then: { required: ['from', 'to'] },
          },
          {
            if: { properties: { mode: { const: 'move' } }, required: ['mode'] },
            then: { required: ['from', 'to'] },
          },
          {
            if: { properties: { mode: { const: 'replace' } }, required: ['mode'] },
            then: { required: ['path', 'from'] },
          },
          {
            if: {
              properties: { mode: { const: 'regex_replace' } },
              required: ['mode'],
            },
            then: { required: ['path', 'from'] },
          },
          {
            if: {
              properties: { mode: { const: 'trim_prefix' } },
              required: ['mode'],
            },
            then: { required: ['path', 'value'] },
          },
          {
            if: {
              properties: { mode: { const: 'trim_suffix' } },
              required: ['mode'],
            },
            then: { required: ['path', 'value'] },
          },
          {
            if: {
              properties: { mode: { const: 'ensure_prefix' } },
              required: ['mode'],
            },
            then: { required: ['path', 'value'] },
          },
          {
            if: {
              properties: { mode: { const: 'ensure_suffix' } },
              required: ['mode'],
            },
            then: { required: ['path', 'value'] },
          },
          {
            if: {
              properties: { mode: { const: 'trim_space' } },
              required: ['mode'],
            },
            then: { required: ['path'] },
          },
          {
            if: {
              properties: { mode: { const: 'to_lower' } },
              required: ['mode'],
            },
            then: { required: ['path'] },
          },
          {
            if: {
              properties: { mode: { const: 'to_upper' } },
              required: ['mode'],
            },
            then: { required: ['path'] },
          },
          {
            if: {
              properties: { mode: { const: 'return_error' } },
              required: ['mode'],
            },
            then: { required: ['value'] },
          },
          {
            if: {
              properties: { mode: { const: 'prune_objects' } },
              required: ['mode'],
            },
            then: { required: ['value'] },
          },
          {
            if: {
              properties: { mode: { const: 'set_header' } },
              required: ['mode'],
            },
            then: { required: ['path', 'value'] },
          },
          {
            if: {
              properties: { mode: { const: 'delete_header' } },
              required: ['mode'],
            },
            then: { required: ['path'] },
          },
          {
            if: {
              properties: { mode: { const: 'copy_header' } },
              required: ['mode'],
            },
            then: {
              anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
            },
          },
          {
            if: {
              properties: { mode: { const: 'move_header' } },
              required: ['mode'],
            },
            then: {
              anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
            },
          },
        ],
      },
    },
  },
  additionalProperties: true,
};

let localIdSeed = 0;
const nextLocalId = () => `param_override_${Date.now()}_${localIdSeed++}`;

const toValueText = (value) => {
  if (value === undefined) return '';
  if (typeof value === 'string') return value;
  try {
    return JSON.stringify(value);
  } catch (error) {
    return String(value);
  }
};

const parseLooseValue = (valueText) => {
  const raw = String(valueText ?? '');
  if (raw.trim() === '') return '';
  try {
    return JSON.parse(raw);
  } catch (error) {
    return raw;
  }
};

const normalizeCondition = (condition = {}) => ({
  id: nextLocalId(),
  path: typeof condition.path === 'string' ? condition.path : '',
  mode: CONDITION_MODE_VALUES.has(condition.mode) ? condition.mode : 'full',
  value_text: toValueText(condition.value),
  invert: condition.invert === true,
  pass_missing_key: condition.pass_missing_key === true,
});

const createDefaultCondition = () => normalizeCondition({});

const normalizeOperation = (operation = {}) => ({
  id: nextLocalId(),
  path: typeof operation.path === 'string' ? operation.path : '',
  mode: OPERATION_MODE_VALUES.has(operation.mode) ? operation.mode : 'set',
  value_text: toValueText(operation.value),
  keep_origin: operation.keep_origin === true,
  from: typeof operation.from === 'string' ? operation.from : '',
  to: typeof operation.to === 'string' ? operation.to : '',
  logic: String(operation.logic || 'OR').toUpperCase() === 'AND' ? 'AND' : 'OR',
  conditions: Array.isArray(operation.conditions)
    ? operation.conditions.map(normalizeCondition)
    : [],
});

const createDefaultOperation = () => normalizeOperation({ mode: 'set' });

const parseInitialState = (rawValue) => {
  const text = typeof rawValue === 'string' ? rawValue : '';
  const trimmed = text.trim();
  if (!trimmed) {
    return {
      editMode: 'visual',
      visualMode: 'operations',
      legacyValue: '',
      operations: [createDefaultOperation()],
      jsonText: '',
      jsonError: '',
    };
  }

  if (!verifyJSON(trimmed)) {
    return {
      editMode: 'json',
      visualMode: 'operations',
      legacyValue: '',
      operations: [createDefaultOperation()],
      jsonText: text,
      jsonError: 'JSON format is invalid',
    };
  }

  const parsed = JSON.parse(trimmed);
  const pretty = JSON.stringify(parsed, null, 2);

  if (
    parsed &&
    typeof parsed === 'object' &&
    !Array.isArray(parsed) &&
    Array.isArray(parsed.operations)
  ) {
    return {
      editMode: 'visual',
      visualMode: 'operations',
      legacyValue: '',
      operations:
        parsed.operations.length > 0
          ? parsed.operations.map(normalizeOperation)
          : [createDefaultOperation()],
      jsonText: pretty,
      jsonError: '',
    };
  }

  if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
    return {
      editMode: 'visual',
      visualMode: 'legacy',
      legacyValue: pretty,
      operations: [createDefaultOperation()],
      jsonText: pretty,
      jsonError: '',
    };
  }

  return {
    editMode: 'json',
    visualMode: 'operations',
    legacyValue: '',
    operations: [createDefaultOperation()],
    jsonText: pretty,
    jsonError: '',
  };
};

const isOperationBlank = (operation) => {
  const hasCondition = (operation.conditions || []).some(
    (condition) =>
      condition.path.trim() ||
      String(condition.value_text ?? '').trim() ||
      condition.mode !== 'full' ||
      condition.invert ||
      condition.pass_missing_key,
  );
  return (
    operation.mode === 'set' &&
    !operation.path.trim() &&
    !operation.from.trim() &&
    !operation.to.trim() &&
    String(operation.value_text ?? '').trim() === '' &&
    !operation.keep_origin &&
    !hasCondition
  );
};

const buildConditionPayload = (condition) => {
  const path = condition.path.trim();
  if (!path) return null;
  const payload = {
    path,
    mode: condition.mode || 'full',
    value: parseLooseValue(condition.value_text),
  };
  if (condition.invert) payload.invert = true;
  if (condition.pass_missing_key) payload.pass_missing_key = true;
  return payload;
};

const validateOperations = (operations, t) => {
  for (let i = 0; i < operations.length; i++) {
    const op = operations[i];
    const mode = op.mode || 'set';
    const meta = MODE_META[mode] || MODE_META.set;
    const line = i + 1;
    const pathValue = op.path.trim();
    const fromValue = op.from.trim();
    const toValue = op.to.trim();

    if (meta.path && !pathValue) {
      return t('第 {{line}} 条操作缺少 path', { line });
    }
    if (FROM_REQUIRED_MODES.has(mode) && !fromValue) {
      if (!(meta.pathAlias && pathValue)) {
        return t('第 {{line}} 条操作缺少 from', { line });
      }
    }
    if (TO_REQUIRED_MODES.has(mode) && !toValue) {
      if (!(meta.pathAlias && pathValue)) {
        return t('第 {{line}} 条操作缺少 to', { line });
      }
    }
    if (meta.from && !fromValue) {
      return t('第 {{line}} 条操作缺少 from', { line });
    }
    if (meta.to && !toValue) {
      return t('第 {{line}} 条操作缺少 to', { line });
    }
    if (
      VALUE_REQUIRED_MODES.has(mode) &&
      String(op.value_text ?? '').trim() === ''
    ) {
      return t('第 {{line}} 条操作缺少 value', { line });
    }
    if (mode === 'return_error') {
      const raw = String(op.value_text ?? '').trim();
      if (!raw) {
        return t('第 {{line}} 条操作缺少 value', { line });
      }
      try {
        const parsed = JSON.parse(raw);
        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
          if (!String(parsed.message || '').trim()) {
            return t('第 {{line}} 条 return_error 需要 message', { line });
          }
        }
      } catch (error) {
        // plain string value is allowed
      }
    }
  }
  return '';
};

const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
  const { t } = useTranslation();

  const [editMode, setEditMode] = useState('visual');
  const [visualMode, setVisualMode] = useState('operations');
  const [legacyValue, setLegacyValue] = useState('');
  const [operations, setOperations] = useState([createDefaultOperation()]);
  const [jsonText, setJsonText] = useState('');
  const [jsonError, setJsonError] = useState('');
  const monacoConfiguredRef = useRef(false);

  const configureMonaco = useCallback((monaco) => {
    if (monacoConfiguredRef.current) return;
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      allowComments: false,
      enableSchemaRequest: false,
      schemas: [
        {
          uri: MONACO_SCHEMA_URI,
          fileMatch: [MONACO_MODEL_URI, '*param-override*.json'],
          schema: PARAM_OVERRIDE_JSON_SCHEMA,
        },
      ],
    });
    monacoConfiguredRef.current = true;
  }, []);

  useEffect(() => {
    if (!visible) return;
    const nextState = parseInitialState(value);
    setEditMode(nextState.editMode);
    setVisualMode(nextState.visualMode);
    setLegacyValue(nextState.legacyValue);
    setOperations(nextState.operations);
    setJsonText(nextState.jsonText);
    setJsonError(nextState.jsonError);
  }, [visible, value]);

  const operationCount = useMemo(
    () => operations.filter((item) => !isOperationBlank(item)).length,
    [operations],
  );

  const buildVisualJson = useCallback(() => {
    if (visualMode === 'legacy') {
      const trimmed = legacyValue.trim();
      if (!trimmed) return '';
      if (!verifyJSON(trimmed)) {
        throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
      }
      const parsed = JSON.parse(trimmed);
      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
        throw new Error(t('旧格式必须是 JSON 对象'));
      }
      return JSON.stringify(parsed, null, 2);
    }

    const filteredOps = operations.filter((item) => !isOperationBlank(item));
    if (filteredOps.length === 0) return '';

    const message = validateOperations(filteredOps, t);
    if (message) {
      throw new Error(message);
    }

    const payloadOps = filteredOps.map((operation) => {
      const mode = operation.mode || 'set';
      const meta = MODE_META[mode] || MODE_META.set;
      const pathValue = operation.path.trim();
      const fromValue = operation.from.trim();
      const toValue = operation.to.trim();
      const payload = { mode };
      if (meta.path) {
        payload.path = pathValue;
      }
      if (meta.pathOptional && pathValue) {
        payload.path = pathValue;
      }
      if (meta.value) {
        payload.value = parseLooseValue(operation.value_text);
      }
      if (meta.keepOrigin && operation.keep_origin) {
        payload.keep_origin = true;
      }
      if (meta.from) {
        payload.from = fromValue;
      }
      if (!meta.to && operation.to.trim()) {
        payload.to = toValue;
      }
      if (meta.to) {
        payload.to = toValue;
      }
      if (meta.pathAlias) {
        if (!payload.from && pathValue) {
          payload.from = pathValue;
        }
        if (!payload.to && pathValue) {
          payload.to = pathValue;
        }
      }

      const conditions = (operation.conditions || [])
        .map(buildConditionPayload)
        .filter(Boolean);

      if (conditions.length > 0) {
        payload.conditions = conditions;
        payload.logic = operation.logic === 'AND' ? 'AND' : 'OR';
      }

      return payload;
    });

    return JSON.stringify({ operations: payloadOps }, null, 2);
  }, [legacyValue, operations, t, visualMode]);

  const switchToJsonMode = () => {
    if (editMode === 'json') return;
    try {
      setJsonText(buildVisualJson());
      setJsonError('');
      setEditMode('json');
    } catch (error) {
      showError(error.message);
    }
  };

  const switchToVisualMode = () => {
    if (editMode === 'visual') return;
    const trimmed = jsonText.trim();
    if (!trimmed) {
      setVisualMode('operations');
      setOperations([createDefaultOperation()]);
      setLegacyValue('');
      setJsonError('');
      setEditMode('visual');
      return;
    }
    if (!verifyJSON(trimmed)) {
      showError(t('参数覆盖必须是合法的 JSON 格式！'));
      return;
    }
    const parsed = JSON.parse(trimmed);
    if (
      parsed &&
      typeof parsed === 'object' &&
      !Array.isArray(parsed) &&
      Array.isArray(parsed.operations)
    ) {
      setVisualMode('operations');
      setOperations(
        parsed.operations.length > 0
          ? parsed.operations.map(normalizeOperation)
          : [createDefaultOperation()],
      );
      setLegacyValue('');
      setJsonError('');
      setEditMode('visual');
      return;
    }
    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
      setVisualMode('legacy');
      setLegacyValue(JSON.stringify(parsed, null, 2));
      setOperations([createDefaultOperation()]);
      setJsonError('');
      setEditMode('visual');
      return;
    }
    showError(t('参数覆盖必须是合法的 JSON 对象'));
  };

  const setOldTemplate = () => {
    const text = JSON.stringify(LEGACY_TEMPLATE, null, 2);
    setVisualMode('legacy');
    setLegacyValue(text);
    setJsonText(text);
    setJsonError('');
    setEditMode('visual');
  };

  const setNewTemplate = () => {
    setVisualMode('operations');
    setOperations(OPERATION_TEMPLATE.operations.map(normalizeOperation));
    setJsonText(JSON.stringify(OPERATION_TEMPLATE, null, 2));
    setJsonError('');
    setEditMode('visual');
  };

  const clearValue = () => {
    setVisualMode('operations');
    setLegacyValue('');
    setOperations([createDefaultOperation()]);
    setJsonText('');
    setJsonError('');
  };

  const updateOperation = (operationId, patch) => {
    setOperations((prev) =>
      prev.map((item) =>
        item.id === operationId ? { ...item, ...patch } : item,
      ),
    );
  };

  const addOperation = () => {
    setOperations((prev) => [...prev, createDefaultOperation()]);
  };

  const duplicateOperation = (operationId) => {
    setOperations((prev) => {
      const index = prev.findIndex((item) => item.id === operationId);
      if (index < 0) return prev;
      const source = prev[index];
      const cloned = normalizeOperation({
        path: source.path,
        mode: source.mode,
        value: parseLooseValue(source.value_text),
        keep_origin: source.keep_origin,
        from: source.from,
        to: source.to,
        logic: source.logic,
        conditions: (source.conditions || []).map((condition) => ({
          path: condition.path,
          mode: condition.mode,
          value: parseLooseValue(condition.value_text),
          invert: condition.invert,
          pass_missing_key: condition.pass_missing_key,
        })),
      });
      const next = [...prev];
      next.splice(index + 1, 0, cloned);
      return next;
    });
  };

  const removeOperation = (operationId) => {
    setOperations((prev) => {
      if (prev.length <= 1) return [createDefaultOperation()];
      return prev.filter((item) => item.id !== operationId);
    });
  };

  const addCondition = (operationId) => {
    setOperations((prev) =>
      prev.map((operation) =>
        operation.id === operationId
          ? {
              ...operation,
              conditions: [...(operation.conditions || []), createDefaultCondition()],
            }
          : operation,
      ),
    );
  };

  const updateCondition = (operationId, conditionId, patch) => {
    setOperations((prev) =>
      prev.map((operation) => {
        if (operation.id !== operationId) return operation;
        return {
          ...operation,
          conditions: (operation.conditions || []).map((condition) =>
            condition.id === conditionId
              ? { ...condition, ...patch }
              : condition,
          ),
        };
      }),
    );
  };

  const removeCondition = (operationId, conditionId) => {
    setOperations((prev) =>
      prev.map((operation) => {
        if (operation.id !== operationId) return operation;
        return {
          ...operation,
          conditions: (operation.conditions || []).filter(
            (condition) => condition.id !== conditionId,
          ),
        };
      }),
    );
  };

  const handleJsonChange = (nextValue) => {
    setJsonText(nextValue);
    const trimmed = String(nextValue || '').trim();
    if (!trimmed) {
      setJsonError('');
      return;
    }
    if (!verifyJSON(trimmed)) {
      setJsonError(t('JSON格式错误'));
      return;
    }
    setJsonError('');
  };

  const formatJson = () => {
    const trimmed = jsonText.trim();
    if (!trimmed) return;
    if (!verifyJSON(trimmed)) {
      showError(t('参数覆盖必须是合法的 JSON 格式！'));
      return;
    }
    setJsonText(JSON.stringify(JSON.parse(trimmed), null, 2));
    setJsonError('');
  };

  const visualPreview = useMemo(() => {
    if (editMode !== 'visual' || visualMode !== 'operations') {
      return '';
    }
    try {
      return buildVisualJson() || '';
    } catch (error) {
      return `// ${error.message}`;
    }
  }, [buildVisualJson, editMode, visualMode]);

  const handleSave = () => {
    try {
      let result = '';
      if (editMode === 'json') {
        const trimmed = jsonText.trim();
        if (!trimmed) {
          result = '';
        } else {
          if (!verifyJSON(trimmed)) {
            throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
          }
          result = JSON.stringify(JSON.parse(trimmed), null, 2);
        }
      } else {
        result = buildVisualJson();
      }
      onSave?.(result);
    } catch (error) {
      showError(error.message);
    }
  };

  return (
    <Modal
      title={t('参数覆盖')}
      visible={visible}
      width={980}
      onCancel={onCancel}
      onOk={handleSave}
      okText={t('保存')}
      cancelText={t('取消')}
    >
      <Space vertical align='start' spacing={12} style={{ width: '100%' }}>
        <Banner
          fullMode={false}
          type='info'
          description={t(
            '支持旧格式直接覆盖，也支持新格式 operations 条件编辑；可在可视化和 JSON 之间双向切换。',
          )}
        />

        <Space wrap>
          <Button
            type={editMode === 'visual' ? 'primary' : 'tertiary'}
            onClick={switchToVisualMode}
          >
            {t('可视化')}
          </Button>
          <Button
            type={editMode === 'json' ? 'primary' : 'tertiary'}
            onClick={switchToJsonMode}
          >
            {t('JSON 模式')}
          </Button>
          <Button onClick={setOldTemplate}>{t('旧格式模板')}</Button>
          <Button onClick={setNewTemplate}>{t('新格式模板')}</Button>
          <Button onClick={clearValue}>{t('不更改')}</Button>
        </Space>

        {editMode === 'visual' ? (
          <div style={{ width: '100%' }}>
            <Space wrap style={{ marginBottom: 12 }}>
              <Button
                type={visualMode === 'operations' ? 'primary' : 'tertiary'}
                onClick={() => setVisualMode('operations')}
              >
                {t('新格式模板')}
              </Button>
              <Button
                type={visualMode === 'legacy' ? 'primary' : 'tertiary'}
                onClick={() => setVisualMode('legacy')}
              >
                {t('旧格式模板')}
              </Button>
            </Space>

            {visualMode === 'legacy' ? (
              <JSONEditor
                field='param_override_legacy'
                label={t('旧格式（直接覆盖）：')}
                placeholder={JSON.stringify(LEGACY_TEMPLATE, null, 2)}
                value={legacyValue}
                onChange={setLegacyValue}
                template={LEGACY_TEMPLATE}
                templateLabel={t('填入模板')}
                editorType='keyValue'
                showClear
              />
            ) : (
              <div>
                <div className='flex items-center justify-between mb-3'>
                  <Space>
                    <Text>{t('新格式（支持条件判断与json自定义）：')}</Text>
                    <Tag color='cyan'>
                      {`${t('规则')}: ${operationCount}`}
                    </Tag>
                  </Space>
                  <Button icon={<IconPlus />} onClick={addOperation}>
                    {t('新增规则')}
                  </Button>
                </div>

                <Space vertical spacing={8} style={{ width: '100%' }}>
                  {operations.map((operation, index) => {
                    const mode = operation.mode || 'set';
                    const meta = MODE_META[mode] || MODE_META.set;
                    const conditions = operation.conditions || [];
                    return (
                      <Card key={operation.id} className='!rounded-xl border'>
                        <div className='flex items-center justify-between mb-2'>
                          <Space>
                            <Tag>{`#${index + 1}`}</Tag>
                            <Text>{mode}</Text>
                          </Space>
                          <Space>
                            <Button
                              size='small'
                              type='tertiary'
                              onClick={() => duplicateOperation(operation.id)}
                            >
                              {t('复制')}
                            </Button>
                            <Button
                              theme='borderless'
                              type='danger'
                              icon={<IconDelete />}
                              onClick={() => removeOperation(operation.id)}
                            />
                          </Space>
                        </div>

                        <Row gutter={12}>
                          <Col xs={24} md={8}>
                            <Text type='tertiary' size='small'>
                              mode
                            </Text>
                            <Select
                              value={mode}
                              optionList={OPERATION_MODE_OPTIONS}
                              onChange={(nextMode) =>
                                updateOperation(operation.id, { mode: nextMode })
                              }
                              style={{ width: '100%' }}
                            />
                          </Col>
                          {meta.path || meta.pathOptional ? (
                            <Col xs={24} md={16}>
                              <Text type='tertiary' size='small'>
                                {meta.pathOptional ? 'path (optional)' : 'path'}
                              </Text>
                              <Input
                                value={operation.path}
                                placeholder={
                                  mode.includes('header')
                                    ? 'X-Debug-Mode'
                                    : mode === 'prune_objects'
                                      ? 'messages (optional)'
                                      : 'temperature'
                                }
                                onChange={(nextValue) =>
                                  updateOperation(operation.id, {
                                    path: nextValue,
                                  })
                                }
                              />
                              <Space wrap style={{ marginTop: 6 }}>
                                {OPERATION_PATH_SUGGESTIONS.map((pathItem) => (
                                  <Tag
                                    key={`${operation.id}_${pathItem}`}
                                    size='small'
                                    color='grey'
                                    className='cursor-pointer'
                                    onClick={() =>
                                      updateOperation(operation.id, {
                                        path: pathItem,
                                      })
                                    }
                                  >
                                    {pathItem}
                                  </Tag>
                                ))}
                              </Space>
                            </Col>
                          ) : null}
                        </Row>
                        <Text type='tertiary' size='small' className='mt-1 block'>
                          {MODE_DESCRIPTIONS[mode] || ''}
                        </Text>

                        {meta.value ? (
                          <div className='mt-2'>
                            <Text type='tertiary' size='small'>
                              value (JSON or plain text)
                            </Text>
                            <Input.TextArea
                              value={operation.value_text}
                              autosize={{ minRows: 1, maxRows: 4 }}
                              placeholder='0.7'
                              onChange={(nextValue) =>
                                updateOperation(operation.id, {
                                  value_text: nextValue,
                                })
                              }
                            />
                          </div>
                        ) : null}

                        {meta.keepOrigin ? (
                          <div className='mt-2'>
                            <Switch
                              checked={operation.keep_origin}
                              checkedText={t('开')}
                              uncheckedText={t('关')}
                              onChange={(nextValue) =>
                                updateOperation(operation.id, {
                                  keep_origin: nextValue,
                                })
                              }
                            />
                            <Text type='tertiary' size='small' className='ml-2'>
                              keep_origin
                            </Text>
                          </div>
                        ) : null}

                        {meta.from || meta.to === false || meta.to ? (
                          <Row gutter={12} style={{ marginTop: 8 }}>
                            {meta.from || meta.to === false ? (
                              <Col xs={24} md={12}>
                                <Text type='tertiary' size='small'>
                                  from
                                </Text>
                                <Input
                                  value={operation.from}
                                  placeholder={
                                    mode.includes('header')
                                      ? 'Authorization'
                                      : 'model'
                                  }
                                  onChange={(nextValue) =>
                                    updateOperation(operation.id, {
                                      from: nextValue,
                                    })
                                  }
                                />
                              </Col>
                            ) : null}
                            {meta.to || meta.to === false ? (
                              <Col xs={24} md={12}>
                                <Text type='tertiary' size='small'>
                                  to
                                </Text>
                                <Input
                                  value={operation.to}
                                  placeholder={
                                    mode.includes('header')
                                      ? 'X-Upstream-Auth'
                                      : 'original_model'
                                  }
                                  onChange={(nextValue) =>
                                    updateOperation(operation.id, { to: nextValue })
                                  }
                                />
                              </Col>
                            ) : null}
                          </Row>
                        ) : null}

                        <div className='mt-3 border rounded-lg p-2'>
                          <div className='flex items-center justify-between mb-2'>
                            <Space>
                              <Text>{t('条件')}</Text>
                              <Select
                                value={operation.logic || 'OR'}
                                optionList={[
                                  { label: 'OR', value: 'OR' },
                                  { label: 'AND', value: 'AND' },
                                ]}
                                style={{ width: 96 }}
                                onChange={(nextValue) =>
                                  updateOperation(operation.id, {
                                    logic: nextValue,
                                  })
                                }
                              />
                            </Space>
                            <Button
                              icon={<IconPlus />}
                              size='small'
                              onClick={() => addCondition(operation.id)}
                            >
                              {t('新增条件')}
                            </Button>
                          </div>

                          {conditions.length === 0 ? (
                            <Text type='tertiary' size='small'>
                              {t('没有条件时，默认总是执行该操作。')}
                            </Text>
                          ) : (
                            <Space vertical spacing={8} style={{ width: '100%' }}>
                              {conditions.map((condition, conditionIndex) => (
                                <Card
                                  key={condition.id}
                                  bodyStyle={{ padding: 10 }}
                                  className='!rounded-lg'
                                >
                                  <div className='flex items-center justify-between mb-2'>
                                    <Tag size='small'>{`C${conditionIndex + 1}`}</Tag>
                                    <Button
                                      theme='borderless'
                                      type='danger'
                                      icon={<IconDelete />}
                                      size='small'
                                      onClick={() =>
                                        removeCondition(operation.id, condition.id)
                                      }
                                    />
                                  </div>
                                  <Row gutter={12}>
                                    <Col xs={24} md={10}>
                                      <Text type='tertiary' size='small'>
                                        path
                                      </Text>
                                      <Input
                                        value={condition.path}
                                        placeholder='model'
                                        onChange={(nextValue) =>
                                          updateCondition(
                                            operation.id,
                                            condition.id,
                                            { path: nextValue },
                                          )
                                        }
                                      />
                                      <Space wrap style={{ marginTop: 6 }}>
                                        {CONDITION_PATH_SUGGESTIONS.map(
                                          (pathItem) => (
                                            <Tag
                                              key={`${condition.id}_${pathItem}`}
                                              size='small'
                                              color='grey'
                                              className='cursor-pointer'
                                              onClick={() =>
                                                updateCondition(
                                                  operation.id,
                                                  condition.id,
                                                  { path: pathItem },
                                                )
                                              }
                                            >
                                              {pathItem}
                                            </Tag>
                                          ),
                                        )}
                                      </Space>
                                    </Col>
                                    <Col xs={24} md={8}>
                                      <Text type='tertiary' size='small'>
                                        mode
                                      </Text>
                                      <Select
                                        value={condition.mode}
                                        optionList={CONDITION_MODE_OPTIONS}
                                        onChange={(nextValue) =>
                                          updateCondition(
                                            operation.id,
                                            condition.id,
                                            { mode: nextValue },
                                          )
                                        }
                                        style={{ width: '100%' }}
                                      />
                                    </Col>
                                    <Col xs={24} md={6}>
                                      <Text type='tertiary' size='small'>
                                        value
                                      </Text>
                                      <Input
                                        value={condition.value_text}
                                        placeholder='gpt'
                                        onChange={(nextValue) =>
                                          updateCondition(
                                            operation.id,
                                            condition.id,
                                            { value_text: nextValue },
                                          )
                                        }
                                      />
                                    </Col>
                                  </Row>
                                  <Space style={{ marginTop: 8 }}>
                                    <Switch
                                      checked={condition.invert}
                                      checkedText={t('开')}
                                      uncheckedText={t('关')}
                                      onChange={(nextValue) =>
                                        updateCondition(
                                          operation.id,
                                          condition.id,
                                          { invert: nextValue },
                                        )
                                      }
                                    />
                                    <Text type='tertiary' size='small'>
                                      invert
                                    </Text>
                                    <Switch
                                      checked={condition.pass_missing_key}
                                      checkedText={t('开')}
                                      uncheckedText={t('关')}
                                      onChange={(nextValue) =>
                                        updateCondition(
                                          operation.id,
                                          condition.id,
                                          { pass_missing_key: nextValue },
                                        )
                                      }
                                    />
                                    <Text type='tertiary' size='small'>
                                      pass_missing_key
                                    </Text>
                                  </Space>
                                </Card>
                              ))}
                            </Space>
                          )}
                        </div>
                      </Card>
                    );
                  })}
                </Space>
                <Card className='!rounded-xl border mt-3'>
                  <div className='flex items-center justify-between mb-2'>
                    <Text>{t('实时 JSON 预览')}</Text>
                    <Tag color='grey'>{t('预览')}</Tag>
                  </div>
                  <pre className='mb-0 text-xs leading-5 whitespace-pre-wrap break-all max-h-64 overflow-auto'>
                    {visualPreview || '{}'}
                  </pre>
                </Card>
              </div>
            )}
          </div>
        ) : (
          <div style={{ width: '100%' }}>
            <Space style={{ marginBottom: 8 }} wrap>
              <Button onClick={formatJson}>{t('格式化')}</Button>
              <Tag color='cyan'>{t('JSON 智能提示')}</Tag>
            </Space>
            <div className='border rounded-lg overflow-hidden'>
              <MonacoEditor
                beforeMount={configureMonaco}
                path={MONACO_MODEL_URI}
                language='json'
                value={jsonText}
                onChange={(nextValue) => handleJsonChange(nextValue ?? '')}
                height='460px'
                options={{
                  minimap: { enabled: false },
                  fontSize: 13,
                  lineNumbers: 'on',
                  automaticLayout: true,
                  scrollBeyondLastLine: false,
                  tabSize: 2,
                  insertSpaces: true,
                  wordWrap: 'on',
                  formatOnPaste: true,
                  formatOnType: true,
                }}
              />
            </div>
            <Text type='tertiary' size='small' className='mt-2 block'>
              {t('支持 mode/conditions 字段补全与 JSON Schema 校验')}
            </Text>
            {jsonError ? (
              <Text className='text-red-500 text-xs mt-2'>{jsonError}</Text>
            ) : null}
          </div>
        )}
      </Space>
    </Modal>
  );
};

export default ParamOverrideEditorModal;