import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  AlertTriangle, ArrowDown, ArrowRight, Braces, CheckCircle2, ChevronDown, CirclePlus, Code2,
  FileInput, FileKey2, FlaskConical, Link2, Play, Plus, RefreshCw, Save, Sparkles, Trash2, Unplug,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { errorMessage, request } from '@/platform/messaging/runtime';
import type {
  ActiveTabInfo, BrowserPageCallable, BrowserRecordingEvent, BrowserTransformBuiltinOperation,
  BrowserTransformDirection, BrowserTransformDirectionName, BrowserTransformExecution,
  BrowserTransformNodeReference, BrowserTransformPipelineNode, BrowserTransformProfile,
  BrowserTransformProfileInput, BrowserProfileInferenceCandidate,
} from '@/types/models';
import {
  compileGuidedTransform, defaultGuidedTransform, guidedOutputDescription, parseGuidedTransform,
  type GuidedTransformDraft, type GuidedTransformOutputKind,
} from './guided';
import { createBrowserTransformProfileInput } from './profile-draft';
import {
  clearBrowserTransformReplayDraft,
  deleteBrowserTransformReplayDrafts,
  getBrowserTransformReplayDraft,
  saveBrowserTransformReplayDraft,
  type BrowserTransformReplayDraftFields,
  type BrowserTransformReplayDraftInput,
} from './replay-draft';
import './browser-transform-workspace.css';

type RunTask = (task: () => Promise<void>, success?: string) => Promise<void>;

interface BrowserTransformWorkspaceProps {
  tab?: ActiveTabInfo;
  selectedEvent?: BrowserRecordingEvent;
  busy: boolean;
  run: RunTask;
  onOpenCapture: () => void;
  suggestion?: BrowserTransformSuggestionSeed;
}

export interface BrowserTransformSuggestionSeed {
  revision: number;
  candidate: BrowserProfileInferenceCandidate;
  callable: BrowserPageCallable;
  profile: BrowserTransformProfile;
  sampleBody?: string;
  sampleLabel?: string;
}

const BUILTINS: Array<{ value: BrowserTransformBuiltinOperation; label: string }> = [
  { value: 'value.literal', label: '固定值' },
  { value: 'json.stringify', label: 'JSON 序列化' },
  { value: 'json.parse', label: 'JSON 解析' },
  { value: 'text.toString', label: '转为文本' },
  { value: 'url.encode', label: 'URL 编码' },
  { value: 'url.decode', label: 'URL 解码' },
  { value: 'base64.encode', label: 'Base64 编码' },
  { value: 'base64.decode', label: 'Base64 解码' },
  { value: 'hex.encode', label: 'Hex 编码' },
  { value: 'hex.decode', label: 'Hex 解码' },
  { value: 'object.pick', label: '选择对象字段' },
  { value: 'object.compose', label: '组合对象' },
  { value: 'form.compose', label: '组合表单' },
];

function originOf(url?: string): string {
  try { return url ? new URL(url).origin : ''; } catch { return ''; }
}

function absoluteUrl(value?: string, base?: string): string {
  try { return value ? new URL(value, base).toString() : base || ''; } catch { return value || base || ''; }
}

function uid(prefix: string): string {
  return `${prefix}-${crypto.randomUUID()}`;
}


type GuidedInputKind = 'body' | 'body-field' | 'text' | 'header-field' | 'query-field' | 'custom';

function splitInputPath(path: string): { kind: GuidedInputKind; field: string } {
  if (path === 'body') return { kind: 'body', field: '' };
  if (path === 'text') return { kind: 'text', field: '' };
  if (path.startsWith('body.')) return { kind: 'body-field', field: path.slice(5) };
  if (path.startsWith('headers.')) return { kind: 'header-field', field: path.slice(8) };
  if (path.startsWith('query.')) return { kind: 'query-field', field: path.slice(6) };
  return { kind: 'custom', field: path };
}

function joinInputPath(kind: GuidedInputKind, field: string): string {
  if (kind === 'body') return 'body';
  if (kind === 'text') return 'text';
  if (kind === 'body-field') return `body.${field.trim()}`;
  if (kind === 'header-field') return `headers.${field.trim().toLowerCase()}`;
  if (kind === 'query-field') return `query.${field.trim()}`;
  return field.trim();
}

function outputFieldLabel(kind: GuidedTransformOutputKind): string {
  if (kind === 'json-field') return 'JSON 字段名';
  if (kind === 'form-field') return '表单字段名';
  if (kind === 'header') return 'Header 名称';
  if (kind === 'query') return 'Query 参数名';
  return '';
}

const INPUT_ROLE_LABELS: Record<BrowserPageCallable['inputSlots'][number]['role'], string> = {
  data: '明文数据',
  key: '密钥',
  iv: 'IV',
  algorithm: '算法',
  options: '选项',
  signature: '签名',
  salt: 'Salt',
  nonce: 'Nonce',
  aad: '附加数据',
  unknown: '页面参数',
};

function toInput(profile: BrowserTransformProfile): BrowserTransformProfileInput {
  return {
    id: profile.id,
    name: profile.name,
    enabled: profile.enabled,
    target: { ...profile.target },
    origin: profile.origin,
    match: { methods: [...profile.match.methods], urlPattern: profile.match.urlPattern },
    request: structuredClone(profile.request),
    response: structuredClone(profile.response),
    failMode: 'closed',
    maxConcurrency: profile.maxConcurrency,
  };
}

function profileFingerprint(profile?: BrowserTransformProfileInput): string {
  return profile ? JSON.stringify(profile) : '';
}

function encodeUtf8(value: string): string {
  const bytes = new TextEncoder().encode(value);
  let binary = '';
  for (const byte of bytes) binary += String.fromCharCode(byte);
  return btoa(binary);
}

function formatSampleBody(value: string): string {
  try {
    const parsed = JSON.parse(value) as unknown;
    return typeof parsed === 'object' && parsed !== null ? JSON.stringify(parsed, null, 2) : value;
  } catch {
    return value;
  }
}

function sampleHeaders(value: string): string {
  try {
    JSON.parse(value);
    return '{"Content-Type":"application/json"}';
  } catch {
    return '{"Content-Type":"text/plain; charset=utf-8"}';
  }
}

