(() => {
  'use strict';
  const STORAGE_KEY = 'system-simulation:amesim-submodel-demo:v1';
  const $ = id => document.getElementById(id);
  const escape = value => String(value).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]);
  // Local, deliberately bounded demonstration of variable-level interface matching.
  // These declarations are not the production component catalogue or a numerical solver.
  const ports = {
    'A.1': { label: '储气罐 A · 端口 1', component: 'A', state: 'out' },
    'N1.1': { label: '节点 N1 · 端口 1', component: 'N1', state: 'out', number: '1' },
    'N1.2': { label: '节点 N1 · 端口 2（参考）', component: 'N1', state: 'in', number: '2 参考' },
    'N1.3': { label: '节点 N1 · 端口 3', component: 'N1', state: 'out', number: '3' },
    'N1.4': { label: '节点 N1 · 端口 4', component: 'N1', state: 'out', number: '4' },
    'B.2': { label: '阀门 B · 端口 2', component: 'B', state: 'in' },
    'C.1': { label: '封堵 C · 端口 1', component: 'C', state: 'in' },
    'D.1': { label: '封堵 D · 端口 1', component: 'D', state: 'in' },
  };
  const fields = {
    length: { label: '管长（m）', min: 0, exclusive: true, step: 'any', value: '' },
    diameter: { label: '内径（mm）', min: 0, exclusive: true, step: 'any', value: '' },
    roughness: { label: '相对粗糙度', min: 0, max: 0.1, step: 'any', value: '0.00001' },
    pressure: { label: '初始压力（bar，绝压）', min: 0, exclusive: true, step: 'any', value: '1' },
    temperature: { label: '初始温度（K）', min: 0, exclusive: true, step: 'any', value: '293.15' },
    pressure2: { label: '管路端口 2 初始压力（bar，绝压）', min: 0, exclusive: true, step: 'any', value: '1' },
    temperature2: { label: '管路端口 2 初始温度（K）', min: 0, exclusive: true, step: 'any', value: '293.15' },
  };
  const models = [
    { id: 'DIRECT', label: '理想连接', ends: null, effect: '不计管路压降，不增加储气容积。', fields: [] },
    { id: 'PNL00R', label: '阻性管路', ends: ['in', 'in'], effect: '考虑摩擦压降；不增加储气状态。', fields: ['length', 'diameter', 'roughness'] },
    { id: 'PNL0001', label: '单端储气管路', ends: ['in', 'out'], effect: '考虑摩擦压降；一处储气容积，2 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
    { id: 'PNL0002', label: '中间储气管路', ends: ['in', 'in'], effect: '考虑摩擦压降；中间储气容积，2 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
    { id: 'PNL0003', label: '双端储气管路', ends: ['out', 'out'], effect: '考虑摩擦压降；两端储气容积，4 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature', 'pressure2', 'temperature2'] },
  ];
  const modelById = id => models.find(model => model.id === id);
  const initial = () => ({ version: 1, mode: 'sketch', selected: 'L1', edges: [
    { id: 'L1', a: 'A.1', b: 'N1.1', model: null, params: {} },
    { id: 'L2', a: 'N1.2', b: 'B.2', model: null, params: {} },
    { id: 'L3', a: 'C.1', b: 'N1.3', model: null, params: {} },
    { id: 'L4', a: 'N1.4', b: 'D.1', model: null, params: {} },
  ] });
  let state = initial(), pendingPort = null, dialogEdge = null, positions = {};
  let storageAvailable = true;
  function matches(edge, model) {
    const a = ports[edge.a].state, b = ports[edge.b].state;
    if (!model.ends) return a !== b;
    return (a !== model.ends[0] && b !== model.ends[1]) || (a !== model.ends[1] && b !== model.ends[0]);
  }
  function candidates(edge) { return models.filter(model => matches(edge, model)); }
  function load() {
    try {
      const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
      if (!saved || saved.version !== 1 || !Array.isArray(saved.edges) || saved.edges.length > 4) return;
      const occupied = new Set(), ids = new Set();
      const valid = saved.edges.every(edge => {
        if (!edge || !/^L[1-9]\d*$/.test(edge.id) || ids.has(edge.id) || !ports[edge.a] || !ports[edge.b] ||
            ports[edge.a].component === ports[edge.b].component || occupied.has(edge.a) || occupied.has(edge.b)) return false;
        if (edge.model !== null && (!modelById(edge.model) || !matches(edge, modelById(edge.model)))) return false;
        ids.add(edge.id); occupied.add(edge.a); occupied.add(edge.b);
        return true;
      });
      if (!valid) return;
      state = {
        version: 1,
        mode: ['sketch', 'submodel', 'parameters', 'check'].includes(saved.mode) ? saved.mode : 'sketch',
        selected: ids.has(saved.selected) ? saved.selected : saved.edges[0]?.id || null,
        edges: saved.edges.map(edge => ({ id: edge.id, a: edge.a, b: edge.b, model: edge.model,
          params: Object.fromEntries(Object.keys(fields).filter(key => ['string', 'number'].includes(typeof edge.params?.[key])).map(key => [key, String(edge.params[key]).slice(0, 64)])) })),
      };
    } catch { storageAvailable = false; }
  }
  function save() {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); storageAvailable = true; }
    catch { storageAvailable = false; }
    $('save-state').textContent = storageAvailable ? '仅保存此演示 · 与正式工程分离' : '当前浏览器未保存 · 刷新将丢失演示修改';
  }
  function selected() { return state.edges.find(edge => edge.id === state.selected); }
  function message(text) { $('notice').textContent = text; }
  function validField(key, value) {
    const field = fields[key], number = Number(value);
    return String(value ?? '').trim() !== '' && Number.isFinite(number) && (field.exclusive ? number > field.min : number >= field.min) && (field.max === undefined || number <= field.max);
  }
  function missingFields(edge) {
    return (modelById(edge.model)?.fields || []).filter(key => !validField(key, edge.params[key]));
  }
  function edgeStatus(edge) {
    if (!edge.model) return '未选子模型';
    return missingFields(edge).length ? '待填参数' : '已配置';
  }
  function orientation(edge, model) {
    if (!model.ends || model.ends[0] === model.ends[1]) return '两端接口对称';
    const forward = ports[edge.a].state !== model.ends[0];
    return `管路端口 1 → ${ports[forward ? edge.a : edge.b].label}；端口 2 → ${ports[forward ? edge.b : edge.a].label}`;
  }
  function updateProgress() {
    const chosen = state.edges.filter(edge => edge.model).length;
    const configured = state.edges.filter(edge => edge.model && missingFields(edge).length === 0).length;
    $('progress').textContent = `${state.edges.length} 条连接 · ${chosen} 条已选子模型 · ${configured} 条参数完整`;
  }
  function layout() {
    const width = $('canvas').clientWidth, height = $('canvas').clientHeight;
    $('wires').setAttribute('viewBox', `0 0 ${width} ${height}`);
    positions = {
      'A.1': [width * .16 + 29, height * .54],
      'N1.1': [width * .48 - 19, height * .54], 'N1.2': [width * .48 + 19, height * .54],
      'N1.3': [width * .48, height * .54 - 19], 'N1.4': [width * .48, height * .54 + 19],
      'B.2': [width * .84 - 29, height * .54],
      'C.1': [width * .48, height * .14 + 4], 'D.1': [width * .48, height * .87 - 4],
    };
    $('ports').innerHTML = Object.entries(ports).map(([id, port]) => `<button type="button" class="port ${id === pendingPort ? 'pending' : ''} ${id === 'N1.2' ? 'reference' : ''}" style="--x:${positions[id][0]}px;--y:${positions[id][1]}px" data-port="${id}" aria-label="${escape(port.label)}">${port.number ? `<span>${escape(port.number)}</span>` : ''}</button>`).join('');
    renderWires();
  }
  function renderWires() {
    if (!positions['A.1']) return;
    $('wires').innerHTML = state.edges.map(edge => {
      const [ax, ay] = positions[edge.a], [bx, by] = positions[edge.b];
      const horizontal = Math.abs(bx - ax) >= Math.abs(by - ay);
      const path = horizontal ? `M${ax},${ay} H${(ax + bx) / 2} V${by} H${bx}` : `M${ax},${ay} V${(ay + by) / 2} H${bx} V${by}`;
      const x = horizontal ? (ax + bx) / 2 : (ax + bx) / 2 + 13;
      const y = horizontal ? (ay + by) / 2 - 12 : (ay + by) / 2;
      const label = state.mode === 'sketch' ? edge.id : `${edge.id} · ${edge.model || '未选'}`;
      return `<g><path class="wire-line ${edge.model ? 'configured' : ''} ${edge.id === state.selected ? 'selected' : ''}" d="${path}"/><path data-edge="${edge.id}" class="wire-hit" d="${path}"/><text class="wire-label" x="${x}" y="${y}" text-anchor="${horizontal ? 'middle' : 'start'}">${escape(label)}</text></g>`;
    }).join('');
    $('connection-strip').innerHTML = state.edges.map(edge => `<button type="button" data-edge="${edge.id}" aria-pressed="${edge.id === state.selected}"><span class="dot ${edge.model ? 'ready' : ''}"></span>${edge.id}<span>${escape(state.mode === 'sketch' ? '连接线' : edge.model || '未选')}</span></button>`).join('') || '<span class="secondary">依次点击两个空闲端口创建连接。</span>';
  }
  function setMode(mode) { state.mode = mode; pendingPort = null; render(); save(); }
  function selectEdge(id, open = false) {
    state.selected = id; pendingPort = null; render(); save();
    if (open && state.mode === 'submodel') openChooser(id);
  }
  function renderInspector() {
    const edge = selected();
    $('inspector-title').textContent = state.mode === 'check' ? '配置检查' : state.mode === 'parameters' ? '连线参数' : '连线';
    $('selected-id').textContent = state.mode === 'check' ? '局部演示' : edge?.id || '';
    if (state.mode === 'check') { renderChecks(); return; }
    if (!edge) { $('inspector-body').innerHTML = '<p class="secondary">选择连接线，或在绘图模式连接两个空闲端口。</p>'; return; }
    const model = modelById(edge.model);
    let html = `<div class="endpoint"><div>${escape(ports[edge.a].label)}</div><div>↔ ${escape(ports[edge.b].label)}</div></div>`;
    if (state.mode === 'sketch') {
      html += '<p class="secondary">先完成连接。进入子模型阶段后，为连接线选择计算模型。</p><div class="inspector-actions"><button type="button" class="primary" data-action="submodel">进入子模型</button><button type="button" data-action="delete">删除此连线</button></div>';
    } else {
      html += `<div class="section-label">当前子模型</div><div class="model-name">${escape(model?.id || '尚未选择')}</div><div class="secondary">${escape(model?.effect || '根据两端接口筛选，保留用户选择。')}</div>`;
      if (model) html += `<p class="secondary">${escape(orientation(edge, model))}</p>`;
      html += `<div class="inspector-actions"><button type="button" class="${state.mode === 'submodel' ? 'primary' : ''}" data-action="choose">${model ? '更换子模型…' : '选择子模型…'}</button>${state.mode === 'submodel' && model ? '<button type="button" data-action="parameters">填写参数</button>' : ''}</div>`;
      if (state.mode === 'parameters' && model) {
        html += model.fields.length ? `<form class="parameter-form" novalidate>${model.fields.map(key => {
          const field = fields[key];
          const label = model.id === 'PNL0003' && ['pressure', 'temperature'].includes(key) ? '管路端口 1 ' + field.label : field.label;
          return `<label for="param-${key}">${escape(label)}<input id="param-${key}" data-parameter="${key}" type="number" min="${field.min}" ${field.max !== undefined ? `max="${field.max}"` : ''} step="${field.step}" value="${escape(edge.params[key] ?? '')}" placeholder="填写实际值" aria-invalid="${!validField(key, edge.params[key])}"></label>`;
        }).join('')}</form><div class="parameter-state" id="parameter-state"></div>` : '<p class="secondary">理想连接无需管路参数。</p>';
      }
    }
    $('inspector-body').innerHTML = html;
    updateParameterState();
  }
  function updateParameterState() {
    const target = $('parameter-state'), edge = selected();
    if (!target || !edge) return;
    const missing = missingFields(edge);
    target.classList.toggle('valid', missing.length === 0);
    target.textContent = missing.length ? `待填写或修正 ${missing.length} 项` : '参数完整 · 已保存到此演示';
  }
  function renderChecks() {
    const occupied = new Set(state.edges.flatMap(edge => [edge.a, edge.b]));
    const free = Object.keys(ports).filter(id => !occupied.has(id));
    const complete = !free.length && state.edges.every(edge => edge.model && matches(edge, modelById(edge.model)) && !missingFields(edge).length);
    $('inspector-body').innerHTML = `<div class="check-summary ${complete ? 'complete' : ''}">${complete ? '局部连接配置检查通过' : '还有配置需要完成'}</div><p class="secondary">此检查覆盖示例端口匹配和必填参数；未调用系统编译器或求解器。</p><div class="check-list">${state.edges.map(edge => `<div class="check-item ${edgeStatus(edge) === '已配置' ? 'complete' : ''}"><strong>${edge.id} · ${escape(edge.model || '未选')}</strong><div class="secondary">${escape(edgeStatus(edge))}</div>${edgeStatus(edge) !== '已配置' ? `<button type="button" data-fix="${edge.id}">${edge.model ? '填写参数' : '选择子模型'}</button>` : ''}</div>`).join('')}${free.length ? `<div class="check-item"><strong>${free.length} 个示例端口未连接</strong><div class="secondary">${free.map(id => escape(ports[id].label)).join('、')}</div><button type="button" data-action="sketch">返回绘图</button></div>` : ''}</div>`;
  }
  function render() {
    document.querySelectorAll('[data-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.mode === state.mode)));
    const hints = {
      sketch: '示例已连线，可进入“子模型”；也可删除连线后重新连接端口。',
      submodel: '点击连接线选择兼容子模型。pnode 保持不变，管路方向自动匹配。',
      parameters: '点击管路填写实际尺寸。理想连接无需参数。',
      check: '检查本示例的端口匹配和必填参数。',
    };
    $('mode-hint').textContent = hints[state.mode];
    const next = { sketch: '选择子模型 →', submodel: '填写参数 →', parameters: '检查配置 →', check: '返回绘图' };
    $('next-mode').textContent = next[state.mode];
    layout(); renderInspector(); updateProgress();
  }
  function openChooser(id) {
    const edge = state.edges.find(item => item.id === id);
    if (!edge) return;
    dialogEdge = id;
    const available = candidates(edge), selectedModel = edge.model || available[0]?.id;
    $('dialog-title').textContent = `选择 ${id} 的子模型`;
    $('dialog-endpoints').textContent = `${ports[edge.a].label} ↔ ${ports[edge.b].label}`;
    $('model-options').innerHTML = available.map((model, index) => `<label class="model-option"><input type="radio" name="model" value="${model.id}" ${model.id === selectedModel ? 'checked' : ''}><span><strong>${model.id}</strong>${escape(model.label)} ${index === 0 ? '<span class="recommendation">接口匹配优先项</span>' : ''}<small>${escape(model.effect)}</small></span></label>`).join('');
    const describe = id => `${ports[id].label}：${ports[id].state === 'out' ? '提供温度、压力，接收质量与能量流率' : '接收温度、压力，提供质量与能量流率'}`;
    $('port-requirements').innerHTML = `<div>${escape(describe(edge.a))}</div><div>${escape(describe(edge.b))}</div>`;
    $('excluded-models').innerHTML = models.filter(model => !matches(edge, model)).map(model => `<div class="excluded-model"><span>${model.id}</span><span>端口变量供需不匹配</span></div>`).join('');
    $('apply-model').disabled = !available.length;
    $('apply-next').disabled = !available.length;
    document.querySelector('.compatibility-details').open = false;
    if (!$('model-dialog').open) $('model-dialog').showModal();
  }
  function applyModel(next) {
    const edge = state.edges.find(item => item.id === dialogEdge);
    const id = document.querySelector('input[name="model"]:checked')?.value;
    const model = modelById(id);
    if (!edge || !model || !matches(edge, model)) return;
    edge.model = id;
    // Keep shared inputs when changing a model. Inactive inputs remain private to this draft.
    model.fields.forEach(key => { if (edge.params[key] === undefined) edge.params[key] = fields[key].value; });
    state.selected = edge.id;
    $('model-dialog').close(); render(); save();
    message(`${edge.id} 已选择 ${id}。${model.effect}`);
    if (next) {
      const unassigned = state.edges.find(item => !item.model);
      if (unassigned) { selectEdge(unassigned.id); openChooser(unassigned.id); }
      else { setMode('parameters'); state.selected = state.edges.find(item => missingFields(item).length)?.id || edge.id; render(); save(); message('所有连接线已选型。填写实际管长、内径后检查配置。'); }
    }
  }
  function portClick(id) {
    if (state.mode !== 'sketch') { message('如需修改连接，请切换到“绘图”。'); return; }
    if (pendingPort === id) { pendingPort = null; layout(); message('已取消连线。'); return; }
    if (state.edges.some(edge => edge.a === id || edge.b === id)) { message('该端口已有连接。选中原连线可删除后重连。'); return; }
    if (!pendingPort) { pendingPort = id; layout(); message(`起点：${ports[id].label}。请选择另一个部件的空闲端口。`); return; }
    if (ports[pendingPort].component === ports[id].component) { message('请选择另一个部件的端口。'); return; }
    let index = 1;
    while (state.edges.some(edge => edge.id === `L${index}`)) index++;
    const edge = { id: `L${index}`, a: pendingPort, b: id, model: null, params: {} };
    state.edges.push(edge); state.selected = edge.id; pendingPort = null; render(); save();
    message(`${edge.id} 已连接。子模型稍后选择。`);
  }
  document.querySelectorAll('[data-mode]').forEach(button => button.addEventListener('click', () => setMode(button.dataset.mode)));
  $('next-mode').addEventListener('click', () => setMode({ sketch: 'submodel', submodel: 'parameters', parameters: 'check', check: 'sketch' }[state.mode]));
  $('wires').addEventListener('click', event => { const target = event.target.closest('[data-edge]'); if (target) selectEdge(target.dataset.edge, true); });
  $('connection-strip').addEventListener('click', event => { const target = event.target.closest('[data-edge]'); if (target) selectEdge(target.dataset.edge, true); });
  $('ports').addEventListener('click', event => { const target = event.target.closest('[data-port]'); if (target) portClick(target.dataset.port); });
  $('inspector-body').addEventListener('click', event => {
    const fix = event.target.closest('[data-fix]');
    if (fix) { state.selected = fix.dataset.fix; const edge = selected(); setMode(edge.model ? 'parameters' : 'submodel'); if (!edge.model) openChooser(edge.id); return; }
    const action = event.target.closest('[data-action]')?.dataset.action;
    if (action === 'choose') openChooser(state.selected);
    else if (action === 'delete') { state.edges = state.edges.filter(edge => edge.id !== state.selected); state.selected = state.edges[0]?.id || null; pendingPort = null; render(); save(); message('连线已删除。依次点击两个空闲端口即可重连。'); }
    else if (['sketch', 'submodel', 'parameters'].includes(action)) setMode(action);
  });
  $('inspector-body').addEventListener('input', event => {
    const key = event.target.dataset.parameter, edge = selected();
    if (!fields[key] || !edge) return;
    edge.params[key] = event.target.value;
    event.target.setAttribute('aria-invalid', String(!validField(key, event.target.value)));
    updateParameterState(); updateProgress(); save();
  });
  $('inspector-body').addEventListener('submit', event => event.preventDefault());
  $('apply-model').addEventListener('click', () => applyModel(false));
  $('apply-next').addEventListener('click', () => applyModel(true));
  $('reset').addEventListener('click', () => {
    $('model-dialog').close(); state = initial(); pendingPort = null; dialogEdge = null;
    render(); save(); message('已恢复最初的四条连接；此演示的选型和参数已清空。');
  });
  document.addEventListener('keydown', event => { if (event.key === 'Escape' && pendingPort) { pendingPort = null; layout(); message('已取消连线。'); } });
  load(); render(); save();
  new ResizeObserver(layout).observe($('canvas'));
})();