const DEFAULT_REPLAY_BODY = '{\n  "value": "plain"\n}';

type ReplayPersistenceState = 'memory' | 'loading' | 'ready' | 'saving' | 'saved' | 'too-large' | 'error';

interface PendingReplaySave {
  key: string;
  fingerprint: string;
  input: BrowserTransformReplayDraftInput;
  revision: number;
  timeout: ReturnType<typeof setTimeout>;
}

function defaultReplayFields(tab?: ActiveTabInfo, selectedEvent?: BrowserRecordingEvent): BrowserTransformReplayDraftFields {
  return {
    method: selectedEvent?.method || 'POST',
    url: absoluteUrl(selectedEvent?.url, tab?.url),
    headers: '{"Content-Type":"application/json"}',
    body: DEFAULT_REPLAY_BODY,
  };
}

function replayFieldsFingerprint(fields: BrowserTransformReplayDraftFields): string {
  return JSON.stringify(fields);
}

function replayPersistenceLabel(state: ReplayPersistenceState): string {
  if (state === 'memory') return '保存网关后自动保存';
  if (state === 'loading') return '正在恢复';
  if (state === 'ready') return '本机自动保存';
  if (state === 'saving') return '正在保存';
  if (state === 'saved') return '本机已保存';
  if (state === 'too-large') return '样本过大';
  return '保存失败';
}

function nodeLabel(kind: BrowserTransformPipelineNode['kind']): string {
  if (kind === 'context.read') return '上下文';
  if (kind === 'builtin') return '内置转换';
  if (kind === 'page.call') return '页面函数';
  return '输出';
}

function callableKindLabel(callable: BrowserPageCallable): string {
  if (callable.kind === 'recorded-call') return '录制调用';
  if (callable.kind === 'business-closure') return '业务闭包';
  if (callable.kind === 'request-transaction') return '请求事务';
  return '全局函数';
}

function referencesOf(node: BrowserTransformPipelineNode): BrowserTransformNodeReference[] {
  if (node.kind === 'builtin') return node.inputs;
  if (node.kind === 'page.call') return node.arguments;
  if (node.kind === 'output.write') return [node.source];
  return [];
}

export function BrowserTransformWorkspace({ tab, selectedEvent, busy, run, onOpenCapture, suggestion }: BrowserTransformWorkspaceProps) {
  const [profiles, setProfiles] = useState<BrowserTransformProfile[]>([]);
  const [callables, setCallables] = useState<BrowserPageCallable[]>([]);
  const [selectedProfileId, setSelectedProfileId] = useState('');
  const [draft, setDraft] = useState<BrowserTransformProfileInput>();
  const [directionName, setDirectionName] = useState<BrowserTransformDirectionName>('request');
  const [loadError, setLoadError] = useState('');
  const [testMethod, setTestMethod] = useState('POST');
  const [testUrl, setTestUrl] = useState('');
  const [testHeaders, setTestHeaders] = useState('{"Content-Type":"application/json"}');
  const [testBody, setTestBody] = useState(DEFAULT_REPLAY_BODY);
  const [testSample, setTestSample] = useState<{ body: string; label: string }>();
  const [testResult, setTestResult] = useState<BrowserTransformExecution>();
  const [testError, setTestError] = useState('');
  const [replayPersistence, setReplayPersistence] = useState<ReplayPersistenceState>('memory');
  const [replayStorageError, setReplayStorageError] = useState('');
  const [replayLoadedKey, setReplayLoadedKey] = useState('');
  const [editorMode, setEditorMode] = useState<'guided' | 'advanced'>('guided');
  const [confirmDeleteCallableId, setConfirmDeleteCallableId] = useState('');
  const handledSuggestion = useRef(0);
  const replayLoadRevision = useRef(0);
  const replaySaveRevision = useRef(0);
  const replayBaselineFingerprint = useRef('');
  const replayStablePersistence = useRef<ReplayPersistenceState>('memory');
  const pendingReplaySeed = useRef<{ key: string; fields: BrowserTransformReplayDraftFields } | undefined>(undefined);
  const pendingReplaySave = useRef<PendingReplaySave | undefined>(undefined);

  const replayProfileId = draft?.id || '';
  const replayOrigin = draft?.origin || '';
  const replayKey = replayProfileId ? `${replayProfileId}:${directionName}` : '';
  const replayActiveKey = useRef(replayKey);
  replayActiveKey.current = replayKey;
  const workspaceMounted = useRef(false);
  const replayFields = useMemo<BrowserTransformReplayDraftFields>(() => ({
    method: testMethod,
    url: testUrl,
    headers: testHeaders,
    body: testBody,
    sample: testSample,
  }), [testBody, testHeaders, testMethod, testSample, testUrl]);
  const replayFingerprint = useMemo(() => replayFieldsFingerprint(replayFields), [replayFields]);

  const applyReplayFields = useCallback((fields: BrowserTransformReplayDraftFields) => {
    setTestMethod(fields.method);
    setTestUrl(fields.url);
    setTestHeaders(fields.headers);
    setTestBody(fields.body);
    setTestSample(fields.sample);
    setTestResult(undefined);
    setTestError('');
  }, []);

  const discardPendingReplaySave = useCallback(() => {
    replaySaveRevision.current += 1;
    if (pendingReplaySave.current) clearTimeout(pendingReplaySave.current.timeout);
    pendingReplaySave.current = undefined;
  }, []);

  const flushPendingReplaySave = useCallback(() => {
    const pending = pendingReplaySave.current;
    if (!pending) return;
    clearTimeout(pending.timeout);
    pendingReplaySave.current = undefined;
    replaySaveRevision.current += 1;
    void saveBrowserTransformReplayDraft(pending.input).catch(() => undefined);
  }, []);

  const load = useCallback(async () => {
    try {
      const target = tab ? { tabId: tab.id, frameId: 0 } : undefined;
      const [nextProfiles, nextCallables] = await Promise.all([
        request('transform.profile.list', target || {}),
        target ? request('callable.list', target).catch(() => []) : Promise.resolve([]),
      ]);
      setProfiles(nextProfiles);
      setCallables(nextCallables);
      setLoadError('');
      setSelectedProfileId((current) => nextProfiles.some((profile) => profile.id === current) ? current : nextProfiles[0]?.id || '');
    } catch (error) {
      setLoadError(errorMessage(error));
    }
  }, [tab]);

  useEffect(() => {
    workspaceMounted.current = true;
    return () => { workspaceMounted.current = false; };
  }, []);
  useEffect(() => { void load(); }, [load]);
  useEffect(() => {
    const selected = profiles.find((profile) => profile.id === selectedProfileId);
    if (selected) {
      setDraft(toInput(selected));
      const selectedDirection = selected.request.enabled ? selected.request : selected.response;
      setEditorMode(parseGuidedTransform(selectedDirection, callables) ? 'guided' : 'advanced');
    }
  }, [callables, profiles, selectedProfileId]);
  useEffect(() => {
    const revision = ++replayLoadRevision.current;
    discardPendingReplaySave();
    setReplayLoadedKey('');
    setReplayStorageError('');
    const fallback = defaultReplayFields(tab, selectedEvent);
    if (!replayProfileId) {
      replayBaselineFingerprint.current = replayFieldsFingerprint(fallback);
      replayStablePersistence.current = 'memory';
      applyReplayFields(fallback);
      setReplayPersistence('memory');
      return;
    }
    const seed = pendingReplaySeed.current?.key === replayKey ? pendingReplaySeed.current.fields : undefined;
    if (seed) {
      pendingReplaySeed.current = undefined;
      replayBaselineFingerprint.current = '';
      replayStablePersistence.current = 'ready';
      applyReplayFields(seed);
      setReplayPersistence('ready');
      setReplayLoadedKey(replayKey);
      return;
    }
    replayBaselineFingerprint.current = replayFieldsFingerprint(fallback);
    replayStablePersistence.current = 'ready';
    applyReplayFields(fallback);
    setReplayPersistence('loading');
    void getBrowserTransformReplayDraft(replayProfileId, directionName, replayOrigin)
      .then((stored) => {
        if (!workspaceMounted.current || replayLoadRevision.current !== revision) return;
        const fields = stored ? {
          method: stored.method,
          url: stored.url,
          headers: stored.headers,
          body: stored.body,
          sample: stored.sample,
        } : fallback;
        replayBaselineFingerprint.current = replayFieldsFingerprint(fields);
        replayStablePersistence.current = stored ? 'saved' : 'ready';
        applyReplayFields(fields);
        setReplayPersistence(stored ? 'saved' : 'ready');
        setReplayLoadedKey(replayKey);
      })
      .catch((error) => {
        if (!workspaceMounted.current || replayLoadRevision.current !== revision) return;
        replayBaselineFingerprint.current = replayFieldsFingerprint(fallback);
        replayStablePersistence.current = 'error';
        setReplayStorageError(`无法恢复本机回放草稿：${errorMessage(error)}`);
        setReplayPersistence('error');
        setReplayLoadedKey(replayKey);
      });
    return () => { replayLoadRevision.current += 1; };
    // Replay defaults are captured only when the profile/direction changes.
    // Navigation and new recording selections must not overwrite an edited draft.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [replayKey]);
  useEffect(() => () => flushPendingReplaySave(), [flushPendingReplaySave, replayKey]);
  useEffect(() => {
    if (!replayProfileId || replayLoadedKey !== replayKey) return;
    if (replayFingerprint === replayBaselineFingerprint.current) {
      pendingReplaySave.current = undefined;
      setReplayPersistence(replayStablePersistence.current);
      return;
    }
    const revision = ++replaySaveRevision.current;
    setReplayPersistence('saving');
    setReplayStorageError('');
    const input: BrowserTransformReplayDraftInput = {
      ...structuredClone(replayFields),
      profileId: replayProfileId,
      direction: directionName,
      origin: replayOrigin,
    };
    const pending: PendingReplaySave = {
      key: replayKey,
      fingerprint: replayFingerprint,
      input,
      revision,
      timeout: setTimeout(() => {
        if (pendingReplaySave.current === pending) pendingReplaySave.current = undefined;
        void saveBrowserTransformReplayDraft(input)
          .then((result) => {
            if (!workspaceMounted.current || replayActiveKey.current !== pending.key || replaySaveRevision.current !== revision) return;
            replayBaselineFingerprint.current = pending.fingerprint;
            replayStablePersistence.current = result.status === 'saved' ? 'saved' : 'too-large';
            setReplayPersistence(replayStablePersistence.current);
          })
          .catch((error) => {
            if (!workspaceMounted.current || replayActiveKey.current !== pending.key || replaySaveRevision.current !== revision) return;
            setReplayStorageError(`无法保存本机回放草稿：${errorMessage(error)}`);
            setReplayPersistence('error');
          });
      }, 350),
    };
    pendingReplaySave.current = pending;
    return () => clearTimeout(pending.timeout);
  }, [directionName, replayFields, replayFingerprint, replayKey, replayLoadedKey, replayOrigin, replayProfileId]);
  useEffect(() => {
    if (!suggestion || !tab || handledSuggestion.current >= suggestion.revision) return;
    handledSuggestion.current = suggestion.revision;
    replayLoadRevision.current += 1;
    discardPendingReplaySave();
    const sampleBody = suggestion.sampleBody ? formatSampleBody(suggestion.sampleBody) : undefined;
    const fields: BrowserTransformReplayDraftFields = {
      ...defaultReplayFields(tab, selectedEvent),
      method: suggestion.candidate.request.method || 'POST',
      url: absoluteUrl(suggestion.candidate.request.url, tab.url),
      headers: suggestion.sampleBody ? sampleHeaders(suggestion.sampleBody) : '{"Content-Type":"application/json"}',
      body: sampleBody || DEFAULT_REPLAY_BODY,
      sample: sampleBody ? { body: sampleBody, label: suggestion.sampleLabel || '录制短时样本' } : undefined,
    };
    const seedKey = `${suggestion.profile.id}:request`;
    pendingReplaySeed.current = { key: seedKey, fields };
    replayBaselineFingerprint.current = '';
    replayStablePersistence.current = 'ready';
    applyReplayFields(fields);
    setReplayLoadedKey(seedKey);
    setReplayPersistence('ready');
    setReplayStorageError('');
    setCallables((current) => [...current.filter((item) => item.id !== suggestion.callable.id), suggestion.callable]);
    setProfiles((current) => [suggestion.profile, ...current.filter((item) => item.id !== suggestion.profile.id)]);
    setSelectedProfileId(suggestion.profile.id);
    setDraft(toInput(suggestion.profile));
    setDirectionName('request');
    setEditorMode('guided');
    setTestResult(undefined);
    setTestError('');
  }, [applyReplayFields, discardPendingReplaySave, selectedEvent, suggestion, tab]);

  const savedProfile = profiles.find((profile) => profile.id === selectedProfileId);
  const dirty = Boolean(draft && profileFingerprint(draft) !== profileFingerprint(savedProfile ? toInput(savedProfile) : undefined));
  const callableIds = useMemo(() => new Set(callables.map((callable) => callable.id)), [callables]);
  const referencedCallableIds = useMemo(() => draft ? [draft.request, draft.response]
    .flatMap((direction) => direction.enabled ? direction.nodes : [])
    .filter((node): node is Extract<BrowserTransformPipelineNode, { kind: 'page.call' }> => node.kind === 'page.call')
    .map((node) => node.callableId) : [], [draft]);
  const bindingReady = Boolean(draft && originOf(tab?.url) === draft.origin && referencedCallableIds.every((id) => callableIds.has(id)));
  const callableReferences = useMemo(() => {
    const references = new Map<string, number>();
    for (const profile of profiles) {
      for (const node of [profile.request, profile.response].flatMap((item) => item.enabled ? item.nodes : [])) {
        if (node.kind !== 'page.call') continue;
        references.set(node.callableId, (references.get(node.callableId) || 0) + 1);
      }
    }
    return references;
  }, [profiles]);
  const direction = draft?.[directionName];
  const guide = useMemo(() => direction ? parseGuidedTransform(direction, callables) : undefined, [callables, direction]);
  const guidedCallable = callables.find((callable) => callable.id === guide?.callableId);
  const guidedValid = Boolean(guide && guide.callableId
    && guide.inputPaths.every((path) => path.trim())
    && (guide.outputKind === 'body' || guide.outputField.trim()));
  const replayLoading = replayPersistence === 'loading';
  const replayPersistenceTitle = replayStorageError
    || (replayPersistence === 'too-large'
      ? '当前草稿超过 256 KiB，仅保留在本次页面中；已移除旧的本机副本，避免下次恢复过期内容。'
      : replayPersistence === 'memory'
        ? '保存明文网关后，回放输入会仅保存在当前浏览器中。'
        : '仅保存在当前浏览器，不会进入明文网关导出、Bridge、Yak 引擎或 AI 上下文。');

  const selectProfile = (profile: BrowserTransformProfile) => {
    setSelectedProfileId(profile.id);
    setDraft(toInput(profile));
    setDirectionName(profile.request.enabled ? 'request' : 'response');
    setEditorMode(parseGuidedTransform(profile.request.enabled ? profile.request : profile.response, callables) ? 'guided' : 'advanced');
    setTestResult(undefined);
  };

  const create = () => {
    if (!tab) return;
    setSelectedProfileId('');
    setDraft(createBrowserTransformProfileInput(tab, selectedEvent, callables[0]));
    setDirectionName('request');
    setEditorMode('guided');
    setTestResult(undefined);
  };

  const patchDirection = (patcher: (value: BrowserTransformDirection) => BrowserTransformDirection) => {
    setDraft((current) => current ? { ...current, [directionName]: patcher(current[directionName]) } : current);
    setTestResult(undefined);
  };

  const patchNode = (id: string, patch: Partial<BrowserTransformPipelineNode>) => patchDirection((current) => ({
    ...current,
    nodes: current.nodes.map((node) => node.id === id ? { ...node, ...patch } as BrowserTransformPipelineNode : node),
  }));

  const patchGuide = (next: GuidedTransformDraft) => {
    const callable = callables.find((item) => item.id === next.callableId);
    patchDirection(() => compileGuidedTransform(next, callable));
  };

  const selectGuidedCallable = (callableId: string) => {
    if (!guide) return;
    const callable = callables.find((item) => item.id === callableId);
    const defaults = defaultGuidedTransform(callable, { outputKind: guide.outputKind, outputField: guide.outputField });
    patchGuide({
      ...guide,
      callableId,
      inputPaths: defaults.inputPaths.map((path, index) => guide.inputPaths[index] || path),
    });
  };

  const patchGuideInput = (index: number, path: string) => {
    if (!guide) return;
    patchGuide({ ...guide, inputPaths: guide.inputPaths.map((item, itemIndex) => itemIndex === index ? path : item) });
  };

  const addNode = (kind: BrowserTransformPipelineNode['kind']) => patchDirection((current) => {
    const previous = current.nodes.at(-1);
    const reference = previous ? { nodeId: previous.id } : { nodeId: '' };
    let node: BrowserTransformPipelineNode;
    if (kind === 'context.read') node = { id: uid('context'), name: '读取上下文', kind, path: 'body' };
    else if (kind === 'builtin') node = { id: uid('builtin'), name: '转换数据', kind, operation: 'json.stringify', inputs: previous ? [reference] : [] };
    else if (kind === 'page.call') node = { id: uid('call'), name: callables[0]?.name || '调用页面函数', kind, callableId: callables[0]?.id || '', arguments: previous ? [reference] : [] };
    else node = { id: uid('output'), name: '写入输出', kind, destination: 'body', source: reference, encoding: 'auto' };
    return { ...current, nodes: [...current.nodes, node] };
  });

  const patchReferences = (node: BrowserTransformPipelineNode, references: BrowserTransformNodeReference[]) => {
    if (node.kind === 'builtin') patchNode(node.id, { inputs: references });
    else if (node.kind === 'page.call') patchNode(node.id, { arguments: references });
  };

  const save = () => run(async () => {
    if (!draft) return;
    const replaySeed = structuredClone(replayFields);
    const wasNew = !draft.id;
    const profile = await request('transform.profile.save', draft);
    if (wasNew) {
      const seedKey = `${profile.id}:${directionName}`;
      pendingReplaySeed.current = { key: seedKey, fields: replaySeed };
      replayBaselineFingerprint.current = '';
      replayStablePersistence.current = 'ready';
      setReplayLoadedKey(seedKey);
      setReplayPersistence('ready');
    }
    setProfiles((current) => [profile, ...current.filter((item) => item.id !== profile.id)]);
    setSelectedProfileId(profile.id);
    setDraft(toInput(profile));
  }, 'Pipeline v2 配置已保存');

  const remove = () => run(async () => {
    if (!draft?.id) { setDraft(undefined); return; }
    const removedId = draft.id;
    discardPendingReplaySave();
    setReplayLoadedKey('');
    const remaining = await request('transform.profile.delete', { id: removedId });
    // The background service also removes these keys. Repeating the local
    // cleanup here serializes behind any Options-page write already in flight.
    await deleteBrowserTransformReplayDrafts(removedId).catch(() => undefined);
    setProfiles(remaining);
    setSelectedProfileId(remaining[0]?.id || '');
    setDraft(remaining[0] ? toInput(remaining[0]) : undefined);
  }, '明文网关配置已删除');

  const clearReplay = () => run(async () => {
    if (!draft?.id) return;
    const profileId = draft.id;
    const key = replayKey;
    replayLoadRevision.current += 1;
    discardPendingReplaySave();
    setReplayLoadedKey('');
    await clearBrowserTransformReplayDraft(profileId, directionName);
    if (replayActiveKey.current !== key) return;
    const fallback = defaultReplayFields(tab, selectedEvent);
    replayBaselineFingerprint.current = replayFieldsFingerprint(fallback);
    replayStablePersistence.current = 'ready';
    applyReplayFields(fallback);
    setReplayStorageError('');
    setReplayPersistence('ready');
    setReplayLoadedKey(key);
  }, '当前方向的本机回放草稿已清空');

  const deleteCallable = (callable: BrowserPageCallable) => run(async () => {
    const remaining = await request('callable.delete', { ...callable.target, callableId: callable.id });
    setCallables(remaining);
    setConfirmDeleteCallableId('');
    setTestResult(undefined);
  }, callableReferences.get(callable.id) ? '页面函数已删除，引用它的明文网关需要重新绑定' : '页面函数已删除');

  const execute = async () => {
    if (!draft?.id || dirty) { setTestError('请先保存当前 Pipeline'); return; }
    setTestError('');
    setTestResult(undefined);
    try {
      const parsed = JSON.parse(testHeaders) as unknown;
      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) throw new Error('Header 必须是 JSON 对象');
      const headers = Object.entries(parsed as Record<string, unknown>).map(([name, value]) => ({ name, value: String(value) }));
      setTestResult(await request('transform.execute', {
        profileId: draft.id,
        direction: directionName,
        packet: { method: testMethod.toUpperCase(), url: testUrl, statusCode: directionName === 'response' ? 200 : undefined, headers, bodyBase64: encodeUtf8(testBody) },
      }));
    } catch (error) { setTestError(errorMessage(error)); }
  };

  return <div className="transform-workbench">
    <aside className="transform-profiles">
      <header><div><strong>明文网关</strong><span>{profiles.length}</span></div><Button size="icon" variant="ghost" aria-label="新建 Pipeline" title="新建 Pipeline" disabled={!tab} onClick={create}><Plus size={15} /></Button></header>
      <div className="transform-profile-list">
        {profiles.map((profile) => {
          const ready = originOf(tab?.url) === profile.origin && [profile.request, profile.response]
            .flatMap((item) => item.enabled ? item.nodes : [])
            .filter((node): node is Extract<BrowserTransformPipelineNode, { kind: 'page.call' }> => node.kind === 'page.call')
            .every((node) => callableIds.has(node.callableId));
          return <button key={profile.id} className={selectedProfileId === profile.id ? 'is-selected' : ''} onClick={() => selectProfile(profile)}>
            <span className={`transform-profile-mark ${ready ? 'is-ready' : ''}`}><FileKey2 size={14} /></span>
            <span><strong>{profile.name}</strong><small>{profile.match.methods.join(' / ') || 'ANY'} · {profile.match.urlPattern}</small></span>
            <i title={ready ? '页面绑定可用' : '页面函数已失效'}>{ready ? <CheckCircle2 size={13} /> : <Unplug size={13} />}</i>
          </button>;
        })}
        {!profiles.length && <div className="transform-profile-empty"><FileKey2 size={20} /><strong>没有 Pipeline</strong><Button size="sm" variant="primary" disabled={!tab} onClick={create}><CirclePlus size={14} />新建</Button></div>}
      </div>
      <footer>
        <details className="transform-callable-menu">
          <summary className={callables.length ? 'is-ready' : ''}><i />{callables.length} 个页面函数<ChevronDown size={12} /></summary>
          <div className="transform-callable-popover">
            <header><div><strong>当前文档页面函数</strong><span>页面刷新或导航后自动失效</span></div><em>{callables.length}</em></header>
            {!callables.length ? <div className="transform-callable-empty"><Code2 size={17} /><span>还没有可管理的页面函数</span></div> : <div className="transform-callable-list">{callables.map((callable) => {
              const referenceCount = callableReferences.get(callable.id) || 0;
              const confirming = confirmDeleteCallableId === callable.id;
              return <section key={callable.id}>
                <div className="transform-callable-row"><span><strong>{callable.name}</strong><small>{callableKindLabel(callable)} · {callable.algorithm || callable.operation}</small></span><Button size="icon" variant="ghost" aria-label={`删除 ${callable.name}`} title="删除页面函数" disabled={busy} onClick={() => setConfirmDeleteCallableId(callable.id)}><Trash2 size={13} /></Button></div>
                {confirming && <div className="transform-callable-confirm"><span>{referenceCount ? `${referenceCount} 个网关节点正在引用，删除后会显示“页面函数缺失”。` : '这个页面函数将从当前文档中移除。'}</span><div><Button size="sm" variant="ghost" onClick={() => setConfirmDeleteCallableId('')}>取消</Button><Button size="sm" variant="danger" disabled={busy} onClick={() => void deleteCallable(callable)}>确认删除</Button></div></div>}
              </section>;
            })}</div>}
          </div>
        </details>
        <Button size="icon" variant="ghost" aria-label="刷新页面绑定" title="刷新页面绑定" onClick={() => void load()}><RefreshCw size={14} /></Button>
      </footer>
    </aside>

    <main className="transform-editor">
      {!draft ? <div className="transform-editor-empty"><Link2 size={24} /><strong>建立明文与线上报文的转换链路</strong>{callables.length ? <Button variant="primary" onClick={create}><CirclePlus size={14} />新建 Pipeline</Button> : <Button variant="primary" onClick={onOpenCapture}><Code2 size={14} />先捕获页面函数</Button>}</div> : <>
        <header className="transform-editor-head"><div><input value={draft.name} onChange={(event) => setDraft({ ...draft, name: event.target.value })} /><span>{draft.origin} · document 生命周期</span></div><label><Switch checked={draft.enabled} onCheckedChange={(enabled) => setDraft({ ...draft, enabled })} />启用</label></header>
        <div className="transform-route">
          <label><span>HTTP 方法</span><input value={draft.match.methods.join(', ')} onChange={(event) => setDraft({ ...draft, match: { ...draft.match, methods: event.target.value.split(',').map((item) => item.trim().toUpperCase()).filter(Boolean) } })} /></label>
          <label><span>URL 模式</span><input value={draft.match.urlPattern} onChange={(event) => setDraft({ ...draft, match: { ...draft.match, urlPattern: event.target.value } })} /></label>
          <label><span>并发</span><input type="number" min={1} max={8} value={draft.maxConcurrency} onChange={(event) => setDraft({ ...draft, maxConcurrency: Number(event.target.value) })} /></label>
        </div>
        <div className="transform-direction-tabs">
          {(['request', 'response'] as const).map((name) => <button key={name} className={directionName === name ? 'is-selected' : ''} onClick={() => setDirectionName(name)}>{name === 'request' ? '请求加密' : '响应解密'}<i className={draft[name].enabled ? 'is-enabled' : ''}>{draft[name].enabled ? `${draft[name].nodes.length} 节点` : '关闭'}</i></button>)}
        </div>
        {direction && <div className="transform-pipeline-editor">
          <div className="transform-direction-state"><div><strong>{directionName === 'request' ? '明文 → 线上请求' : '线上响应 → 明文'}</strong><span>{editorMode === 'guided' ? '确认三个业务选择，底层 Pipeline 自动生成' : '直接编辑有序 DAG 与节点引用'}</span></div><Switch checked={direction.enabled} onCheckedChange={(enabled) => patchDirection((current) => ({ ...current, enabled }))} /></div>
          <div className="transform-editor-mode" role="tablist" aria-label="Pipeline 编辑方式">
            <button type="button" className={editorMode === 'guided' ? 'is-selected' : ''} onClick={() => setEditorMode('guided')}><Sparkles size={13} />引导配置</button>
            <button type="button" className={editorMode === 'advanced' ? 'is-selected' : ''} onClick={() => setEditorMode('advanced')}><Code2 size={13} />高级 Pipeline</button>
          </div>

          {editorMode === 'guided' && (!guide ? <div className="transform-guide-empty">
            <Sparkles size={20} />
            <div><strong>{direction.nodes.length ? '这条 Pipeline 包含高级结构' : '选择页面函数后自动生成'}</strong><span>{direction.nodes.length ? '高级结构不会被静默改写；可继续使用高级编辑，或明确替换成三步引导流程。' : '无需添加节点、引用或内置转换。'}</span></div>
            <Button size="sm" variant="primary" disabled={!callables.length} onClick={() => patchGuide(defaultGuidedTransform(callables[0]))}>{direction.nodes.length ? '替换为引导流程' : '开始配置'}</Button>
          </div> : guide && <div className="transform-guide">
            <div className="transform-guide-flow">
              <span>逻辑明文</span><ArrowRight size={13} /><strong>{guidedCallable?.name || '选择页面函数'}</strong><ArrowRight size={13} /><span>{guidedOutputDescription(guide)}</span>
            </div>

            <section className="transform-guide-step">
              <span className="transform-guide-step__index">1</span>
              <div className="transform-guide-step__body">
                <header><div><strong>明文从哪里来</strong><span>通常选择整个逻辑 Body；多参数函数会逐项显示。</span></div><FileInput size={15} /></header>
                <div className="transform-guide-inputs">
                  {guide.inputPaths.map((path, index) => {
                    const source = splitInputPath(path);
                    const slot = guidedCallable?.inputSlots.filter((item) => !item.retained)[index];
                    const needsField = !['body', 'text'].includes(source.kind);
                    return <div key={`${guide.callableId}:${index}`}>
                      <label><span>{slot ? `${slot.name} · ${INPUT_ROLE_LABELS[slot.role]}` : `参数 ${index + 1}`}</span><select value={source.kind} onChange={(event) => {
                        const kind = event.target.value as GuidedInputKind;
                        const defaultField = kind === 'body-field' ? 'value' : kind === 'header-field' ? 'authorization' : kind === 'query-field' ? 'value' : kind === 'custom' ? 'body' : '';
                        patchGuideInput(index, joinInputPath(kind, defaultField));
                      }}><option value="body">整个逻辑 Body</option><option value="body-field">Body 中的字段</option><option value="text">原始 Body 文本</option><option value="header-field">Header 字段</option><option value="query-field">Query 参数</option><option value="custom">高级上下文路径</option></select></label>
                      {needsField && <label><span>{source.kind === 'custom' ? '上下文路径' : '字段名'}</span><input value={source.field} onChange={(event) => patchGuideInput(index, joinInputPath(source.kind, event.target.value))} placeholder={source.kind === 'custom' ? 'body.account.id' : 'password'} /></label>}
                    </div>;
                  })}
                  {!guide.inputPaths.length && <div className="transform-guide-note">这个页面函数不需要外部输入，将直接使用页面内保留的环境。</div>}
                </div>
              </div>
            </section>

            <section className="transform-guide-step">
              <span className="transform-guide-step__index">2</span>
              <div className="transform-guide-step__body">
                <header><div><strong>交给哪个页面函数</strong><span>函数在当前页面文档中执行，Key、IV 与闭包值不会离开页面。</span></div><Code2 size={15} /></header>
                <label className="transform-guide-callable"><span>页面能力</span><select value={guide.callableId} onChange={(event) => selectGuidedCallable(event.target.value)}><option value="">选择页面函数</option>{callables.map((callable) => <option key={callable.id} value={callable.id}>{callable.name}</option>)}</select></label>
                {guidedCallable && <div className="transform-guide-callable-meta"><span>{callableKindLabel(guidedCallable)}</span><strong>{guidedCallable.algorithm || guidedCallable.operation}</strong><em>{guidedCallable.inputSlots.filter((slot) => !slot.retained).length} 个明文参数</em></div>}
                <details className="transform-guide-result"><summary>函数返回的是对象，需要取其中一个字段</summary><label><span>返回字段路径</span><input value={guide.resultPath || ''} onChange={(event) => patchGuide({ ...guide, resultPath: event.target.value || undefined })} placeholder="例如 encryptedData；留空使用完整返回值" /></label></details>
              </div>
            </section>

            <section className="transform-guide-step">
              <span className="transform-guide-step__index">3</span>
              <div className="transform-guide-step__body">
                <header><div><strong>线上请求写到哪里</strong><span>选择报文形态即可，字段组合与节点引用由插件生成。</span></div><ArrowDown size={15} /></header>
                <div className="transform-guide-output">
                  <label><span>输出形态</span><select value={guide.outputKind} onChange={(event) => {
                    const outputKind = event.target.value as GuidedTransformOutputKind;
                    const outputField = outputKind === 'body' ? '' : guide.outputField || (outputKind === 'header' ? 'X-Sign' : outputKind === 'query' ? 'signature' : 'encryptedData');
                    patchGuide({ ...guide, outputKind, outputField, setFormContentType: outputKind === 'form-field' });
                  }}><option value="body">替换整个 Body</option><option value="json-field">写入 JSON 字段</option><option value="form-field">写入表单字段</option><option value="header">写入 Header</option><option value="query">写入 Query 参数</option></select></label>
                  {guide.outputKind !== 'body' && <label><span>{outputFieldLabel(guide.outputKind)}</span><input value={guide.outputField} onChange={(event) => patchGuide({ ...guide, outputField: event.target.value })} placeholder={guide.outputKind === 'form-field' ? 'encryptedData' : guide.outputKind === 'header' ? 'X-Sign' : 'signature'} /></label>}
                </div>
                {guide.outputKind === 'form-field' && <label className="transform-guide-content-type"><Switch checked={guide.setFormContentType} onCheckedChange={(setFormContentType) => patchGuide({ ...guide, setFormContentType })} /><span><strong>自动设置表单 Content-Type</strong><small>生成 application/x-www-form-urlencoded，无需再添加固定值和 Header 节点。</small></span></label>}
                <div className={`transform-guide-ready ${guidedValid ? 'is-ready' : ''}`}><CheckCircle2 size={14} /><span>{guidedValid ? `将自动生成 ${direction.nodes.length} 个底层节点` : '补全页面函数、输入来源和输出字段后即可保存'}</span></div>
              </div>
            </section>
          </div>)}

          {editorMode === 'advanced' && <>
            <div className="transform-advanced-notice"><Code2 size={14} /><span><strong>高级 Pipeline</strong>节点、引用和白名单操作会直接影响线上报文；常规加解密场景建议使用引导配置。</span></div>
            <div className="transform-node-list">
              {direction.nodes.map((node, index) => {
                const available = direction.nodes.slice(0, index);
                const references = referencesOf(node);
                return <section className="transform-node" key={node.id}>
                  <div className="transform-node-index"><span>{index + 1}</span>{index < direction.nodes.length - 1 && <i />}</div>
                  <div className="transform-node-fields">
                    <header><em>{nodeLabel(node.kind)}</em><input value={node.name} onChange={(event) => patchNode(node.id, { name: event.target.value })} /><Button size="icon" variant="ghost" aria-label="删除节点" title="删除节点" onClick={() => patchDirection((current) => ({ ...current, nodes: current.nodes.filter((item) => item.id !== node.id) }))}><Trash2 size={13} /></Button></header>
                    {node.kind === 'context.read' && <label><span>上下文路径</span><input value={node.path} onChange={(event) => patchNode(node.id, { path: event.target.value })} placeholder="body.password" /></label>}
                    {node.kind === 'builtin' && <><label><span>白名单操作</span><select value={node.operation} onChange={(event) => patchNode(node.id, { operation: event.target.value as BrowserTransformBuiltinOperation })}>{BUILTINS.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></label>{node.operation === 'value.literal' && <label><span>固定值</span><input value={typeof node.options?.value === 'string' ? node.options.value : ''} onChange={(event) => patchNode(node.id, { options: { value: event.target.value } })} /></label>}{['form.compose', 'object.compose'].includes(node.operation) && <label><span>字段名 · 按输入顺序</span><input value={Array.isArray(node.options?.keys) ? node.options.keys.join(', ') : ''} placeholder="encryptedData, signature" onChange={(event) => patchNode(node.id, { options: { ...node.options, keys: event.target.value.split(',').map((item) => item.trim()).filter(Boolean) } })} /></label>}{node.operation === 'object.pick' && <><label><span>读取路径</span><input value={Array.isArray(node.options?.paths) ? node.options.paths.join(', ') : ''} placeholder="account.id, profile.name" onChange={(event) => patchNode(node.id, { options: { ...node.options, paths: event.target.value.split(',').map((item) => item.trim()).filter(Boolean) } })} /></label><label><span>输出字段名</span><input value={Array.isArray(node.options?.keys) ? node.options.keys.join(', ') : ''} placeholder="accountId, name" onChange={(event) => patchNode(node.id, { options: { ...node.options, keys: event.target.value.split(',').map((item) => item.trim()).filter(Boolean) } })} /></label></>}</>}
                    {node.kind === 'page.call' && <label><span>页面函数</span><select value={node.callableId} onChange={(event) => patchNode(node.id, { callableId: event.target.value })}><option value="">选择页面函数</option>{callables.map((callable) => <option key={callable.id} value={callable.id}>{callable.name}</option>)}</select></label>}
                    {(node.kind === 'page.call' || (node.kind === 'builtin' && node.operation !== 'value.literal')) && <div className="transform-node-references"><span>输入引用</span>{references.map((reference, referenceIndex) => <div key={`${node.id}:${referenceIndex}`}><select value={reference.nodeId} onChange={(event) => patchReferences(node, references.map((item, itemIndex) => itemIndex === referenceIndex ? { ...item, nodeId: event.target.value } : item))}><option value="">选择前序节点</option>{available.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select><input value={reference.path || ''} onChange={(event) => patchReferences(node, references.map((item, itemIndex) => itemIndex === referenceIndex ? { ...item, path: event.target.value || undefined } : item))} placeholder="可选子路径" /><Button size="icon" variant="ghost" aria-label="删除输入引用" onClick={() => patchReferences(node, references.filter((_, itemIndex) => itemIndex !== referenceIndex))}><Trash2 size={12} /></Button></div>)}<Button size="sm" variant="ghost" onClick={() => patchReferences(node, [...references, { nodeId: available.at(-1)?.id || '' }])}><Plus size={12} />输入</Button></div>}
                    {node.kind === 'output.write' && <div className="transform-output-fields"><label><span>来源节点</span><select value={node.source.nodeId} onChange={(event) => patchNode(node.id, { source: { ...node.source, nodeId: event.target.value } })}><option value="">选择前序节点</option>{available.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label><label><span>子路径</span><input value={node.source.path || ''} onChange={(event) => patchNode(node.id, { source: { ...node.source, path: event.target.value || undefined } })} placeholder="可选" /></label><label><span>写入目标</span><input value={node.destination} onChange={(event) => patchNode(node.id, { destination: event.target.value })} placeholder="body.encryptedData" /></label><label><span>编码</span><select value={node.encoding} onChange={(event) => patchNode(node.id, { encoding: event.target.value as 'auto' })}><option value="auto">自动</option><option value="text">文本</option><option value="json">JSON</option><option value="base64">Base64</option></select></label></div>}
                  </div>
                </section>;
              })}
            </div>
            <div className="transform-node-add"><span>添加节点</span><Button size="sm" variant="ghost" onClick={() => addNode('context.read')}><FileInput size={13} />上下文</Button><Button size="sm" variant="ghost" onClick={() => addNode('builtin')}><Braces size={13} />内置转换</Button><Button size="sm" variant="ghost" onClick={() => addNode('page.call')}><Code2 size={13} />页面函数</Button><Button size="sm" variant="ghost" onClick={() => addNode('output.write')}><ArrowDown size={13} />输出</Button></div>
          </>}
        </div>}
        <footer className="transform-editor-actions"><span className={bindingReady ? 'is-ready' : 'is-stale'}><i />{bindingReady ? '当前页面函数可用' : '页面函数缺失或文档已变化'}</span><Button size="icon" variant="ghost" aria-label="删除配置" title="删除配置" onClick={() => void remove()}><Trash2 size={14} /></Button><Button variant="primary" disabled={busy || !dirty || (editorMode === 'guided' && Boolean(direction?.enabled) && (!guide || !guidedValid))} onClick={() => void save()}><Save size={14} />保存</Button></footer>
      </>}
    </main>

    <aside className="transform-test">
      <header>
        <div><FlaskConical size={15} /><span><strong>本地回放</strong><small>不发送网络请求</small></span></div>
        <div className="transform-test-header-actions">
          {testResult && <i className="transform-test-duration">{testResult.durationMs.toFixed(1)} ms</i>}
          <span className={`transform-replay-persistence is-${replayPersistence}`} title={replayPersistenceTitle} aria-live="polite"><i />{replayPersistenceLabel(replayPersistence)}</span>
          <Button size="icon" variant="ghost" disabled={!draft?.id || busy || replayLoading} aria-label="清空本机回放草稿" title="清空当前方向的本机回放草稿" onClick={() => void clearReplay()}><Trash2 size={13} /></Button>
        </div>
      </header>
      <label><span>请求</span><div><input disabled={replayLoading} aria-label="回放 HTTP 方法" value={testMethod} onChange={(event) => { setTestMethod(event.target.value); setTestResult(undefined); }} /><input disabled={replayLoading} aria-label="回放请求 URL" value={testUrl} onChange={(event) => { setTestUrl(event.target.value); setTestResult(undefined); }} placeholder="https://example.test/api" /></div></label>
      <label><span>Headers · JSON</span><textarea disabled={replayLoading} rows={4} value={testHeaders} onChange={(event) => { setTestHeaders(event.target.value); setTestResult(undefined); }} /></label>
      <div className="transform-test-body"><div className="transform-test-field-label"><span>Body</span>{testSample && (testBody === testSample.body ? <em title={testSample.label}>短时样本</em> : <button type="button" disabled={replayLoading} onClick={() => { setTestBody(testSample.body); setTestResult(undefined); }}>恢复短时样本</button>)}</div><textarea disabled={replayLoading} aria-label="回放 Body" rows={8} value={testBody} onChange={(event) => { setTestBody(event.target.value); setTestResult(undefined); }} /></div>
      <Button variant="primary" disabled={!draft?.id || dirty || busy || replayLoading || !bindingReady} onClick={() => void execute()}><Play size={14} />执行 Pipeline</Button>
      {(loadError || replayStorageError || testError) && <div className="transform-test-error"><AlertTriangle size={14} />{loadError || replayStorageError || testError}</div>}
      {testResult && <section className="transform-test-result"><header><div><CheckCircle2 size={14} /><strong>转换完成</strong></div><span>{testResult.nodeDurations.length} 节点</span></header><dl><div><dt>输出 URL</dt><dd>{testResult.url}</dd></div><div><dt>Body Base64</dt><dd>{testResult.bodyBase64.slice(0, 64)}{testResult.bodyBase64.length > 64 ? '…' : ''}</dd></div><div><dt>Headers</dt><dd>{testResult.setHeaders.length} 设置 · {testResult.removeHeaders.length} 删除</dd></div></dl><pre>{JSON.stringify(testResult.logicalOutput, null, 2)}</pre><footer>{testResult.nodeDurations.map((node) => <span key={node.nodeId}>{node.nodeId.split('-')[0]} · {node.durationMs.toFixed(1)} ms</span>)}</footer></section>}
    </aside>
  </div>;
}