function createConversationId() {
  return `conv-${crypto.randomUUID()}`;
}

function loadConversationId() {
  const stored = sessionStorage.getItem("cognitive-agent.conversation-id");
  if (stored?.startsWith("conv-")) return stored;
  const conversationId = createConversationId();
  sessionStorage.setItem("cognitive-agent.conversation-id", conversationId);
  return conversationId;
}

const state = {
  provider: "openai",
  executionMode: "dry_run",
  conversationId: loadConversationId(),
  runtime: null,
  result: null,
  progressTimer: null,
  seatTwin: null,
};

const $ = (selector, root = document) => root.querySelector(selector);
const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

function refreshIcons() {
  if (window.lucide) {
    window.lucide.createIcons({ attrs: { "aria-hidden": "true" } });
  }
}

const TWIN_DEFAULT_POSITIONS = {
  longitudinal: 50,
  cushion_tilt: 50,
  backrest_recline: 20,
  legrest_height: 0,
  legrest_extension: 0,
};
const TWIN_ANGLE_RANGES = {
  backrest_recline: [95, 140],
  legrest_height: [95, 160],
};

function initJointTwinLayout() {
  const cabinBand = $(".cabin-band");
  const twinBand = $(".twin-band");
  const stateBand = $(".state-band");
  const passengerCard = $('.seat-card[data-seat="passenger"]');
  const domainGrid = $(".domain-grid");
  const coverage = $(".coverage-section");
  if (!cabinBand || !twinBand || !stateBand || !passengerCard || !domainGrid || !coverage) return;

  const shell = document.createElement("section");
  shell.className = "joint-twin-shell";
  shell.setAttribute("aria-labelledby", "jointTwinTitle");
  const heading = document.createElement("header");
  heading.className = "joint-twin-heading";
  heading.innerHTML = `
    <div>
      <span class="section-kicker">VEHICLE DIGITAL TWIN · JOINT CONTROL</span>
      <h3 id="jointTwinTitle">整车联合孪生总览</h3>
      <p>完整五座跨界车孪生：主驾与后排固定，副驾支持姿态、通风和加热动态反馈。</p>
    </div>
    <div class="joint-scope" aria-label="联合控制范围">
      <span><i data-lucide="armchair"></i>副驾座椅</span>
      <i data-lucide="plus"></i>
      <span><i data-lucide="fan"></i>空调</span>
      <i data-lucide="plus"></i>
      <span><i data-lucide="lamp-ceiling"></i>氛围灯</span>
      <i data-lucide="plus"></i>
      <span><i data-lucide="panels-top-left"></i>天幕</span>
    </div>`;

  cabinBand.before(shell);
  shell.append(heading, twinBand, cabinBand);
  passengerCard.classList.add("joint-seat-panel", "domain-panel");
  const seatFeedback = $("#seatFeedbackModeLabel");
  if (seatFeedback) passengerCard.prepend(seatFeedback);
  domainGrid.prepend(passengerCard);
  coverage.classList.add("joint-hardware-boundary");
  shell.append(coverage);
  stateBand.remove();
}

function twinAngleForPosition(axis, positionPct) {
  const range = TWIN_ANGLE_RANGES[axis];
  if (!range) return null;
  return range[0] + (range[1] - range[0]) * Number(positionPct) / 100;
}

function isEstimatedMotion(device, axis) {
  const motion = device?.position?.[axis];
  return Boolean(motion?.position_estimated || motion?.position_valid === false);
}

function twinPostureAngles(device) {
  const position = (axis, fallback) => Number(
    device?.position?.[axis]?.position_pct ?? fallback,
  );
  const included = (axis, fallback) => Number(
    device?.position?.[axis]?.angle_deg
    ?? twinAngleForPosition(axis, position(axis, fallback)),
  );
  const cushion = 2 + position("cushion_tilt", 50) * 0.09;
  return {
    cushion_tilt: cushion,
    backrest_recline: included("backrest_recline", 20) - 90 + cushion,
    legrest_height: Math.abs(
      180 - cushion - included("legrest_height", 0),
    ),
  };
}

function makeDynamicLine(THREE, parent, pointCount, material, segments = false) {
  const positions = new Float32Array(pointCount * 3);
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  const line = segments
    ? new THREE.LineSegments(geometry, material)
    : new THREE.Line(geometry, material);
  line.frustumCulled = false;
  line.renderOrder = 20;
  parent.add(line);
  return { line, positions, attribute: geometry.getAttribute("position") };
}

function createTwinAngleGuide(THREE, parent, color) {
  const material = new THREE.LineBasicMaterial({
    color,
    transparent: true,
    opacity: 0.95,
    depthTest: false,
  });
  const group = new THREE.Group();
  parent.add(group);
  const dotMaterial = new THREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 0.96,
    depthTest: false,
  });
  const dotGeometry = new THREE.SphereGeometry(0.022, 8, 8);
  const dots = Array.from({ length: 13 }, () => {
    const dot = new THREE.Mesh(dotGeometry, dotMaterial);
    dot.renderOrder = 21;
    group.add(dot);
    return dot;
  });
  dots[0].scale.setScalar(1.6);
  dots[dots.length - 1].scale.setScalar(1.6);
  return {
    group,
    arc: makeDynamicLine(THREE, group, 49, material),
    rays: makeDynamicLine(THREE, group, 4, material, true),
    dots,
  };
}

function updateTwinAngleGuide(guide, x, pivotY, pivotZ, startDeg, sweepDeg, radius) {
  for (let index = 0; index < 49; index += 1) {
    const angle = (startDeg + sweepDeg * index / 48) * Math.PI / 180;
    const offset = index * 3;
    guide.arc.positions[offset] = x;
    guide.arc.positions[offset + 1] = pivotY + Math.sin(angle) * radius;
    guide.arc.positions[offset + 2] = pivotZ + Math.cos(angle) * radius;
  }
  const endpoints = [
    [x, pivotY, pivotZ],
    [guide.arc.positions[0], guide.arc.positions[1], guide.arc.positions[2]],
    [x, pivotY, pivotZ],
    [
      guide.arc.positions[guide.arc.positions.length - 3],
      guide.arc.positions[guide.arc.positions.length - 2],
      guide.arc.positions[guide.arc.positions.length - 1],
    ],
  ];
  endpoints.flat().forEach((value, index) => {
    guide.rays.positions[index] = value;
  });
  guide.dots.forEach((dot, index) => {
    const source = index * 4 * 3;
    dot.position.set(
      guide.arc.positions[source],
      guide.arc.positions[source + 1],
      guide.arc.positions[source + 2],
    );
  });
  guide.arc.attribute.needsUpdate = true;
  guide.rays.attribute.needsUpdate = true;
}

function makeTwinBox(THREE, parent, size, position, material, edgeMaterial) {
  const geometry = new THREE.BoxGeometry(...size);
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(...position);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geometry, 32), edgeMaterial);
  mesh.add(edges);
  parent.add(mesh);
  return mesh;
}

function makeCabinBeam(THREE, parent, start, end, radius, material) {
  const from = new THREE.Vector3(...start);
  const to = new THREE.Vector3(...end);
  const direction = to.clone().sub(from);
  const beam = new THREE.Mesh(
    new THREE.CylinderGeometry(radius, radius, direction.length(), 12),
    material,
  );
  beam.position.copy(from).add(to).multiplyScalar(0.5);
  beam.quaternion.setFromUnitVectors(
    new THREE.Vector3(0, 1, 0),
    direction.normalize(),
  );
  beam.castShadow = true;
  parent.add(beam);
  return beam;
}

function createTwinAirflowField(THREE, parent) {
  const count = 56;
  const positions = new Float32Array(count * 3);
  const seeds = Array.from({ length: count }, (_, index) => (
    (index * 0.61803398875) % 1
  ));
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  const material = new THREE.PointsMaterial({
    color: 0x55bdec,
    size: 0.055,
    sizeAttenuation: true,
    transparent: true,
    opacity: 0,
    depthWrite: false,
    depthTest: false,
    blending: THREE.AdditiveBlending,
  });
  const points = new THREE.Points(geometry, material);
  points.frustumCulled = false;
  points.renderOrder = 24;
  parent.add(points);
  return {
    points,
    positions,
    seeds,
    attribute: geometry.getAttribute("position"),
    material,
    level: 0,
  };
}

function makeVehicleProfileShape(THREE) {
  const shape = new THREE.Shape();
  shape.moveTo(-3.72, 0.2);
  shape.lineTo(-3.72, 0.92);
  shape.quadraticCurveTo(-3.6, 1.28, -3.12, 1.47);
  shape.quadraticCurveTo(-2.42, 1.51, -1.52, 1.45);
  shape.lineTo(1.86, 1.45);
  shape.quadraticCurveTo(2.06, 1.47, 2.22, 1.52);
  shape.quadraticCurveTo(2.88, 1.52, 3.48, 1.28);
  shape.quadraticCurveTo(3.76, 1.12, 3.74, 0.72);
  shape.lineTo(3.68, 0.24);
  shape.lineTo(3.12, 0.18);
  shape.bezierCurveTo(3.02, 0.76, 2.8, 1.3, 2.35, 1.3);
  shape.bezierCurveTo(1.9, 1.3, 1.68, 0.76, 1.58, 0.18);
  shape.lineTo(-1.48, 0.18);
  shape.bezierCurveTo(-1.58, 0.76, -1.8, 1.3, -2.25, 1.3);
  shape.bezierCurveTo(-2.7, 1.3, -2.92, 0.76, -3.02, 0.18);
  shape.lineTo(-3.72, 0.2);
  shape.closePath();
  return shape;
}

function makeVehicleGreenhouseShape(THREE) {
  const shape = new THREE.Shape();
  shape.moveTo(-2.62, 1.31);
  shape.quadraticCurveTo(-2.28, 1.8, -1.82, 2.42);
  shape.quadraticCurveTo(-0.48, 2.68, 0.92, 2.5);
  shape.quadraticCurveTo(1.58, 2.4, 2.18, 1.31);
  shape.closePath();
  return shape;
}

function makeVehicleSideGlassShape(THREE) {
  const shape = new THREE.Shape();
  shape.moveTo(-2.58, 1.32);
  shape.lineTo(-1.79, 2.36);
  shape.quadraticCurveTo(-0.5, 2.56, 1.03, 2.42);
  shape.lineTo(1.82, 1.32);
  shape.closePath();
  return shape;
}

function makeRoundedPanelShape(THREE, width, length, radius) {
  const shape = new THREE.Shape();
  const halfWidth = width / 2;
  const halfLength = length / 2;
  shape.moveTo(-halfWidth + radius, -halfLength);
  shape.lineTo(halfWidth - radius, -halfLength);
  shape.quadraticCurveTo(halfWidth, -halfLength, halfWidth, -halfLength + radius);
  shape.lineTo(halfWidth, halfLength - radius);
  shape.quadraticCurveTo(halfWidth, halfLength, halfWidth - radius, halfLength);
  shape.lineTo(-halfWidth + radius, halfLength);
  shape.quadraticCurveTo(-halfWidth, halfLength, -halfWidth, halfLength - radius);
  shape.lineTo(-halfWidth, -halfLength + radius);
  shape.quadraticCurveTo(-halfWidth, -halfLength, -halfWidth + radius, -halfLength);
  shape.closePath();
  return shape;
}

function createTwinRearBench(THREE) {
  const root = new THREE.Group();
  root.position.set(0, 0.12, -1.72);
  root.userData.twinRole = "fixed_rear_bench";

  const leather = new THREE.MeshPhysicalMaterial({
    color: 0x35484e,
    roughness: 0.58,
    metalness: 0.01,
    clearcoat: 0.12,
    clearcoatRoughness: 0.75,
  });
  const insert = new THREE.MeshPhysicalMaterial({
    color: 0x829497,
    roughness: 0.72,
    clearcoat: 0.05,
  });
  const structure = new THREE.MeshStandardMaterial({
    color: 0x26343a,
    roughness: 0.68,
    metalness: 0.25,
  });
  const buckleMaterial = new THREE.MeshStandardMaterial({
    color: 0xb64b43,
    roughness: 0.5,
  });
  const edge = new THREE.LineBasicMaterial({
    color: 0x19272b,
    transparent: true,
    opacity: 0.42,
  });

  makeTwinBox(THREE, root, [2.5, 0.18, 0.72], [0, 0.24, 0.08], structure, edge);
  const cushion = new THREE.Mesh(new THREE.CapsuleGeometry(0.31, 1.82, 7, 24), leather);
  cushion.rotation.z = Math.PI / 2;
  cushion.scale.set(0.92, 1, 1.23);
  cushion.position.set(0, 0.46, 0.08);
  cushion.castShadow = true;
  cushion.receiveShadow = true;
  root.add(cushion);

  const backrest = new THREE.Mesh(new THREE.CapsuleGeometry(0.3, 1.78, 7, 24), leather);
  backrest.rotation.z = Math.PI / 2;
  backrest.scale.set(1.46, 1, 0.43);
  backrest.position.set(0, 1.04, -0.68);
  backrest.castShadow = true;
  root.add(backrest);

  [-0.79, 0, 0.79].forEach((x) => {
    const cushionInsert = new THREE.Mesh(
      new THREE.CapsuleGeometry(0.13, 0.42, 6, 18),
      insert,
    );
    cushionInsert.rotation.z = Math.PI / 2;
    cushionInsert.scale.set(0.52, 1, 2.05);
    cushionInsert.position.set(x, 0.71, 0.08);
    cushionInsert.castShadow = true;
    root.add(cushionInsert);

    const backInsert = new THREE.Mesh(
      new THREE.CapsuleGeometry(0.18, 0.42, 6, 18),
      insert,
    );
    backInsert.scale.set(1.65, 1, 0.42);
    backInsert.position.set(x, 1.05, -0.535);
    backInsert.castShadow = true;
    root.add(backInsert);

    makeCabinBeam(THREE, root, [x - 0.11, 1.43, -0.7], [x - 0.11, 1.55, -0.7], 0.018, structure);
    makeCabinBeam(THREE, root, [x + 0.11, 1.43, -0.7], [x + 0.11, 1.55, -0.7], 0.018, structure);
    const headrest = new THREE.Mesh(
      new THREE.CapsuleGeometry(0.18, 0.16, 7, 18),
      leather,
    );
    headrest.scale.set(1.25, 1, 0.55);
    headrest.position.set(x, 1.62, -0.7);
    headrest.castShadow = true;
    root.add(headrest);
  });

  [-0.4, 0.4].forEach((x) => {
    makeTwinBox(THREE, root, [0.09, 0.075, 0.12], [x, 0.73, -0.04], buckleMaterial, edge);
  });
  return root;
}

function createTwinCabin(THREE, scene) {
  const cabin = new THREE.Group();
  const trim = new THREE.MeshStandardMaterial({
    color: 0x25343a,
    roughness: 0.6,
    metalness: 0.2,
    transparent: true,
    opacity: 0.7,
    depthWrite: false,
  });
  const softTrim = new THREE.MeshStandardMaterial({
    color: 0x506167,
    roughness: 0.8,
    transparent: true,
    opacity: 0.5,
    depthWrite: false,
  });
  const cockpit = new THREE.MeshStandardMaterial({
    color: 0x243238,
    roughness: 0.6,
    metalness: 0.18,
  });
  const consoleTop = new THREE.MeshStandardMaterial({
    color: 0x5c6c70,
    roughness: 0.66,
    metalness: 0.12,
  });
  const accent = new THREE.MeshStandardMaterial({
    color: 0x26364c,
    emissive: 0x78efff,
    emissiveIntensity: 0.18,
    roughness: 0.22,
    metalness: 0.18,
    depthTest: false,
  });
  const ambientHousingMaterial = new THREE.MeshStandardMaterial({
    color: 0x17242c,
    roughness: 0.38,
    metalness: 0.56,
    emissive: 0x08141a,
    emissiveIntensity: 0.18,
  });
  const ambientMeshes = [];
  const invisibleEdge = new THREE.LineBasicMaterial({ transparent: true, opacity: 0 });

  const shellMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x84adb7,
    roughness: 0.18,
    metalness: 0.1,
    transmission: 0.48,
    transparent: true,
    opacity: 0.17,
    depthWrite: false,
    side: THREE.DoubleSide,
    clearcoat: 0.9,
    clearcoatRoughness: 0.18,
  });
  const glassMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x6f9eae,
    roughness: 0.06,
    transmission: 0.86,
    transparent: true,
    opacity: 0.22,
    depthWrite: false,
    side: THREE.DoubleSide,
  });
  const shellEdge = new THREE.LineBasicMaterial({
    color: 0x456975,
    transparent: true,
    opacity: 0.56,
  });
  const roofEntityEdge = new THREE.LineBasicMaterial({
    color: 0xbfd5ff,
    transparent: true,
    opacity: 1,
    depthTest: false,
  });
  const ventEntityEdge = new THREE.LineBasicMaterial({
    color: 0x9eeaff,
    transparent: true,
    opacity: 1,
    depthTest: false,
  });

  const bodyShell = makeTwinPanel(
    THREE,
    cabin,
    makeVehicleProfileShape(THREE),
    3.16,
    [0, 0, 0],
    [0, -Math.PI / 2, 0],
    shellMaterial,
    shellEdge,
  );
  bodyShell.castShadow = false;
  bodyShell.receiveShadow = false;
  bodyShell.renderOrder = 2;

  const greenhouseMaterial = glassMaterial.clone();
  greenhouseMaterial.color.setHex(0x769ead);
  greenhouseMaterial.opacity = 0.12;
  const greenhouse = makeTwinPanel(
    THREE,
    cabin,
    makeVehicleGreenhouseShape(THREE),
    2.64,
    [0, 0, 0],
    [0, -Math.PI / 2, 0],
    greenhouseMaterial,
    shellEdge,
  );
  greenhouse.castShadow = false;
  greenhouse.renderOrder = 3;

  const bodyPanelMaterial = shellMaterial.clone();
  bodyPanelMaterial.color.setHex(0x6f9da8);
  bodyPanelMaterial.transmission = 0.34;
  bodyPanelMaterial.opacity = 0.3;
  const exteriorTrim = new THREE.MeshStandardMaterial({
    color: 0x1e2a2f,
    roughness: 0.52,
    metalness: 0.3,
  });
  const hood = makeTwinPanel(
    THREE,
    cabin,
    makeRoundedPanelShape(THREE, 2.68, 1.44, 0.18),
    0.05,
    [0, 1.43, 2.88],
    [-Math.PI / 2 + 0.1, 0, 0],
    bodyPanelMaterial,
    shellEdge,
  );
  hood.castShadow = false;
  hood.renderOrder = 3;
  makeTwinBox(THREE, cabin, [2.82, 0.42, 0.14], [0, 0.57, 3.57], bodyPanelMaterial, invisibleEdge);
  makeTwinBox(THREE, cabin, [2.82, 0.38, 0.14], [0, 0.54, -3.55], bodyPanelMaterial, invisibleEdge);
  makeTwinBox(THREE, cabin, [1.1, 0.18, 0.055], [0, 0.61, 3.655], exteriorTrim, invisibleEdge);
  makeTwinBox(THREE, cabin, [0.68, 0.055, 0.035], [0, 0.82, -3.635], exteriorTrim, invisibleEdge);
  for (const side of [-1, 1]) {
    makeTwinBox(THREE, cabin, [0.12, 0.2, 2.88], [side * 1.5, 0.34, 0.02], bodyPanelMaterial, shellEdge);
    makeCabinBeam(THREE, cabin, [side * 1.615, 1.3, 1.82], [side * 1.615, 1.3, -2.56], 0.012, exteriorTrim);
    makeCabinBeam(THREE, cabin, [side * 1.62, 0.4, 0.18], [side * 1.62, 1.29, 0.18], 0.01, exteriorTrim);
    makeCabinBeam(THREE, cabin, [side * 1.62, 0.38, -1.48], [side * 1.62, 1.29, -1.48], 0.01, exteriorTrim);
    makeTwinBox(THREE, cabin, [0.035, 0.035, 0.26], [side * 1.65, 1.18, 0.58], exteriorTrim, invisibleEdge);
    makeTwinBox(THREE, cabin, [0.035, 0.035, 0.26], [side * 1.65, 1.18, -1.2], exteriorTrim, invisibleEdge);

    const mirror = new THREE.Mesh(new THREE.SphereGeometry(0.18, 18, 12), bodyPanelMaterial);
    mirror.scale.set(0.56, 0.68, 1.24);
    mirror.position.set(side * 1.76, 1.48, 1.3);
    mirror.castShadow = true;
    cabin.add(mirror);
    makeCabinBeam(THREE, cabin, [side * 1.52, 1.4, 1.31], [side * 1.68, 1.46, 1.3], 0.025, exteriorTrim);
  }

  [-1, 1].forEach((side) => {
    const sideGlass = makeTwinPanel(
      THREE,
      cabin,
      makeVehicleSideGlassShape(THREE),
      0.025,
      [side * 1.335, 0, 0],
      [0, -Math.PI / 2, 0],
      glassMaterial,
      shellEdge,
    );
    sideGlass.castShadow = false;
    sideGlass.renderOrder = 4;
  });
  const windshield = makeTwinBox(
    THREE,
    cabin,
    [2.48, 1.43, 0.035],
    [0, 1.88, 1.57],
    glassMaterial,
    shellEdge,
  );
  windshield.rotation.x = -0.49;
  windshield.castShadow = false;
  windshield.renderOrder = 4;
  const rearGlass = makeTwinBox(
    THREE,
    cabin,
    [2.38, 1.28, 0.035],
    [0, 1.88, -2.26],
    glassMaterial,
    shellEdge,
  );
  rearGlass.rotation.x = 0.6;
  rearGlass.castShadow = false;
  rearGlass.renderOrder = 4;

  const roofGlassMaterial = glassMaterial.clone();
  roofGlassMaterial.color.setHex(0x173778);
  roofGlassMaterial.emissive.setHex(0x153b82);
  roofGlassMaterial.emissiveIntensity = 0.46;
  roofGlassMaterial.transmission = 0;
  roofGlassMaterial.opacity = 0.98;
  roofGlassMaterial.depthWrite = true;
  const roofGlass = makeTwinPanel(
    THREE,
    cabin,
    makeRoundedPanelShape(THREE, 1.08, 1.96, 0.16),
    0.038,
    [0, 2.43, -0.61],
    [-Math.PI / 2, 0, 0],
    roofGlassMaterial,
    roofEntityEdge,
  );
  roofGlass.castShadow = false;
  roofGlass.renderOrder = 7;
  const roofFrameMaterial = new THREE.MeshStandardMaterial({
    color: 0x94bfff,
    emissive: 0x326fd2,
    emissiveIntensity: 0.78,
    roughness: 0.24,
    metalness: 0.62,
    depthTest: false,
  });
  const roofMeshes = [roofGlass];
  [
    [[1.22, 0.055, 0.075], [0, 2.455, 0.405]],
    [[1.22, 0.055, 0.075], [0, 2.455, -1.625]],
    [[0.075, 0.055, 1.96], [-0.59, 2.455, -0.61]],
    [[0.075, 0.055, 1.96], [0.59, 2.455, -0.61]],
  ].forEach(([size, position]) => {
    roofMeshes.push(makeTwinBox(
      THREE,
      cabin,
      size,
      position,
      roofFrameMaterial,
      invisibleEdge,
    ));
  });
  const roofShadeMaterial = new THREE.MeshStandardMaterial({
    color: 0x5f6d71,
    roughness: 0.86,
    transparent: true,
    opacity: 0.06,
    depthWrite: false,
  });
  const roofShade = makeTwinBox(
    THREE,
    cabin,
    [1.02, 0.025, 1.88],
    [0, 2.39, -1.55],
    roofShadeMaterial,
    invisibleEdge,
  );
  roofShade.scale.z = 0.015;
  roofShade.renderOrder = 6;

  for (const side of [-1, 1]) {
    makeCabinBeam(THREE, cabin, [side * 1.47, 1.25, 1.9], [side * 1.25, 2.51, 1.19], 0.045, trim);
    makeCabinBeam(THREE, cabin, [side * 1.5, 1.25, -2.55], [side * 1.25, 2.48, -1.78], 0.05, trim);
    makeCabinBeam(THREE, cabin, [side * 1.56, 1.25, -0.32], [side * 1.34, 2.54, -0.32], 0.045, trim);
    makeCabinBeam(THREE, cabin, [side * 1.24, 2.57, 1.27], [side * 1.24, 2.57, -1.84], 0.045, trim);
  }
  makeCabinBeam(THREE, cabin, [-1.23, 2.58, 1.3], [1.23, 2.58, 1.3], 0.045, trim);
  makeCabinBeam(THREE, cabin, [-1.23, 2.58, -1.9], [1.23, 2.58, -1.9], 0.045, trim);

  const cabinFloor = makeTwinBox(
    THREE,
    cabin,
    [2.86, 0.08, 5.45],
    [0, 0.13, -0.05],
    new THREE.MeshStandardMaterial({ color: 0x2b393e, roughness: 0.92, transparent: true, opacity: 0.5 }),
    invisibleEdge,
  );
  cabinFloor.receiveShadow = true;

  for (const side of [-1, 1]) {
    makeTwinBox(THREE, cabin, [0.065, 0.62, 3.34], [side * 1.46, 0.67, -0.18], softTrim, invisibleEdge);
    makeCabinBeam(THREE, cabin, [side * 1.415, 1.02, 1.3], [side * 1.415, 1.02, -1.76], 0.012, trim);
  }

  makeTwinBox(THREE, cabin, [0.42, 0.36, 1.55], [0, 0.4, 0.42], cockpit, invisibleEdge);
  makeTwinBox(THREE, cabin, [0.38, 0.035, 1.28], [0, 0.6, 0.4], consoleTop, invisibleEdge);

  const dashboard = new THREE.Mesh(new THREE.CapsuleGeometry(0.13, 2.55, 7, 28), softTrim);
  dashboard.rotation.z = Math.PI / 2;
  dashboard.position.set(0, 1.38, 1.63);
  dashboard.scale.z = 1.5;
  dashboard.castShadow = true;
  cabin.add(dashboard);
  const gloveboxLightHousing = makeTwinBox(
    THREE,
    cabin,
    [1.18, 0.135, 0.075],
    [-0.75, 1.265, 1.43],
    ambientHousingMaterial,
    invisibleEdge,
  );
  ambientMeshes.push(gloveboxLightHousing);
  for (let index = 0; index < 9; index += 1) {
    const lightSegment = makeTwinBox(
      THREE,
      cabin,
      [0.09, 0.042, 0.028],
      [-1.21 + index * 0.115, 1.315, 1.385],
      accent,
      invisibleEdge,
    );
    lightSegment.userData.twinRole = "passenger_glovebox_ambient_light";
    ambientMeshes.push(lightSegment);
  }
  makeTwinBox(THREE, cabin, [0.54, 0.3, 0.055], [0.82, 1.62, 1.49], cockpit, invisibleEdge);

  const steeringWheel = new THREE.Group();
  const wheel = new THREE.Mesh(new THREE.TorusGeometry(0.27, 0.036, 10, 36), cockpit);
  steeringWheel.add(wheel);
  makeTwinBox(THREE, steeringWheel, [0.035, 0.22, 0.028], [0, -0.1, 0], cockpit, invisibleEdge);
  makeTwinBox(THREE, steeringWheel, [0.23, 0.035, 0.028], [0, -0.02, 0], cockpit, invisibleEdge);
  steeringWheel.position.set(0.82, 1.48, 1.24);
  steeringWheel.rotation.x = -0.34;
  cabin.add(steeringWheel);
  makeCabinBeam(THREE, cabin, [0.82, 1.43, 1.27], [0.82, 1.34, 1.57], 0.024, cockpit);

  const tireMaterial = new THREE.MeshStandardMaterial({
    color: 0x172126,
    roughness: 0.92,
    metalness: 0.05,
  });
  const rimMaterial = new THREE.MeshStandardMaterial({
    color: 0x798a8f,
    roughness: 0.38,
    metalness: 0.72,
  });
  [-1, 1].forEach((side) => {
    [-2.25, 2.35].forEach((z) => {
      const tire = new THREE.Mesh(
        new THREE.TorusGeometry(0.53, 0.15, 14, 32),
        tireMaterial,
      );
      tire.position.set(side * 1.49, 0.58, z);
      tire.rotation.y = Math.PI / 2;
      tire.castShadow = true;
      cabin.add(tire);
      const rim = new THREE.Mesh(new THREE.CylinderGeometry(0.34, 0.34, 0.11, 24), rimMaterial);
      rim.position.copy(tire.position);
      rim.rotation.z = Math.PI / 2;
      cabin.add(rim);

      const archLip = new THREE.Mesh(
        new THREE.TorusGeometry(0.69, 0.035, 8, 36, Math.PI),
        bodyPanelMaterial,
      );
      archLip.position.set(side * 1.615, 0.58, z);
      archLip.rotation.y = Math.PI / 2;
      archLip.castShadow = true;
      cabin.add(archLip);

      const spokeX = side * 1.555;
      for (let spoke = 0; spoke < 5; spoke += 1) {
        const angle = spoke * Math.PI * 2 / 5;
        makeCabinBeam(
          THREE,
          cabin,
          [spokeX, 0.58, z],
          [spokeX, 0.58 + Math.cos(angle) * 0.27, z + Math.sin(angle) * 0.27],
          0.022,
          rimMaterial,
        );
      }
      const hub = new THREE.Mesh(new THREE.SphereGeometry(0.085, 12, 8), exteriorTrim);
      hub.position.set(spokeX, 0.58, z);
      hub.scale.x = 0.45;
      cabin.add(hub);
    });
  });

  const lampMaterial = new THREE.MeshStandardMaterial({
    color: 0x697b80,
    emissive: 0x000000,
    emissiveIntensity: 0,
    roughness: 0.56,
  });
  const rearLampMaterial = new THREE.MeshStandardMaterial({
    color: 0x697b80,
    emissive: 0x000000,
    emissiveIntensity: 0,
    roughness: 0.56,
  });
  for (const side of [-1, 1]) {
    const headlamp = new THREE.Mesh(new THREE.SphereGeometry(0.16, 18, 10), lampMaterial);
    headlamp.scale.set(2.6, 0.75, 0.24);
    headlamp.position.set(side * 1.03, 1.05, 3.61);
    cabin.add(headlamp);
    const rearLamp = new THREE.Mesh(new THREE.SphereGeometry(0.15, 18, 10), rearLampMaterial);
    rearLamp.scale.set(2.35, 0.7, 0.22);
    rearLamp.position.set(side * 1.08, 1.08, -3.57);
    cabin.add(rearLamp);
  }
  makeTwinBox(THREE, cabin, [1.08, 0.22, 0.035], [0, 0.72, 3.69], cockpit, invisibleEdge);

  const ventMaterials = [];
  const ventMeshes = [];
  const ventCoreMaterial = new THREE.MeshStandardMaterial({
    color: 0x07141c,
    roughness: 0.5,
    metalness: 0.34,
  });
  const ventBladeMaterial = new THREE.MeshStandardMaterial({
    color: 0xd8f2f7,
    emissive: 0x62dfff,
    emissiveIntensity: 0.48,
    roughness: 0.2,
    metalness: 0.82,
    depthTest: false,
  });
  [-1.14, -0.34, 0.34, 1.14].forEach((x) => {
    const ventMaterial = new THREE.MeshStandardMaterial({
      color: 0x176c94,
      roughness: 0.24,
      metalness: 0.55,
      emissive: 0x2ccff3,
      emissiveIntensity: 0.62,
    });
    ventMaterials.push(ventMaterial);
    const vent = makeTwinBox(
      THREE,
      cabin,
      [Math.abs(x) > 1 ? 0.47 : 0.44, 0.2, 0.135],
      [x, 1.38, 1.405],
      ventMaterial,
      ventEntityEdge,
    );
    vent.userData.twinRole = "dashboard_hvac_outlet";
    ventMeshes.push(vent);
    const coreWidth = Math.abs(x) > 1 ? 0.365 : 0.34;
    makeTwinBox(
      THREE,
      vent,
      [coreWidth, 0.12, 0.145],
      [0, 0, 0],
      ventCoreMaterial,
      invisibleEdge,
    );
    for (const bladeY of [-0.038, 0, 0.038]) {
      makeTwinBox(
        THREE,
        vent,
        [coreWidth * 0.9, 0.014, 0.025],
        [0, bladeY, -0.083],
        ventBladeMaterial,
        invisibleEdge,
      );
    }
  });
  const rearVentMaterial = new THREE.MeshStandardMaterial({
    color: 0x203741,
    roughness: 0.34,
    metalness: 0.42,
    emissive: 0x2d91b6,
    emissiveIntensity: 0.3,
  });
  ventMaterials.push(rearVentMaterial);
  [-0.1, 0.1].forEach((x) => {
    const vent = makeTwinBox(
      THREE,
      cabin,
      [0.18, 0.13, 0.065],
      [x, 0.48, -0.375],
      rearVentMaterial,
      ventEntityEdge,
    );
    ventMeshes.push(vent);
  });
  const airflow = createTwinAirflowField(THREE, cabin);

  const ambientLights = [
    new THREE.PointLight(0x74d9ff, 0, 2.2, 2),
    new THREE.PointLight(0x74d9ff, 0, 2.2, 2),
  ];
  ambientLights[0].position.set(-1.06, 1.22, 1.08);
  ambientLights[1].position.set(-0.48, 1.22, 1.08);
  ambientLights.forEach((light) => cabin.add(light));

  const fallbackExteriorMaterials = new Set([
    shellMaterial,
    greenhouseMaterial,
    bodyPanelMaterial,
    exteriorTrim,
    glassMaterial,
    tireMaterial,
    lampMaterial,
    rearLampMaterial,
  ]);
  const fallbackExteriorObjects = [];
  const fallbackInteriorMaterials = new Set([trim, softTrim, cockpit, consoleTop]);
  const fallbackInteriorObjects = [];
  const worldPosition = new THREE.Vector3();
  cabin.updateMatrixWorld(true);
  cabin.traverse((object) => {
    if (!object.isMesh) return;
    const isFallbackMaterial = fallbackExteriorMaterials.has(object.material);
    object.getWorldPosition(worldPosition);
    const isWheelDetail = (
      object.material === rimMaterial
      && Math.abs(worldPosition.z) > 1.8
    );
    if (isFallbackMaterial || isWheelDetail) fallbackExteriorObjects.push(object);
    if (fallbackInteriorMaterials.has(object.material) || object === cabinFloor) {
      fallbackInteriorObjects.push(object);
    }
  });

  scene.add(cabin);
  return {
    root: cabin,
    fallbackExteriorObjects,
    fallbackInteriorObjects,
    shellMaterial,
    glassMaterial,
    roofGlass,
    roofMeshes,
    roofGlassMaterial,
    roofShade,
    roofShadeMaterial,
    ambientMaterial: accent,
    ambientMeshes,
    ambientLights,
    ventMaterials,
    ventMeshes,
    airflow,
    colors: {
      ambientTarget: new THREE.Color(0x74d9ff),
      ambientIdle: new THREE.Color(0x17323a),
      climateTarget: new THREE.Color(0x55bdec),
      roofClear: new THREE.Color(0x1f68b6),
      roofDark: new THREE.Color(0x071b3e),
    },
    targets: {
      ambientPower: 0,
      ambientBrightness: 0,
      climateLevel: 0,
      climateTemperature: 24,
      roofTransmittance: 100,
      roofShadePosition: 0,
    },
    current: {
      ambientBrightness: 0,
      climateLevel: 0,
      roofTransmittance: 100,
      roofShadePosition: 0,
    },
    layout: {
      roofShadeCenterZ: -0.61,
      roofShadeHalfLength: 0.94,
    },
  };
}

function updateTwinVehicleVisual(systems, timestamp) {
  if (!systems) return;
  const ease = (current, target, factor = 0.08) => (
    Math.abs(target - current) < 0.002 ? target : current + (target - current) * factor
  );
  systems.current.ambientBrightness = ease(
    systems.current.ambientBrightness,
    systems.targets.ambientPower ? systems.targets.ambientBrightness : 0,
  );
  systems.current.climateLevel = ease(
    systems.current.climateLevel,
    systems.targets.climateLevel,
  );
  systems.current.roofTransmittance = ease(
    systems.current.roofTransmittance,
    systems.targets.roofTransmittance,
  );
  systems.current.roofShadePosition = ease(
    systems.current.roofShadePosition,
    systems.targets.roofShadePosition,
  );

  const ambientStrength = systems.current.ambientBrightness / 100;
  const ambientDisplayColor = systems.colors.ambientIdle.clone().lerp(
    systems.colors.ambientTarget,
    0.34 + ambientStrength * 0.66,
  );
  systems.ambientMaterial.color.lerp(ambientDisplayColor, 0.1);
  systems.ambientMaterial.emissive.lerp(systems.colors.ambientTarget, 0.1);
  systems.ambientMaterial.emissiveIntensity = 0.28 + ambientStrength * 2.15;
  systems.ambientMaterial.transparent = false;
  systems.ambientMaterial.opacity = 1;
  systems.ambientMaterial.depthWrite = true;
  systems.ambientLights.forEach((light) => {
    light.color.lerp(systems.colors.ambientTarget, 0.1);
    light.intensity = ambientStrength * 2.4;
  });

  const roofRatio = systems.current.roofTransmittance / 100;
  const roofColor = systems.colors.roofDark.clone().lerp(systems.colors.roofClear, roofRatio);
  systems.roofGlassMaterial.color.lerp(roofColor, 0.08);
  systems.roofGlassMaterial.opacity = 0.86 + (1 - roofRatio) * 0.1;
  const shadeCoverage = Math.max(0.015, systems.current.roofShadePosition / 100);
  systems.roofShade.scale.z = shadeCoverage;
  systems.roofShade.position.z = systems.layout.roofShadeCenterZ
    - (1 - shadeCoverage) * systems.layout.roofShadeHalfLength;
  systems.roofShadeMaterial.opacity = 0.08 + shadeCoverage * 0.82;

  const climateStrength = systems.current.climateLevel / 7;
  const climateColor = systems.targets.climateTemperature < 24
    ? 0x55bdec
    : systems.targets.climateTemperature > 24
      ? 0xffa05d
      : 0x72d1d0;
  systems.colors.climateTarget.setHex(climateColor);
  systems.airflow.level = ease(systems.airflow.level, climateStrength, 0.1);
  systems.airflow.material.color.lerp(systems.colors.climateTarget, 0.12);
  systems.airflow.material.opacity = systems.airflow.level * 0.92;
  systems.airflow.material.size = 0.04 + systems.airflow.level * 0.055;
  systems.airflow.points.visible = systems.airflow.level > 0.01;
  systems.ventMaterials.forEach((material) => {
    material.transparent = false;
    material.opacity = 1;
    material.depthWrite = true;
    material.emissive.lerp(systems.colors.climateTarget, 0.12);
    material.emissiveIntensity = 0.3 + systems.airflow.level * 2;
  });
  const speed = 0.00018 + systems.airflow.level * 0.00042;
  systems.airflow.seeds.forEach((seed, index) => {
    const progress = (timestamp * speed + seed) % 1;
    const lane = index % 8;
    const offset = index * 3;
    systems.airflow.positions[offset] = -1.22 + lane * 0.13 + Math.sin(progress * 9 + index) * 0.035;
    systems.airflow.positions[offset + 1] = 1.35 - progress * 0.5 + Math.sin(progress * Math.PI) * 0.13;
    systems.airflow.positions[offset + 2] = 1.38 - progress * 1.68;
  });
  systems.airflow.attribute.needsUpdate = true;
}

function makeTwinPanel(THREE, parent, shape, depth, position, rotation, material, edgeMaterial) {
  const geometry = new THREE.ExtrudeGeometry(shape, {
    depth,
    steps: 1,
    curveSegments: 18,
    bevelEnabled: true,
    bevelSegments: 4,
    bevelSize: 0.045,
    bevelThickness: 0.04,
  });
  geometry.translate(0, 0, -depth / 2);
  geometry.computeVertexNormals();
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(...position);
  mesh.rotation.set(...rotation);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geometry, 48), edgeMaterial);
  mesh.add(edges);
  parent.add(mesh);
  return mesh;
}

function makeBackrestShape(THREE, inset = 0) {
  const shape = new THREE.Shape();
  const half = 0.7 - inset;
  shape.moveTo(-0.52 + inset, 0);
  shape.quadraticCurveTo(-half, 0.08, -half, 0.34);
  shape.lineTo(-half + 0.035, 1.28 - inset);
  shape.quadraticCurveTo(-half + 0.06, 1.52 - inset, -0.46 + inset, 1.65 - inset);
  shape.quadraticCurveTo(0, 1.82 - inset, 0.46 - inset, 1.65 - inset);
  shape.quadraticCurveTo(half - 0.06, 1.52 - inset, half - 0.035, 1.28 - inset);
  shape.lineTo(half, 0.34);
  shape.quadraticCurveTo(half, 0.08, 0.52 - inset, 0);
  shape.quadraticCurveTo(0, -0.08 + inset, -0.52 + inset, 0);
  return shape;
}

function makeCushionShape(THREE, inset = 0) {
  const shape = new THREE.Shape();
  const half = 0.69 - inset;
  shape.moveTo(-0.52 + inset, 0.61 - inset);
  shape.quadraticCurveTo(-half, 0.55 - inset, -half, 0.34);
  shape.lineTo(-half + 0.025, -0.39 + inset);
  shape.quadraticCurveTo(-half + 0.02, -0.61 + inset, -0.48 + inset, -0.68 + inset);
  shape.quadraticCurveTo(0, -0.77 + inset, 0.48 - inset, -0.68 + inset);
  shape.quadraticCurveTo(half - 0.02, -0.61 + inset, half - 0.025, -0.39 + inset);
  shape.lineTo(half, 0.34);
  shape.quadraticCurveTo(half, 0.55 - inset, 0.52 - inset, 0.61 - inset);
  shape.quadraticCurveTo(0, 0.68 - inset, -0.52 + inset, 0.61 - inset);
  return shape;
}

function makeTwinSeam(THREE, parent, points, material) {
  const geometry = new THREE.BufferGeometry().setFromPoints(
    points.map(([x, y, z]) => new THREE.Vector3(x, y, z)),
  );
  const seam = new THREE.Line(geometry, material);
  parent.add(seam);
  return seam;
}

function createTwinVentField(THREE, parent, kind) {
  const count = 12;
  const positions = new Float32Array(count * 3);
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  const material = new THREE.PointsMaterial({
    color: 0x39bdf2,
    size: 0.055,
    sizeAttenuation: true,
    transparent: true,
    opacity: 0,
    depthWrite: false,
    depthTest: false,
    blending: THREE.AdditiveBlending,
  });
  const points = new THREE.Points(geometry, material);
  points.frustumCulled = false;
  points.renderOrder = 18;
  parent.add(points);
  return {
    kind,
    points,
    positions,
    attribute: geometry.getAttribute("position"),
    material,
  };
}

function createTwinHeatPulse(THREE, parent, kind, phase) {
  const material = new THREE.MeshBasicMaterial({
    color: 0xff633f,
    transparent: true,
    opacity: 0,
    depthWrite: false,
    depthTest: false,
    side: THREE.DoubleSide,
    blending: THREE.AdditiveBlending,
  });
  const mesh = new THREE.Mesh(
    new THREE.RingGeometry(0.17, 0.205, 32),
    material,
  );
  if (kind === "backrest") {
    mesh.position.set(0, 0.88, 0.285);
    mesh.scale.set(1.8, 3, 1);
  } else {
    mesh.position.set(0, 0.205, 0.04);
    mesh.rotation.x = -Math.PI / 2;
    mesh.scale.set(1.75, 2.35, 1);
  }
  mesh.visible = false;
  mesh.renderOrder = 17;
  parent.add(mesh);
  return { mesh, material, phase, baseScale: mesh.scale.clone() };
}

function updateTwinThermalVisual(model, timestamp) {
  const smoothing = 0.075;
  ["ventilation", "heating"].forEach((feature) => {
    const delta = model.thermalTargets[feature] - model.thermalLevels[feature];
    model.thermalLevels[feature] += Math.abs(delta) < 0.002 ? delta : delta * smoothing;
  });

  const ventilation = model.thermalLevels.ventilation;
  const heating = model.thermalLevels.heating;
  const selectionFactor = model.isSelected ? 1 : 0.58;
  const targetColor = model.thermalColors.base.clone();
  targetColor.lerp(model.thermalColors.ventilation, ventilation * 0.5);
  targetColor.lerp(model.thermalColors.heating, heating * 0.6);
  model.insertMaterial.color.lerp(targetColor, 0.1);
  const targetEmissive = model.thermalColors.ventilation.clone().multiplyScalar(
    ventilation * 0.14,
  );
  targetEmissive.lerp(
    model.thermalColors.heating,
    Math.min(1, heating * 0.34),
  );
  model.insertMaterial.emissive.lerp(targetEmissive, 0.1);
  model.insertMaterial.emissiveIntensity = 0.12 + Math.max(ventilation, heating) * 0.38;

  const elapsed = timestamp * (0.0003 + ventilation * 0.00018);
  model.ventFields.forEach((field, fieldIndex) => {
    field.points.visible = ventilation > 0.015;
    field.material.opacity = ventilation * selectionFactor * 0.92;
    field.material.size = 0.045 + ventilation * 0.045;
    for (let index = 0; index < field.positions.length / 3; index += 1) {
      const progress = (elapsed + index / 12 + fieldIndex * 0.17) % 1;
      const column = (index % 3) - 1;
      const row = Math.floor(index / 3);
      const offset = index * 3;
      if (field.kind === "backrest") {
        field.positions[offset] = column * 0.25 + Math.sin(progress * Math.PI * 2 + row) * 0.025;
        field.positions[offset + 1] = 0.27 + progress * 1.28;
        field.positions[offset + 2] = 0.29 + Math.sin(progress * Math.PI) * 0.22;
      } else {
        field.positions[offset] = column * 0.25 + Math.sin(progress * Math.PI * 2 + row) * 0.025;
        field.positions[offset + 1] = 0.205 + progress * 0.36;
        field.positions[offset + 2] = -0.36 + row * 0.24 + Math.sin(progress * Math.PI) * 0.05;
      }
    }
    field.attribute.needsUpdate = true;
  });

  model.heatPulses.forEach((pulse) => {
    const progress = (timestamp * 0.00042 + pulse.phase) % 1;
    const scale = 0.78 + progress * 0.42;
    pulse.mesh.visible = heating > 0.015;
    pulse.mesh.scale.copy(pulse.baseScale).multiplyScalar(scale);
    pulse.material.opacity = heating * selectionFactor * (1 - progress) * 0.38;
  });
}

function createTwinSeat(THREE, x, accentColor) {
  const root = new THREE.Group();
  root.position.set(x, 0.14, 0.05);

  const shell = new THREE.MeshPhysicalMaterial({
    color: 0x344950,
    roughness: 0.5,
    metalness: 0.01,
    clearcoat: 0.16,
    clearcoatRoughness: 0.72,
  });
  const insert = new THREE.MeshPhysicalMaterial({
    color: 0x9fb1b2,
    roughness: 0.68,
    metalness: 0,
    clearcoat: 0.08,
  });
  const thermalInsert = insert.clone();
  const bolster = new THREE.MeshStandardMaterial({ color: 0x52686f, roughness: 0.72 });
  const structure = new THREE.MeshStandardMaterial({ color: 0x26343a, roughness: 0.64, metalness: 0.32 });
  const rail = new THREE.MeshStandardMaterial({ color: 0x65757a, roughness: 0.45, metalness: 0.7 });
  const edge = new THREE.LineBasicMaterial({ color: 0x182529, transparent: true, opacity: 0.34 });
  const seam = new THREE.LineBasicMaterial({ color: accentColor, transparent: true, opacity: 0.88 });
  const trackedMaterials = [shell, insert, thermalInsert, bolster];

  makeTwinBox(THREE, root, [0.11, 0.08, 2.65], [-0.48, 0.12, 0], rail, edge);
  makeTwinBox(THREE, root, [0.11, 0.08, 2.65], [0.48, 0.12, 0], rail, edge);
  makeTwinBox(THREE, root, [1.15, 0.07, 0.13], [0, 0.15, -0.92], structure, edge);
  makeTwinBox(THREE, root, [1.15, 0.07, 0.13], [0, 0.15, 0.92], structure, edge);

  const slide = new THREE.Group();
  root.add(slide);
  const base = new THREE.Mesh(new THREE.CapsuleGeometry(0.47, 0.5, 6, 18), structure);
  base.rotation.x = Math.PI / 2;
  base.scale.set(1.42, 1, 0.55);
  base.position.set(0, 0.34, -0.02);
  base.castShadow = true;
  base.receiveShadow = true;
  slide.add(base);

  const cushionPivot = new THREE.Group();
  cushionPivot.position.set(0, 0.57, 0.06);
  slide.add(cushionPivot);
  makeTwinPanel(
    THREE,
    cushionPivot,
    makeCushionShape(THREE),
    0.22,
    [0, 0, 0.08],
    [-Math.PI / 2, 0, 0],
    shell,
    edge,
  );
  makeTwinPanel(
    THREE,
    cushionPivot,
    makeCushionShape(THREE, 0.16),
    0.055,
    [0, 0.145, 0.03],
    [-Math.PI / 2, 0, 0],
    thermalInsert,
    edge,
  );
  for (const side of [-1, 1]) {
    const wing = new THREE.Mesh(new THREE.CapsuleGeometry(0.105, 0.86, 5, 12), bolster);
    wing.rotation.x = Math.PI / 2;
    wing.position.set(side * 0.61, 0.17, 0.08);
    wing.castShadow = true;
    cushionPivot.add(wing);
  }
  makeTwinSeam(THREE, cushionPivot, [[-0.28, 0.181, 0.5], [-0.22, 0.181, 0.08], [-0.28, 0.181, -0.42]], seam);
  makeTwinSeam(THREE, cushionPivot, [[0.28, 0.181, 0.5], [0.22, 0.181, 0.08], [0.28, 0.181, -0.42]], seam);
  const cushionVentField = createTwinVentField(THREE, cushionPivot, "cushion");

  const backrestPivot = new THREE.Group();
  backrestPivot.position.set(0, 0.62, -0.5);
  slide.add(backrestPivot);
  makeTwinPanel(THREE, backrestPivot, makeBackrestShape(THREE), 0.3, [0, 0, 0], [0, 0, 0], shell, edge);
  makeTwinPanel(THREE, backrestPivot, makeBackrestShape(THREE, 0.16), 0.07, [0, 0.04, 0.19], [0, 0, 0], thermalInsert, edge);
  for (const side of [-1, 1]) {
    const wing = new THREE.Mesh(new THREE.CapsuleGeometry(0.115, 1.2, 6, 14), bolster);
    wing.position.set(side * 0.61, 0.78, 0.18);
    wing.scale.set(1, 1, 0.72);
    wing.castShadow = true;
    backrestPivot.add(wing);
  }
  makeTwinSeam(THREE, backrestPivot, [[-0.28, 0.2, 0.232], [-0.22, 0.83, 0.232], [-0.32, 1.46, 0.232]], seam);
  makeTwinSeam(THREE, backrestPivot, [[0.28, 0.2, 0.232], [0.22, 0.83, 0.232], [0.32, 1.46, 0.232]], seam);
  makeTwinSeam(THREE, backrestPivot, [[-0.32, 0.86, 0.234], [0, 0.78, 0.234], [0.32, 0.86, 0.234]], seam);
  const backrestVentField = createTwinVentField(THREE, backrestPivot, "backrest");
  const heatPulses = [
    createTwinHeatPulse(THREE, cushionPivot, "cushion", 0),
    createTwinHeatPulse(THREE, cushionPivot, "cushion", 0.5),
    createTwinHeatPulse(THREE, backrestPivot, "backrest", 0.18),
    createTwinHeatPulse(THREE, backrestPivot, "backrest", 0.68),
  ];

  makeTwinBox(THREE, backrestPivot, [0.045, 0.42, 0.045], [-0.24, 1.74, 0], rail, edge);
  makeTwinBox(THREE, backrestPivot, [0.045, 0.42, 0.045], [0.24, 1.74, 0], rail, edge);
  const headrest = new THREE.Mesh(new THREE.CapsuleGeometry(0.31, 0.3, 8, 18), shell);
  headrest.scale.set(1.35, 1, 0.5);
  headrest.position.set(0, 1.98, 0.01);
  headrest.castShadow = true;
  backrestPivot.add(headrest);
  const headrestInsert = new THREE.Mesh(new THREE.CapsuleGeometry(0.245, 0.23, 8, 18), insert);
  headrestInsert.scale.set(1.32, 1, 0.28);
  headrestInsert.position.set(0, 1.98, 0.18);
  headrestInsert.castShadow = true;
  backrestPivot.add(headrestInsert);

  const legrestPivot = new THREE.Group();
  legrestPivot.position.set(0, 0.64, 0.7);
  slide.add(legrestPivot);
  const legrestExtension = new THREE.Group();
  legrestPivot.add(legrestExtension);
  makeTwinPanel(
    THREE,
    legrestExtension,
    makeCushionShape(THREE, 0.08),
    0.18,
    [0, 0, 0.36],
    [-Math.PI / 2, 0, 0],
    shell,
    edge,
  ).scale.set(0.9, 0.72, 0.54);
  makeTwinPanel(
    THREE,
    legrestExtension,
    makeCushionShape(THREE, 0.2),
    0.045,
    [0, 0.12, 0.4],
    [-Math.PI / 2, 0, 0],
    insert,
    edge,
  ).scale.set(0.92, 0.74, 0.56);

  const outerSide = Math.sign(x);
  const anchors = {};
  const addAnchor = (name, parent, position) => {
    const anchor = new THREE.Object3D();
    anchor.position.set(...position);
    parent.add(anchor);
    anchors[name] = anchor;
  };
  addAnchor("longitudinal", slide, [outerSide * 0.84, -0.26, -0.9]);
  addAnchor("cushion_tilt", cushionPivot, [outerSide * 0.68, 0.2, 0.28]);
  addAnchor("backrest_recline", backrestPivot, [outerSide * 0.7, 1.28, 0.2]);
  addAnchor("legrest_height", legrestExtension, [outerSide * 0.7, 0.08, 0.58]);
  addAnchor("legrest_extension", legrestExtension, [outerSide * 0.7, 0.1, 0.82]);
  addAnchor("backrest_included_angle", slide, [outerSide * 0.83, 0.62, -0.5]);
  addAnchor("legrest_included_angle", slide, [-outerSide * 0.7, 0.51, 0.7]);
  const angleGuides = {
    backrest_recline: createTwinAngleGuide(THREE, slide, accentColor),
    legrest_height: createTwinAngleGuide(THREE, slide, accentColor),
  };
  const defaultAngles = {
    backrest_recline: twinAngleForPosition(
      "backrest_recline",
      TWIN_DEFAULT_POSITIONS.backrest_recline,
    ),
    legrest_height: twinAngleForPosition(
      "legrest_height",
      TWIN_DEFAULT_POSITIONS.legrest_height,
    ),
  };

  return {
    root,
    slide,
    cushionPivot,
    backrestPivot,
    legrestPivot,
    legrestExtension,
    anchors,
    angleGuides,
    outerSide,
    trackedMaterials,
    materials: {
      shell,
      insert,
      thermalInsert,
      bolster,
      structure,
      rail,
      edge,
      seam,
    },
    insertMaterial: thermalInsert,
    isSelected: false,
    thermalTargets: { ventilation: 0, heating: 0 },
    thermalLevels: { ventilation: 0, heating: 0 },
    thermalColors: {
      base: new THREE.Color(0x9fb1b2),
      ventilation: new THREE.Color(0x4b93b7),
      heating: new THREE.Color(0xd05f43),
    },
    ventFields: [cushionVentField, backrestVentField],
    heatPulses,
    positions: { ...TWIN_DEFAULT_POSITIONS },
    targets: { ...TWIN_DEFAULT_POSITIONS },
    angles: { ...defaultAngles },
    angleTargets: { ...defaultAngles },
  };
}

function configureFixedTwinSeat(THREE, model, position, role) {
  const cushionAngle = 6.5;
  const backrestIncludedAngle = 104;
  const legrestIncludedAngle = 95;
  model.root.position.set(...position);
  model.root.scale.setScalar(0.84);
  model.root.userData.twinRole = role;
  model.slide.position.z = 0;
  model.cushionPivot.rotation.x = THREE.MathUtils.degToRad(-cushionAngle);
  model.backrestPivot.rotation.x = (
    model.cushionPivot.rotation.x
    - THREE.MathUtils.degToRad(backrestIncludedAngle - 90)
  );
  model.legrestPivot.rotation.x = THREE.MathUtils.degToRad(
    180 - cushionAngle - legrestIncludedAngle,
  );
  model.legrestExtension.position.z = 0;
  Object.values(model.angleGuides).forEach((guide) => {
    guide.group.visible = false;
  });
  model.ventFields.forEach((field) => {
    field.points.visible = false;
  });
  model.heatPulses.forEach((pulse) => {
    pulse.mesh.visible = false;
  });
  return model;
}

function setTwinSelection(selected) {
  const twin = state.seatTwin;
  if (!twin) return;
  const focusedSeat = "passenger";
  twin.selected = focusedSeat;
  $("#seatTwin").dataset.selectedSeat = focusedSeat;
  $$(".twin-seat-button").forEach((button) => {
    button.classList.toggle("active", button.dataset.twinSeat === focusedSeat);
  });
  Object.entries(twin.models).forEach(([seat, model]) => {
    const isSelected = seat === focusedSeat;
    model.isSelected = isSelected;
    Object.entries(model.angleGuides).forEach(([axis, guide]) => {
      guide.group.visible = (
        isSelected
        && twin.explicitAngleTargets[focusedSeat]?.[axis] != null
      );
    });
    model.trackedMaterials.forEach((material) => {
      material.transparent = false;
      material.opacity = 1;
      material.depthWrite = true;
      material.depthTest = true;
      material.needsUpdate = true;
    });
  });
  twin.view.targetX = 0;
  twin.view.yaw = -0.62;
  renderTwinReadout();
}

function renderTwinCalloutValues(device) {
  const value = (axis, fallback) => Number(device?.position?.[axis]?.position_pct ?? fallback);
  const angle = (axis, fallbackPosition) => Number(
    device?.position?.[axis]?.angle_deg
    ?? twinAngleForPosition(axis, value(axis, fallbackPosition)),
  );
  const longitudinal = value("longitudinal", 50);
  const cushion = value("cushion_tilt", 50);
  const backrest = value("backrest_recline", 20);
  const legrest = value("legrest_height", 0);
  const extension = value("legrest_extension", 0);
  const postureAngles = twinPostureAngles(device);
  const explicitAngles = state.seatTwin?.explicitAngleTargets[
    state.seatTwin.selected
  ] || {};
  const backrestEstimated = isEstimatedMotion(device, "backrest_recline");
  const legrestEstimated = isEstimatedMotion(device, "legrest_height");
  const formatAngle = (number) => (
    Number.isInteger(number) ? String(number) : number.toFixed(1)
  );
  const values = {
    longitudinal: [`${longitudinal}%`, longitudinal < 45 ? "后移区" : longitudinal > 55 ? "前移区" : "中位区"],
    cushion_tilt: [`${formatAngle(postureAngles.cushion_tilt)}°`, `${cushion}%`],
    backrest_recline: [
      `${backrestEstimated ? "≈" : ""}${formatAngle(postureAngles.backrest_recline)}°`,
      `${backrestEstimated ? "估算 " : ""}${backrest}% · 相对竖直`,
    ],
    legrest_height: [
      `${legrestEstimated ? "≈" : ""}${formatAngle(postureAngles.legrest_height)}°`,
      `${legrestEstimated ? "估算 " : ""}${legrest}% · 相对地板`,
    ],
    legrest_extension: [`${extension}%`, "伸缩行程"],
    backrest_included_angle: [
      `${backrestEstimated ? "≈" : ""}${formatAngle(explicitAngles.backrest_recline ?? angle("backrest_recline", 20))}°`,
      backrestEstimated ? "Hall 已确认 · 绝对位置未标定" : "本轮指定夹角",
    ],
    legrest_included_angle: [
      `${legrestEstimated ? "≈" : ""}${formatAngle(explicitAngles.legrest_height ?? angle("legrest_height", 0))}°`,
      legrestEstimated ? "Hall 已确认 · 绝对位置未标定" : "本轮指定夹角",
    ],
  };
  Object.entries(values).forEach(([axis, [primary, secondary]]) => {
    const callout = $(`[data-callout="${axis}"]`);
    $("b", callout).textContent = primary;
    $("small", callout).textContent = secondary;
  });
}

function renderTwinReadout() {
  const twin = state.seatTwin;
  if (!twin) return;
  const seat = twin.selected;
  const device = twin.actuatorState[seat];
  $("#twinSeatName").textContent = seat === "driver" ? "主驾" : "副驾";
  $("#twinSeatZone").textContent = seat === "driver" ? "front_left" : "front_right";
  const postureAngles = twinPostureAngles(device);
  Object.entries(TWIN_DEFAULT_POSITIONS).forEach(([axis, fallback]) => {
    const motion = device?.position?.[axis];
    const position = Number(motion?.position_pct ?? fallback);
    const postureAngle = postureAngles[axis];
    const estimatedPrefix = isEstimatedMotion(device, axis) ? "≈" : "";
    const row = $(`[data-twin-axis="${axis}"]`);
    $("b", row).textContent = postureAngle == null
      ? `${estimatedPrefix}${position}%`
      : `${estimatedPrefix}${position}% · ${Number(postureAngle).toFixed(Number.isInteger(Number(postureAngle)) ? 0 : 1)}°`;
    row.style.setProperty("--value", `${Math.max(0, Math.min(100, position))}%`);
    row.classList.toggle("fault", Boolean(device?.position?.[axis]?.fault));
  });
  ["ventilation", "heating"].forEach((feature) => {
    const value = device?.[feature] || { state: "off", level: 0 };
    const item = $(`[data-twin-function="${feature}"]`);
    const enabled = value.state === "on";
    const level = enabled ? Math.max(1, Math.min(3, Number(value.level) || 1)) : 0;
    item.classList.toggle("on", enabled);
    item.dataset.level = String(level);
    $("b", item).textContent = enabled ? `${level}档` : "关闭";
  });
  renderTwinCalloutValues(device);
}

function updateTwinExplicitAngles(result) {
  const twin = state.seatTwin;
  if (!twin) return;
  const targets = { driver: {}, passenger: {} };
  const requestedSeats = new Set();
  const capabilityAxes = {
    "seat.set_backrest_recline": "backrest_recline",
    "seat.set_legrest_height": "legrest_height",
  };
  if (["succeeded", "partially_succeeded"].includes(result.status)) {
    (result.model_requests || []).forEach((request) => {
      const axis = capabilityAxes[request.capability];
      const target = request.target_scope;
      if (targets[target]) requestedSeats.add(target);
      if (!axis || !targets[target]) return;
      const parameter = (request.parameters || []).find(
        (item) => item.name === "angle_deg" && Number.isFinite(Number(item.value)),
      );
      if (parameter) targets[target][axis] = Number(parameter.value);
    });
  }
  twin.explicitAngleTargets = targets;
  setTwinSelection("passenger");
}

function updateSeatTwin(actuatorState) {
  const twin = state.seatTwin;
  if (!twin || !actuatorState) return;
  twin.actuatorState = actuatorState;
  Object.entries(twin.models).forEach(([seat, model]) => {
    Object.keys(TWIN_DEFAULT_POSITIONS).forEach((axis) => {
      const motion = actuatorState[seat]?.position?.[axis];
      const value = motion?.position_pct;
      if (Number.isFinite(Number(value))) model.targets[axis] = Number(value);
      if (TWIN_ANGLE_RANGES[axis]) {
        const angle = motion?.angle_deg ?? twinAngleForPosition(axis, value);
        if (Number.isFinite(Number(angle))) model.angleTargets[axis] = Number(angle);
      }
    });
    ["ventilation", "heating"].forEach((feature) => {
      const value = actuatorState[seat]?.[feature];
      const enabled = value?.state === "on";
      const level = enabled ? Math.max(1, Math.min(3, Number(value.level) || 1)) : 0;
      model.thermalTargets[feature] = level / 3;
    });
  });
  renderTwinReadout();
}

const REFERENCE_VEHICLE_ROOT = "/assets/models/byd-tang/";
const REFERENCE_VEHICLE_URL = `${REFERENCE_VEHICLE_ROOT}byd-tang-2024.fbx`;

function referenceMaterialDescriptor(material) {
  const textureNames = [
    "map",
    "aoMap",
    "alphaMap",
    "normalMap",
    "roughnessMap",
    "metalnessMap",
    "emissiveMap",
  ].map((key) => {
    const image = material?.[key]?.image;
    return image?.currentSrc || image?.src || image?.name || "";
  });
  return [material?.name || "", ...textureNames].join(" ").toLowerCase();
}

function classifyReferenceMaterial(material) {
  const descriptor = referenceMaterialDescriptor(material);
  if (/shadow/.test(descriptor)) return "shadow";
  if (/tyre|tire|wheel|alloy|caliper/.test(descriptor)) return "wheel";
  if (/interior|seat|dashboard|cockpit|steer/.test(descriptor)) return "interior";
  if (/(^|[_\W])(hl|tl|fl)([_\W]|$)|headlight|taillight|lamp|light|fl_emiss|rear_emiss/.test(descriptor)) return "light";
  if (/glass|window|windshield/.test(descriptor)) return "glass";
  if (/body|paint|carpaint/.test(descriptor)) return "body";
  return "detail";
}

const TWIN_OUTLINE_STYLE = {
  body: { color: 0x315d69, lineOpacity: 0.52, fillOpacity: 0.014, renderOrder: 30 },
  glass: { color: 0x78a7b2, lineOpacity: 0.18, fillOpacity: 0.006, renderOrder: 31 },
  detail: { color: 0x536f76, lineOpacity: 0.28, fillOpacity: 0.009, renderOrder: 32 },
  wheel: { color: 0x203d45, lineOpacity: 0.68, fillOpacity: 0.02, renderOrder: 33 },
  interior: { color: 0x607e83, lineOpacity: 0.24, fillOpacity: 0.008, renderOrder: 36 },
  light: { color: 0x536f76, lineOpacity: 0.28, fillOpacity: 0.009, renderOrder: 32 },
};

function addTwinMeshOutline(THREE, mesh, style, thresholdAngle = 30) {
  if (!mesh.geometry?.attributes?.position || mesh.userData.twinOutline) return null;
  const geometry = new THREE.EdgesGeometry(mesh.geometry, thresholdAngle);
  if (!geometry.getAttribute("position")?.count) {
    geometry.dispose();
    return null;
  }
  const material = new THREE.LineBasicMaterial({
    color: style.color,
    transparent: true,
    opacity: style.lineOpacity,
    depthWrite: false,
    depthTest: true,
    toneMapped: false,
  });
  const outline = new THREE.LineSegments(geometry, material);
  outline.name = `${mesh.name || "mesh"}_outline`;
  outline.renderOrder = style.renderOrder;
  outline.frustumCulled = mesh.frustumCulled;
  mesh.add(outline);
  mesh.userData.twinOutline = outline;
  return outline;
}

function applyTwinOutlineStyle(THREE, root, options = {}) {
  const style = {
    color: options.color ?? 0x52727a,
    lineOpacity: options.lineOpacity ?? 0.58,
    fillOpacity: options.fillOpacity ?? 0.014,
    renderOrder: options.renderOrder ?? 40,
  };
  const meshes = [];
  root.traverse((object) => {
    if (object.isMesh && object.visible) meshes.push(object);
  });
  meshes.forEach((mesh) => {
    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
    materials.filter(Boolean).forEach((material) => {
      material.transparent = true;
      material.opacity = Math.min(Number(material.opacity ?? 1), style.fillOpacity);
      material.depthWrite = false;
      material.side = THREE.DoubleSide;
      material.needsUpdate = true;
    });
    mesh.castShadow = false;
    mesh.receiveShadow = false;
    mesh.renderOrder = style.renderOrder - 1;
    addTwinMeshOutline(THREE, mesh, style, options.thresholdAngle ?? 28);
  });
}

function configureTwinSolidEntity(THREE, roots, options = {}) {
  const items = Array.isArray(roots) ? roots : [roots];
  items.filter(Boolean).forEach((root) => {
    root.traverse((object) => {
      if (!object.isMesh || !object.visible) return;
      if (object.userData.twinOutline) object.userData.twinOutline.visible = false;
      const materials = Array.isArray(object.material) ? object.material : [object.material];
      materials.filter(Boolean).forEach((material) => {
        material.transparent = Boolean(options.transparent);
        material.opacity = options.opacity ?? 1;
        material.depthWrite = options.depthWrite ?? !options.transparent;
        material.side = THREE.DoubleSide;
        material.needsUpdate = true;
      });
      object.castShadow = true;
      object.receiveShadow = true;
      object.renderOrder = options.renderOrder ?? 46;
    });
  });
}

function configureActivePassengerSeatStyle(model) {
  const {
    shell,
    insert,
    thermalInsert,
    bolster,
    structure,
    rail,
    edge,
    seam,
  } = model.materials;
  shell.color.setHex(0xd85b27);
  shell.roughness = 0.3;
  shell.clearcoat = 0.58;
  shell.emissive.setHex(0x64210c);
  shell.emissiveIntensity = 0.24;
  insert.color.setHex(0xffe0a3);
  insert.emissive.setHex(0x6d4315);
  insert.emissiveIntensity = 0.2;
  thermalInsert.color.setHex(0xffc866);
  thermalInsert.emissive.setHex(0x7a3d0d);
  thermalInsert.emissiveIntensity = 0.24;
  bolster.color.setHex(0xb93426);
  bolster.emissive.setHex(0x53120d);
  bolster.emissiveIntensity = 0.2;
  structure.color.setHex(0x39231d);
  structure.emissive.setHex(0x1b0d09);
  structure.emissiveIntensity = 0.14;
  rail.color.setHex(0xa8bdc5);
  rail.metalness = 0.82;
  [shell, insert, thermalInsert, bolster, structure, rail].forEach((material) => {
    material.transparent = false;
    material.opacity = 1;
    material.depthWrite = true;
    material.depthTest = true;
    material.alphaTest = 0;
    material.colorWrite = true;
    material.toneMapped = false;
    if ("transmission" in material) material.transmission = 0;
    material.needsUpdate = true;
  });
  edge.color.setHex(0xffd592);
  edge.opacity = 1;
  edge.depthTest = false;
  seam.color.setHex(0xfff1cd);
  seam.opacity = 1;
  seam.depthTest = false;
  model.thermalColors.base.setHex(0xffc866);
  model.root.traverse((object) => {
    if (!object.isLine && !object.isLineSegments) return;
    object.renderOrder = 55;
  });
}

function visibleTwinMeshBounds(THREE, root) {
  const bounds = new THREE.Box3();
  const meshBounds = new THREE.Box3();
  root.updateWorldMatrix(true, true);
  root.traverse((object) => {
    if (!object.isMesh || !object.visible || !object.geometry?.attributes?.position) return;
    if (!object.geometry.boundingBox) object.geometry.computeBoundingBox();
    meshBounds.copy(object.geometry.boundingBox).applyMatrix4(object.matrixWorld);
    bounds.union(meshBounds);
  });
  return bounds;
}

function configureReferenceVehicleModel(THREE, vehicle) {
  const materialCache = new Map();
  const report = { meshes: 0, materials: new Map(), nodes: [] };
  vehicle.traverse((object) => {
    if (object.name) report.nodes.push(object.name);
    if (!object.isMesh) return;
    report.meshes += 1;
    object.castShadow = false;
    object.receiveShadow = false;
    const sourceMaterials = Array.isArray(object.material) ? object.material : [object.material];
    const configuredMaterials = sourceMaterials.map((sourceMaterial) => {
      if (!sourceMaterial) return sourceMaterial;
      if (materialCache.has(sourceMaterial)) return materialCache.get(sourceMaterial);
      const material = sourceMaterial.clone();
      const descriptor = referenceMaterialDescriptor(material);
      const category = classifyReferenceMaterial(material);
      const key = `${category}:${material.name || "unnamed"}`;
      report.materials.set(key, (report.materials.get(key) || 0) + 1);
      if (material.map) {
        material.map.colorSpace = THREE.SRGBColorSpace;
        material.map.anisotropy = 8;
      }
      if (material.emissive) {
        material.emissive.setHex(0x000000);
        if ("emissiveIntensity" in material) material.emissiveIntensity = 0;
      }
      if (category === "glass") {
        if (material.color) material.color.setHex(0x55727b);
        material.transparent = true;
        material.opacity = 0.3;
        material.depthWrite = false;
        material.side = THREE.DoubleSide;
        object.castShadow = false;
        object.renderOrder = 12;
      } else if (category === "body") {
        if (material.color) material.color.setHex(0x829398);
        if ("shininess" in material) material.shininess = 72;
      } else if (category === "light") {
        material.map = null;
        if (material.color) material.color.setHex(0x697b80);
        if (material.emissive) material.emissive.setHex(0x000000);
        if ("emissiveIntensity" in material) material.emissiveIntensity = 0;
      } else if (category === "interior" && material.color) {
        material.color.setHex(0x6c7778);
      } else if (/lines|\badd\b/.test(descriptor) && material.color) {
        material.map = null;
        material.color.setHex(0x4c5a5d);
      } else if (/map[_ -]?[abc]/.test(descriptor) && material.color) {
        if (/chrome|metal/.test(descriptor)) material.color.setHex(0xaeb9bb);
        else if (/plastic/.test(descriptor)) material.color.setHex(0x303a3e);
        else material.color.setHex(0x7f8e91);
      } else if (/plastic|under|black/.test(descriptor) && material.color) {
        material.color.setHex(0x303a3e);
      } else if (/chrome|metal|alloy|rim/.test(descriptor) && material.color) {
        material.color.setHex(0xaeb9bb);
      }
      const outlineStyle = TWIN_OUTLINE_STYLE[category] || TWIN_OUTLINE_STYLE.detail;
      material.transparent = true;
      material.opacity = outlineStyle.fillOpacity;
      material.depthWrite = false;
      material.side = THREE.DoubleSide;
      if (material.emissive) material.emissive.setHex(0x000000);
      if ("emissiveIntensity" in material) material.emissiveIntensity = 0;
      material.needsUpdate = true;
      materialCache.set(sourceMaterial, material);
      return material;
    });
    object.material = Array.isArray(object.material) ? configuredMaterials : configuredMaterials[0];
    const categories = configuredMaterials.filter(Boolean).map(classifyReferenceMaterial);
    if (categories.length && categories.every((category) => category === "shadow")) object.visible = false;
    if (!object.visible) return;
    const categoryPriority = ["light", "interior", "wheel", "detail", "glass", "body"];
    const outlineCategory = categoryPriority.find((category) => categories.includes(category)) || "detail";
    const outlineStyle = TWIN_OUTLINE_STYLE[outlineCategory];
    object.renderOrder = outlineStyle.renderOrder - 1;
    addTwinMeshOutline(THREE, object, outlineStyle, 30);
  });
  return report;
}

function normalizeReferenceVehicle(THREE, vehicle) {
  vehicle.updateMatrixWorld(true);
  let bounds = new THREE.Box3().setFromObject(vehicle);
  let size = bounds.getSize(new THREE.Vector3());
  if (size.x > size.z) {
    vehicle.rotateY(Math.PI / 2);
    vehicle.updateMatrixWorld(true);
    bounds = new THREE.Box3().setFromObject(vehicle);
    size = bounds.getSize(new THREE.Vector3());
  }
  const scale = 7.45 / Math.max(size.x, size.z);
  vehicle.scale.multiplyScalar(scale);
  vehicle.updateMatrixWorld(true);
  bounds = new THREE.Box3().setFromObject(vehicle);
  const center = bounds.getCenter(new THREE.Vector3());
  vehicle.position.x -= center.x;
  vehicle.position.z -= center.z;
  vehicle.position.y += -0.145 - bounds.min.y;
  vehicle.updateMatrixWorld(true);
  bounds = new THREE.Box3().setFromObject(vehicle);
  return { bounds, size: bounds.getSize(new THREE.Vector3()), scale };
}

function measureReferenceDriverCushion(THREE, vehicle) {
  const interior = vehicle.getObjectByName("Interior");
  if (!interior?.isMesh || !interior.geometry?.attributes?.position) return null;
  interior.updateWorldMatrix(true, false);
  const geometry = interior.geometry.index
    ? interior.geometry.toNonIndexed()
    : interior.geometry;
  const positions = geometry.getAttribute("position");
  const centroid = new THREE.Vector3();
  const vertex = new THREE.Vector3();
  const samples = [];
  for (let offset = 0; offset < positions.count; offset += 3) {
    centroid.set(0, 0, 0);
    for (let vertexOffset = 0; vertexOffset < 3; vertexOffset += 1) {
      vertex.fromBufferAttribute(positions, offset + vertexOffset);
      vertex.applyMatrix4(interior.matrixWorld);
      centroid.add(vertex);
    }
    centroid.multiplyScalar(1 / 3);
    const insideDriverCushion = (
      centroid.x >= 0.18
      && centroid.x <= 1.18
      && centroid.y >= 0.25
      && centroid.y <= 1.15
      && centroid.z >= -0.12
      && centroid.z <= 0.98
    );
    if (insideDriverCushion) samples.push(centroid.y);
  }
  if (geometry !== interior.geometry) geometry.dispose();
  if (samples.length < 20) return null;
  samples.sort((left, right) => left - right);
  const quantile = (ratio) => samples[Math.min(
    samples.length - 1,
    Math.floor((samples.length - 1) * ratio),
  )];
  return {
    triangleCount: samples.length,
    medianY: quantile(0.5),
    upperQuartileY: quantile(0.75),
    surfaceY: quantile(0.9),
  };
}

function carveReferencePassengerSeat(THREE, vehicle) {
  const interior = vehicle.getObjectByName("Interior");
  if (!interior?.isMesh || !interior.geometry?.attributes?.position) return 0;
  interior.updateWorldMatrix(true, false);
  const source = interior.geometry.index
    ? interior.geometry.toNonIndexed()
    : interior.geometry.clone();
  const positions = source.getAttribute("position");
  const centroid = new THREE.Vector3();
  const vertex = new THREE.Vector3();
  const keptVertices = [];
  let removedTriangles = 0;
  for (let offset = 0; offset < positions.count; offset += 3) {
    centroid.set(0, 0, 0);
    for (let vertexOffset = 0; vertexOffset < 3; vertexOffset += 1) {
      vertex.fromBufferAttribute(positions, offset + vertexOffset);
      vertex.applyMatrix4(interior.matrixWorld);
      centroid.add(vertex);
    }
    centroid.multiplyScalar(1 / 3);
    const insidePassengerSeat = (
      centroid.x >= -1.15
      && centroid.x <= -0.12
      && centroid.y >= 0.05
      && centroid.y <= 2.05
      && centroid.z >= -0.92
      && centroid.z <= 1.08
    );
    if (insidePassengerSeat) {
      removedTriangles += 1;
      continue;
    }
    keptVertices.push(offset, offset + 1, offset + 2);
  }
  if (removedTriangles < 40) {
    source.dispose();
    return 0;
  }
  const carved = new THREE.BufferGeometry();
  Object.entries(source.attributes).forEach(([name, attribute]) => {
    const values = new attribute.array.constructor(keptVertices.length * attribute.itemSize);
    keptVertices.forEach((sourceIndex, targetIndex) => {
      for (let component = 0; component < attribute.itemSize; component += 1) {
        values[targetIndex * attribute.itemSize + component] = (
          attribute.array[sourceIndex * attribute.itemSize + component]
        );
      }
    });
    carved.setAttribute(
      name,
      new THREE.BufferAttribute(values, attribute.itemSize, attribute.normalized),
    );
  });
  carved.computeBoundingBox();
  carved.computeBoundingSphere();
  interior.geometry = carved;
  source.dispose();
  return removedTriangles;
}

function loadReferenceVehicleModel(THREE, scene, vehicleSystems, fallback) {
  return new Promise((resolve, reject) => {
    const FBXLoaderClass = window.FBXLoader || THREE.FBXLoader;
    if (!FBXLoaderClass) {
      reject(new Error("FBXLoader is unavailable"));
      return;
    }
    const manager = new THREE.LoadingManager();
    manager.setURLModifier((url) => {
      const cleanUrl = String(url).replaceAll("\\", "/");
      const fileName = decodeURIComponent(cleanUrl.split("/").pop() || "");
      if (!/\.(png|jpe?g)$/i.test(fileName)) return url;
      return `${REFERENCE_VEHICLE_ROOT}${encodeURIComponent(fileName)}`;
    });
    const loader = new FBXLoaderClass(manager);
    loader.setResourcePath(REFERENCE_VEHICLE_ROOT);
    loader.load(
      REFERENCE_VEHICLE_URL,
      (vehicle) => {
        const normalized = normalizeReferenceVehicle(THREE, vehicle);
        const driverCushion = measureReferenceDriverCushion(THREE, vehicle);
        const removedPassengerTriangles = carveReferencePassengerSeat(THREE, vehicle);
        const report = configureReferenceVehicleModel(THREE, vehicle);
        vehicle.name = "REFERENCE_VEHICLE_OUTLINE";
        vehicle.userData.twinRole = "reference_vehicle";
        scene.add(vehicle);
        vehicleSystems.fallbackExteriorObjects.forEach((object) => {
          object.visible = false;
        });
        vehicleSystems.fallbackInteriorObjects.forEach((object) => {
          object.visible = false;
        });
        console.info("[vehicle-twin] reference vehicle model loaded", JSON.stringify({
          meshes: report.meshes,
          size: normalized.size.toArray().map((value) => Number(value.toFixed(3))),
          removedPassengerTriangles,
          driverCushion,
        }));
        resolve({ vehicle, report, normalized, driverCushion });
      },
      (event) => {
        if (!fallback || !event.total) return;
        const progress = Math.min(99, Math.round(event.loaded / event.total * 100));
        const label = fallback.querySelector("span");
        if (label) label.textContent = `正在加载整车参考模型 · ${progress}%`;
      },
      reject,
    );
  });
}

function initSeatTwin() {
  const canvas = $("#seatTwinCanvas");
  const stage = $("#seatTwin");
  const fallback = $("#twinFallback");
  if (!canvas || !stage) return;
  if (!window.THREE) {
    fallback.classList.add("error");
    fallback.innerHTML = '<i data-lucide="triangle-alert"></i><span>3D 引擎加载失败，精确状态仍可用</span>';
    refreshIcons();
    return;
  }

  const THREE = window.THREE;
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
  if ("outputColorSpace" in renderer) renderer.outputColorSpace = THREE.SRGBColorSpace;
  else renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xe8eeec);
  scene.fog = new THREE.Fog(0xe8eeec, 12, 19);
  const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 40);
  scene.add(new THREE.HemisphereLight(0xffffff, 0x7d8b90, 2.2));
  const keyLight = new THREE.DirectionalLight(0xffffff, 3.2);
  keyLight.position.set(-4, 7, 6);
  keyLight.castShadow = true;
  keyLight.shadow.mapSize.set(1024, 1024);
  keyLight.shadow.camera.left = -6;
  keyLight.shadow.camera.right = 6;
  keyLight.shadow.camera.top = 6;
  keyLight.shadow.camera.bottom = -4;
  scene.add(keyLight);
  const fillLight = new THREE.DirectionalLight(0x9fc7d7, 1.15);
  fillLight.position.set(5, 3, -5);
  scene.add(fillLight);

  const floor = new THREE.Mesh(
    new THREE.PlaneGeometry(12, 9),
    new THREE.MeshStandardMaterial({ color: 0xdfe7e4, roughness: 0.86 }),
  );
  floor.rotation.x = -Math.PI / 2;
  floor.position.y = -0.16;
  floor.receiveShadow = true;
  scene.add(floor);
  const grid = new THREE.GridHelper(10, 20, 0xaebdb9, 0xcbd6d2);
  grid.position.y = -0.155;
  grid.material.transparent = true;
  grid.material.opacity = 0.16;
  scene.add(grid);
  const vehicleSystems = createTwinCabin(THREE, scene);
  applyTwinOutlineStyle(THREE, vehicleSystems.root, {
    color: 0x4f747c,
    lineOpacity: 0.46,
    fillOpacity: 0.012,
    renderOrder: 40,
    thresholdAngle: 30,
  });
  configureTwinSolidEntity(THREE, vehicleSystems.ventMeshes, {
    renderOrder: 52,
  });
  configureTwinSolidEntity(THREE, vehicleSystems.ambientMeshes, {
    renderOrder: 56,
  });
  configureTwinSolidEntity(THREE, vehicleSystems.roofMeshes, {
    transparent: false,
    opacity: 1,
    depthWrite: true,
    renderOrder: 54,
  });
  configureTwinSolidEntity(THREE, vehicleSystems.roofShade, {
    transparent: true,
    opacity: 0.08,
    renderOrder: 49,
  });

  const models = {
    passenger: createTwinSeat(THREE, -1.05, 0x4a78af),
  };
  configureActivePassengerSeatStyle(models.passenger);
  models.passenger.root.scale.setScalar(0.5);
  models.passenger.root.position.set(-0.62, 0.38, 0.25);
  models.passenger.root.userData.twinRole = "active_front_passenger";
  configureTwinSolidEntity(THREE, models.passenger.root, {
    renderOrder: 53,
  });
  scene.add(models.passenger.root);

  const fixedModels = {
    driver: configureFixedTwinSeat(
      THREE,
      createTwinSeat(THREE, 0.82, 0x667f84),
      [0.82, 0.18, -0.25],
      "fixed_front_driver",
    ),
    rear: createTwinRearBench(THREE),
  };
  applyTwinOutlineStyle(THREE, fixedModels.driver.root, {
    color: 0x5e7479,
    lineOpacity: 0.46,
    fillOpacity: 0.01,
    renderOrder: 41,
    thresholdAngle: 26,
  });
  applyTwinOutlineStyle(THREE, fixedModels.rear, {
    color: 0x5e7479,
    lineOpacity: 0.42,
    fillOpacity: 0.01,
    renderOrder: 41,
    thresholdAngle: 26,
  });
  scene.add(fixedModels.driver.root);
  vehicleSystems.root.add(fixedModels.rear);

  const initialDevice = () => ({
    ventilation: { state: "off", level: 0 },
    heating: { state: "off", level: 0 },
    position: Object.fromEntries(Object.entries(TWIN_DEFAULT_POSITIONS).map(([axis, position_pct]) => [axis, { position_pct, fault: false }])),
  });
  state.seatTwin = {
    renderer,
    scene,
    camera,
    models,
    fixedModels,
    vehicleSystems,
    selected: "passenger",
    actuatorState: { passenger: initialDevice() },
    explicitAngleTargets: { driver: {}, passenger: {} },
    view: { yaw: -0.62, pitch: 0.31, distance: 10.2, targetX: 0 },
    dragging: false,
    pointer: { x: 0, y: 0 },
  };

  loadReferenceVehicleModel(THREE, scene, vehicleSystems, fallback)
    .then(({ vehicle, report, normalized, driverCushion }) => {
      if (!state.seatTwin) return;
      state.seatTwin.referenceVehicle = vehicle;
      state.seatTwin.referenceReport = report;
      state.seatTwin.referenceBounds = normalized.bounds;
      fixedModels.driver.root.visible = false;
      fixedModels.rear.visible = false;
      if (driverCushion) {
        const cushionBoundsBefore = visibleTwinMeshBounds(THREE, models.passenger.cushionPivot);
        const verticalCorrection = THREE.MathUtils.clamp(
          driverCushion.surfaceY - cushionBoundsBefore.max.y,
          -0.08,
          0.42,
        );
        models.passenger.root.position.y += verticalCorrection;
        models.passenger.root.updateMatrixWorld(true);
        const cushionBoundsAfter = visibleTwinMeshBounds(THREE, models.passenger.cushionPivot);
        models.passenger.root.userData.cushionSurfaceY = cushionBoundsAfter.max.y;
        canvas.dataset.activeSeatCushionSurface = cushionBoundsAfter.max.y.toFixed(3);
        canvas.dataset.activeSeatRootY = models.passenger.root.position.y.toFixed(3);
        canvas.dataset.referenceDriverCushionSurface = driverCushion.surfaceY.toFixed(3);
        canvas.dataset.referenceDriverCushionSamples = String(driverCushion.triangleCount);
        canvas.dataset.seatCushionAligned = String(
          Math.abs(cushionBoundsAfter.max.y - driverCushion.surfaceY) < 0.025
        );
      }
      models.passenger.root.updateMatrixWorld(true);
      const activeSeatBounds = new THREE.Box3().setFromObject(models.passenger.root);
      const activeSeatSize = activeSeatBounds.getSize(new THREE.Vector3());
      const activeSeatContained = (
        normalized.bounds.containsPoint(activeSeatBounds.min)
        && normalized.bounds.containsPoint(activeSeatBounds.max)
      );
      canvas.dataset.activeSeatContained = String(activeSeatContained);
      canvas.dataset.activeSeatSize = activeSeatSize
        .toArray()
        .map((value) => value.toFixed(2))
        .join("x");
      canvas.dataset.referenceModelLoaded = "true";
      fallback.hidden = true;
    })
    .catch((error) => {
      console.error("[vehicle-twin] failed to load reference vehicle model", error);
      fallback.classList.add("error");
      fallback.innerHTML = '<i data-lucide="triangle-alert"></i><span>实车模型加载失败，已切换轻量回退模型</span>';
      refreshIcons();
      window.setTimeout(() => { fallback.hidden = true; }, 3200);
    });

  function resetView() {
    Object.assign(state.seatTwin.view, {
      yaw: -0.62,
      pitch: 0.31,
      distance: 10.2,
      targetX: 0,
    });
  }

  function resize() {
    const width = Math.max(1, canvas.clientWidth);
    const height = Math.max(1, canvas.clientHeight);
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    state.seatTwin.narrowViewport = width < 600;
  }

  new ResizeObserver(resize).observe(stage);
  resize();
  stage.addEventListener("pointerdown", (event) => {
    state.seatTwin.dragging = true;
    state.seatTwin.pointer = { x: event.clientX, y: event.clientY };
    stage.setPointerCapture(event.pointerId);
    stage.classList.add("dragging");
  });
  stage.addEventListener("pointermove", (event) => {
    const twin = state.seatTwin;
    if (!twin?.dragging) return;
    const dx = event.clientX - twin.pointer.x;
    const dy = event.clientY - twin.pointer.y;
    twin.pointer = { x: event.clientX, y: event.clientY };
    twin.view.yaw -= dx * 0.006;
    twin.view.pitch = Math.max(0.12, Math.min(0.68, twin.view.pitch + dy * 0.004));
  });
  const endDrag = () => {
    if (!state.seatTwin) return;
    state.seatTwin.dragging = false;
    stage.classList.remove("dragging");
  };
  stage.addEventListener("pointerup", endDrag);
  stage.addEventListener("pointercancel", endDrag);
  stage.addEventListener("wheel", (event) => {
    event.preventDefault();
    const twin = state.seatTwin;
    twin.view.distance = Math.max(9.4, Math.min(15.2, twin.view.distance + event.deltaY * 0.006));
  }, { passive: false });
  $("#twinReset").addEventListener("click", resetView);
  $$(".twin-seat-button").forEach((button) => button.addEventListener("click", () => setTwinSelection(button.dataset.twinSeat)));

  const degrees = THREE.MathUtils.degToRad;
  const projectedPosition = new THREE.Vector3();
  function positionTwinCallouts() {
    const twin = state.seatTwin;
    const model = twin.models[twin.selected];
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    scene.updateMatrixWorld(true);
    camera.updateMatrixWorld();
    Object.entries(model.anchors).forEach(([axis, anchor]) => {
      anchor.getWorldPosition(projectedPosition);
      projectedPosition.project(camera);
      const callout = $(`[data-callout="${axis}"]`);
      const includedAxis = {
        backrest_included_angle: "backrest_recline",
        legrest_included_angle: "legrest_height",
      }[axis];
      const requested = (
        !includedAxis
        || twin.explicitAngleTargets[twin.selected]?.[includedAxis] != null
      );
      const visible = (
        requested
        && projectedPosition.z > -1
        && projectedPosition.z < 1
      );
      callout.hidden = !visible;
      if (!visible) return;
      const anchorX = (projectedPosition.x * 0.5 + 0.5) * width;
      const anchorY = (-projectedPosition.y * 0.5 + 0.5) * height;
      const offset = {
        backrest_recline: { x: -108, y: -28 },
        cushion_tilt: { x: 106, y: -4 },
        legrest_height: { x: 112, y: 52 },
        backrest_included_angle: { x: -112, y: 42 },
        legrest_included_angle: { x: 114, y: 78 },
      }[axis] || { x: 0, y: 0 };
      const halfWidth = Math.max(46, callout.offsetWidth / 2);
      const halfHeight = Math.max(22, callout.offsetHeight / 2);
      const x = Math.max(halfWidth + 10, Math.min(width - halfWidth - 10, anchorX + offset.x));
      const y = Math.max(halfHeight + 10, Math.min(height - halfHeight - 10, anchorY + offset.y));
      callout.style.left = `${x}px`;
      callout.style.top = `${y}px`;
      const dx = anchorX - x;
      const dy = anchorY - y;
      const distance = Math.max(1, Math.hypot(dx, dy));
      const unitX = dx / distance;
      const unitY = dy / distance;
      const horizontalBoundary = Math.abs(unitX) > 0.001
        ? halfWidth / Math.abs(unitX)
        : Number.POSITIVE_INFINITY;
      const verticalBoundary = Math.abs(unitY) > 0.001
        ? halfHeight / Math.abs(unitY)
        : Number.POSITIVE_INFINITY;
      const startDistance = Math.min(distance, Math.min(horizontalBoundary, verticalBoundary) + 3);
      callout.style.setProperty("--leader-start-x", `${unitX * startDistance}px`);
      callout.style.setProperty("--leader-start-y", `${unitY * startDistance}px`);
      callout.style.setProperty("--leader-length", `${Math.max(0, distance - startDistance - 2)}px`);
      callout.style.setProperty("--leader-angle", `${Math.atan2(dy, dx)}rad`);
      callout.style.setProperty("--leader-dx", `${dx}px`);
      callout.style.setProperty("--leader-dy", `${dy}px`);
    });
  }

  function animate(timestamp = 0) {
    const twin = state.seatTwin;
    if (!twin) return;
    Object.values(twin.models).forEach((model) => {
      Object.keys(model.positions).forEach((axis) => {
        const delta = model.targets[axis] - model.positions[axis];
        model.positions[axis] += Math.abs(delta) < 0.03 ? delta : delta * 0.085;
      });
      Object.keys(model.angles).forEach((axis) => {
        const delta = model.angleTargets[axis] - model.angles[axis];
        model.angles[axis] += Math.abs(delta) < 0.03 ? delta : delta * 0.085;
      });
      model.slide.position.z = (model.positions.longitudinal - 50) * 0.012;
      const cushionAngle = 2 + model.positions.cushion_tilt * 0.09;
      model.cushionPivot.rotation.x = degrees(-cushionAngle);
      model.backrestPivot.rotation.x = (
        model.cushionPivot.rotation.x
        - degrees(model.angles.backrest_recline - 90)
      );
      model.legrestPivot.rotation.x = degrees(
        180 - cushionAngle - model.angles.legrest_height,
      );
      model.legrestExtension.position.z = model.positions.legrest_extension * 0.0022;
      updateTwinAngleGuide(
        model.angleGuides.backrest_recline,
        model.outerSide * 0.83,
        0.62,
        -0.5,
        cushionAngle,
        model.angles.backrest_recline,
        0.58,
      );
      updateTwinAngleGuide(
        model.angleGuides.legrest_height,
        -model.outerSide * 0.7,
        0.64,
        0.7,
        cushionAngle + 180,
        model.angles.legrest_height,
        0.48,
      );
      updateTwinThermalVisual(model, timestamp);
    });
    updateTwinVehicleVisual(twin.vehicleSystems, timestamp);
    const { view } = twin;
    const cameraDistance = view.distance * (twin.narrowViewport ? 1.08 : 1);
    const horizontal = Math.cos(view.pitch) * cameraDistance;
    const cameraTargetX = view.targetX;
    camera.position.set(
      cameraTargetX + Math.sin(view.yaw) * horizontal,
      0.82 + Math.sin(view.pitch) * cameraDistance,
      Math.cos(view.yaw) * horizontal,
    );
    camera.lookAt(cameraTargetX, 1.14, -0.08);
    positionTwinCallouts();
    renderer.render(scene, camera);
    if (!canvas.dataset.rendered) canvas.dataset.rendered = "true";
    window.requestAnimationFrame(animate);
  }
  setTwinSelection("passenger");
  animate();
}

function showToast(message) {
  const toast = $("#toast");
  toast.textContent = message;
  toast.classList.add("show");
  window.clearTimeout(showToast.timer);
  showToast.timer = window.setTimeout(() => toast.classList.remove("show"), 2200);
}

function selectProvider(provider) {
  state.provider = provider;
  $$(".segment[data-provider]").forEach((button) => {
    button.classList.toggle("active", button.dataset.provider === provider);
  });
}

function selectExecutionMode(mode) {
  if (mode === "hardware" && !state.runtime?.hardware?.configured) return;
  state.executionMode = mode;
  $$('[data-execution-mode]').forEach((button) => {
    button.classList.toggle("active", button.dataset.executionMode === mode);
  });
  const hardware = mode === "hardware";
  $("#approvalField").hidden = !hardware;
  $("#executionBadge").className = `status-badge ${hardware ? "" : "neutral"}`.trim();
  $("#executionBadge").innerHTML = hardware
    ? '<i data-lucide="radio-tower"></i>HIL · 真实 CAN'
    : '<i data-lucide="flask-conical"></i>DRY-RUN';
  $("#safetyTitle").textContent = hardware ? "真实台架安全门禁" : "虚拟执行边界";
  $("#safetyText").textContent = hardware
    ? "副驾座椅映射到统一实体执行器；绝对位置会实时检查板端标定，小幅相对移动可走受限定时/Hall 回读，异常会尝试 STOP_ALL。"
    : "四域 CAN 均为 dry-run，真实发送被强制关闭。";
  $("#executeStageLabel").textContent = hardware ? "台架执行" : "虚拟执行";
  $("#feedbackModeLabel").textContent = hardware
    ? "T2G BENCH · PHYSICAL CAN FEEDBACK"
    : "MATRIX-BACKED · SIMULATED FEEDBACK";
  $("#seatFeedbackModeLabel").textContent = hardware
    ? "PHYSICAL CAN FEEDBACK"
    : "SIMULATED FEEDBACK";
  refreshIcons();
}

async function loadRuntime() {
  try {
    const response = await fetch("/api/runtime", { cache: "no-store" });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    state.runtime = await response.json();
    const hardware = state.runtime.hardware || {};
    const badge = $("#modelBadge");
    const gptButton = $('[data-provider="openai"]');
    if (state.runtime.openai_available) {
      badge.classList.remove("danger");
      badge.innerHTML = `<i data-lucide="sparkles"></i>${state.runtime.openai_model}`;
      $("#providerNote").textContent = `${state.runtime.openai_model} · Responses API · 结构化输出`;
      selectProvider("openai");
    } else {
      badge.classList.add("danger");
      badge.innerHTML = '<i data-lucide="key-round"></i>GPT 未配置';
      gptButton.disabled = true;
      gptButton.title = "设置 OPENAI_API_KEY 后启用";
      $("#providerNote").textContent = "未设置 OPENAI_API_KEY，已切换为本地规则解析";
      selectProvider("local");
    }
    $("#matrixCount").textContent = `${state.runtime.matrix.messages} / ${state.runtime.matrix.signals}`;
    const hardwareButton = $("#hardwareMode");
    hardwareButton.disabled = !hardware.configured;
    const profileText = (hardware.firmware_profiles || []).join(" / ") || "未选择 profile";
    const flashText = hardware.auto_flash_enabled ? "自动烧录已启用" : "自动烧录未启用";
    $("#hardwareNote").textContent = hardware.configured
      ? `${hardware.backend} · ${hardware.bitrate / 1000} kbit/s · ${profileText} · ${flashText}`
      : `真实执行已锁定：${profileText}；请完成服务端启用、令牌、适配器和固件镜像配置`;
    $("#hardwareAliasNote").textContent = "副驾座椅 → t2g_primary_seat（统一电机、加热和通风执行器）";
    $("#autoFlashNote").textContent = hardware.auto_flash_enabled
      ? "未检测到匹配固件时，将在发送座椅控制帧前通过 IAR C-SPY 自动烧录并重新验证。"
      : "仅接受已烧录且身份匹配的统一固件；需要自动烧录时请启用服务端开关。";
    $("#hardwareBadge").className = `status-badge ${hardware.configured ? "" : "danger"}`.trim();
    $("#hardwareBadge").innerHTML = hardware.configured
      ? '<i data-lucide="shield-check"></i>硬件已配置'
      : '<i data-lucide="shield-off"></i>硬件锁定';
    $("#hardwareCoverage").textContent = hardware.configured ? "可选 · 需授权" : "已阻断";
    $("#hardwareCoverage").className = hardware.configured ? "available" : "blocked";
    selectExecutionMode("dry_run");
    refreshIcons();
  } catch (error) {
    $("#modelBadge").textContent = "运行时离线";
    $("#modelBadge").classList.add("danger");
    $("#providerNote").textContent = "无法读取后端运行状态";
    showToast(`运行时连接失败：${error.message}`);
  }
}

async function loadAuthStatus() {
  const response = await fetch("/api/auth/status", { cache: "no-store" });
  if (!response.ok) return;
  const auth = await response.json();
  if (auth.enabled && !auth.authenticated) {
    window.location.replace("/login");
    return;
  }
  $("#logoutButton").hidden = !auth.enabled;
}

async function logout() {
  await fetch("/api/auth/logout", { method: "POST" });
  window.location.replace("/login");
}

function setRunStatus(status, text) {
  const element = $("#runStatus");
  element.className = `run-status ${status}`;
  element.textContent = text;
}

function resetPipeline() {
  $$(".pipeline-step").forEach((step) => step.classList.remove("active", "succeeded", "failed"));
}

function startProgress() {
  resetPipeline();
  const steps = $$(".pipeline-step");
  let index = 0;
  steps[0].classList.add("active");
  state.progressTimer = window.setInterval(() => {
    steps[index]?.classList.remove("active");
    steps[index]?.classList.add("succeeded");
    index = Math.min(index + 1, steps.length - 1);
    steps[index]?.classList.add("active");
  }, 360);
}

function renderPipeline(events) {
  window.clearInterval(state.progressTimer);
  resetPipeline();
  const byStage = new Map(events.map((event) => [event.stage, event]));
  const schemaEvent = byStage.get("schema_validate");
  const domainEvent = byStage.get("domain_validate");
  $$(".pipeline-step").forEach((step) => {
    let event = byStage.get(step.dataset.stage);
    if (step.dataset.stage === "domain_validate") {
      event = schemaEvent?.status === "failed" ? schemaEvent : domainEvent;
    }
    if (!event) return;
    step.classList.add(event.status === "failed" || event.status === "waiting_confirmation" ? "failed" : "succeeded");
  });
}

function yamlScalar(value) {
  if (value === null) return "null";
  if (typeof value === "boolean" || typeof value === "number") return String(value);
  return JSON.stringify(String(value));
}

function yamlLines(value, indent = 0) {
  const pad = " ".repeat(indent);
  if (Array.isArray(value)) {
    if (!value.length) return [`${pad}[]`];
    return value.flatMap((item) => {
      if (item !== null && typeof item === "object") {
        const lines = yamlLines(item, indent + 2);
        return [`${pad}-${lines[0].slice(indent + 1)}`, ...lines.slice(1)];
      }
      return [`${pad}- ${yamlScalar(item)}`];
    });
  }
  if (value !== null && typeof value === "object") {
    const entries = Object.entries(value);
    if (!entries.length) return [`${pad}{}`];
    return entries.flatMap(([key, item]) => {
      if (item !== null && typeof item === "object") {
        return [`${pad}${key}:`, ...yamlLines(item, indent + 2)];
      }
      return [`${pad}${key}: ${yamlScalar(item)}`];
    });
  }
  return [`${pad}${yamlScalar(value)}`];
}

function toYaml(value) {
  return value ? `${yamlLines(value).join("\n")}\n` : "# 尚未生成\n";
}

function renderDecision(result) {
  const list = $("#decisionList");
  list.replaceChildren();
  result.decision_summary.forEach((summary) => {
    const item = document.createElement("li");
    item.textContent = summary;
    list.append(item);
  });
  $("#providerUsed").textContent = result.provider_used || "--";
  $("#tracePanelState").textContent = result.provider_used || result.provider_requested || "READY";
}

function renderTrace(events) {
  const list = $("#traceList");
  list.replaceChildren();
  let duration = 0;
  events.forEach((event) => {
    duration += event.duration_ms || 0;
    const row = document.createElement("div");
    row.className = `trace-event ${event.status}`;
    const code = document.createElement("code");
    code.textContent = event.stage;
    const summary = document.createElement("span");
    summary.textContent = event.summary;
    const time = document.createElement("small");
    time.textContent = `${event.duration_ms || 0} ms`;
    row.append(code, summary, time);
    list.append(row);
  });
  $("#traceDuration").textContent = `${duration} ms`;
  $("#traceNavMeta").textContent = `${events.length} 个阶段 · ${duration} ms`;
}

function renderValidation(issues) {
  const list = $("#validationList");
  list.replaceChildren();
  $("#validationCount").textContent = `${issues.length} 条`;
  if (!issues.length) {
    const row = document.createElement("div");
    row.className = "validation-item";
    row.innerHTML = "<b>PASS</b><code>all</code><span>公共 Schema、领域 Schema 和语义约束均通过。</span>";
    list.append(row);
    return;
  }
  issues.forEach((issue) => {
    const row = document.createElement("div");
    row.className = `validation-item ${issue.severity}`;
    const severity = document.createElement("b");
    severity.textContent = issue.severity.toUpperCase();
    const code = document.createElement("code");
    code.textContent = `${issue.code} · ${issue.path}`;
    const message = document.createElement("span");
    message.textContent = issue.message;
    row.append(severity, code, message);
    list.append(row);
  });
}

function resetSeatState() {
  $$(".thermal-states > span").forEach((item) => {
    item.classList.remove("on");
    $("b", item).textContent = "--";
  });
  $$(".motion-axis").forEach((item) => {
    $("b", item).textContent = "--";
    $("i", item).style.width = "0%";
    item.classList.remove("fault");
  });
}

function renderSeatState(actuatorState) {
  resetSeatState();
  if (!actuatorState) return;
  Object.entries(actuatorState).forEach(([seat, functions]) => {
    Object.entries(functions).forEach(([feature, value]) => {
      if (feature === "position") {
        Object.entries(value).forEach(([axis, motion]) => {
          const item = $(`.seat-card[data-seat="${seat}"] [data-axis="${axis}"]`);
          if (!item) return;
          const position = Number(motion.position_pct || 0);
          const estimated = Boolean(
            motion.position_estimated || motion.position_valid === false
          );
          $("b", item).textContent = `${estimated ? "≈" : ""}${position}%`;
          item.title = estimated ? "Hall 已确认相对运动；绝对位置尚未标定" : "";
          $("i", item).style.width = `${Math.max(0, Math.min(100, position))}%`;
          item.classList.toggle("fault", Boolean(motion.fault));
        });
        return;
      }
      const item = $(`.seat-card[data-seat="${seat}"] [data-function="${feature}"]`);
      if (!item) return;
      item.classList.toggle("on", value.state === "on");
      $("b", item).textContent = value.state === "on" ? `ON · L${value.level}` : "OFF";
    });
  });
  updateSeatTwin(actuatorState);
}

function renderDomainState(domainState) {
  if (!domainState) return;
  const climate = domainState.climate;
  if (climate) {
    const active = climate.power === "on" || climate.ac === "on" || Number(climate.fan_level) > 0;
    const driverTemperature = climate.zones?.driver?.temperature_c
      ?? climate.zones?.vehicle?.temperature_c
      ?? 24;
    const passengerTemperature = climate.zones?.passenger?.temperature_c
      ?? climate.zones?.vehicle?.temperature_c
      ?? 24;
    $('[data-domain-panel="climate"]').classList.toggle("active", active);
    $("#climatePower").textContent = climate.power === "on" ? "ON" : (active ? "ACTIVE" : "OFF");
    $("#driverTemperature").innerHTML = `${driverTemperature}<sup>℃</sup>`;
    $("#passengerTemperature").innerHTML = `${passengerTemperature}<sup>℃</sup>`;
    $("#airflowVisual").dataset.level = String(Math.max(0, Math.min(7, Number(climate.fan_level) || 0)));
    $("#fanLevel").textContent = `${climate.fan_level ?? 0} 档`;
    $("#cycleMode").textContent = climate.cycle_mode === "internal" ? "内循环" : "外循环";
    $("#acState").textContent = climate.ac === "on" ? "开启" : "关闭";
    $("#defrostState").textContent = climate.front_defrost === "on" ? "开启" : "关闭";
    const vehicleSystems = state.seatTwin?.vehicleSystems;
    if (vehicleSystems) {
      vehicleSystems.targets.climateLevel = Math.max(0, Math.min(7, Number(climate.fan_level) || 0));
      vehicleSystems.targets.climateTemperature = Number(passengerTemperature) || 24;
    }
    $('[data-twin-system="climate"]').classList.toggle("active", active);
    $("#twinClimateState").textContent = active
      ? `${passengerTemperature}℃ · ${climate.fan_level ?? 0}档`
      : "关闭";
  }

  const roof = domainState.roof;
  if (roof) {
    const transmittance = Math.max(0, Math.min(100, Number(roof.transmittance_pct) || 0));
    const shadePosition = Math.max(0, Math.min(100, Number(roof.shade_position_pct) || 0));
    $('[data-domain-panel="roof"]').classList.toggle(
      "active",
      transmittance < 100 || shadePosition > 0 || roof.automatic_dimming === "on",
    );
    $("#roofGlass").style.background = `rgba(105, 160, 185, ${0.12 + transmittance * 0.0042})`;
    $("#roofShade").style.width = `${100 - shadePosition}%`;
    $("#transmittanceValue").textContent = `${transmittance}%`;
    $("#shadePositionValue").textContent = `${shadePosition}%`;
    $("#automaticDimming").textContent = roof.automatic_dimming === "on" ? "开启" : "关闭";
    $("#roofMotorState").textContent = roof.fault
      ? "故障"
      : (roof.motion_state === "stopped" ? "已停止" : roof.motion_state);
    $("#roofState").textContent = roof.fault ? "FAULT" : "READY";
    const vehicleSystems = state.seatTwin?.vehicleSystems;
    if (vehicleSystems) {
      vehicleSystems.targets.roofTransmittance = transmittance;
      vehicleSystems.targets.roofShadePosition = shadePosition;
    }
    const roofActive = transmittance < 100 || shadePosition > 0 || roof.automatic_dimming === "on";
    $('[data-twin-system="roof"]').classList.toggle("active", roofActive);
    $("#twinRoofState").textContent = `透光 ${transmittance}% · 帘 ${shadePosition}%`;
  }

  const ambient = domainState.ambient_light;
  if (ambient) {
    const active = ambient.power === "on";
    const color = /^#[0-9A-Fa-f]{6}$/.test(ambient.color_hex || "")
      ? ambient.color_hex.toUpperCase()
      : "#74D9FF";
    const brightness = Math.max(0, Math.min(100, Number(ambient.brightness_pct) || 0));
    const opacity = active ? Math.max(0.18, brightness / 100) : 0.08;
    const modeLabels = {
      camping: "露营",
      rest: "小憩",
      cinema: "观影",
      meditation: "冥想",
      romantic: "浪漫",
      custom: "自定义",
      on: "开启",
      off: "关闭",
    };
    $('[data-domain-panel="ambient_light"]').classList.toggle("active", active);
    $("#ambientPower").textContent = active ? "ON" : "OFF";
    $$(".ambient-line").forEach((line) => {
      line.style.background = color;
      line.style.boxShadow = `0 0 ${Math.round(5 + brightness / 8)}px ${color}`;
      line.style.opacity = String(opacity);
    });
    $("#ambientSwatch").style.background = color;
    $("#ambientColor").textContent = color;
    $("#ambientBrightness").textContent = `${brightness}%`;
    $("#ambientMode").textContent = modeLabels[ambient.mode] || ambient.mode || "自定义";
    const vehicleSystems = state.seatTwin?.vehicleSystems;
    if (vehicleSystems) {
      vehicleSystems.targets.ambientPower = active ? 1 : 0;
      vehicleSystems.targets.ambientBrightness = brightness;
      vehicleSystems.colors.ambientTarget.set(color);
    }
    $('[data-twin-system="ambient"]').classList.toggle("active", active);
    $("#twinAmbientState").textContent = active
      ? `${color} · ${brightness}%`
      : "关闭";
  }
}

function renderedConfig(result) {
  if (result.scene_config) {
    return {
      scene_config: result.scene_config,
      function_configs: result.function_configs,
    };
  }
  return result.preset_config || result.function_config;
}

function renderedPlan(result) {
  const plans = result.command_plans || {};
  return Object.keys(plans).length > 1 ? plans : result.command_plan;
}

function renderSavedPresets(result) {
  const indicator = $("#presetIndicator");
  const presets = result.saved_presets || [];
  if (!presets.length) {
    indicator.hidden = true;
    return;
  }
  const latest = result.preset_config
    ? {
        name: result.preset_config.metadata.name,
        target: result.preset_config.metadata.labels.target,
      }
    : presets[presets.length - 1];
  const targetName = latest.target === "driver" ? "主驾" : "副驾";
  $("span", indicator).textContent = `已保存 ${targetName} · ${latest.name}`;
  indicator.hidden = false;
}

const CONFIG_DOMAIN_META = {
  seat: { label: "副驾座椅", icon: "armchair", className: "seat" },
  climate: { label: "空调", icon: "fan", className: "climate" },
  ambient_light: { label: "氛围灯", icon: "lamp-ceiling", className: "ambient" },
  roof: { label: "智能天幕", icon: "panels-top-left", className: "roof" },
};

const CONFIG_CAPABILITY_LABELS = {
  "seat.set_ventilation": "设置座椅通风",
  "seat.set_heating": "设置座椅加热",
  "seat.set_longitudinal": "调节座椅前后位置",
  "seat.set_longitudinal_position": "调节座椅前后位置",
  "seat.set_cushion_tilt": "调节坐垫俯仰",
  "seat.set_backrest_recline": "调节靠背角度",
  "seat.set_legrest_height": "调节腿托角度",
  "seat.set_legrest_extension": "调节腿托伸缩",
  "climate.set_temperature": "设置空调温度",
  "climate.set_fan_level": "设置空调风量",
  "climate.set_power": "设置空调电源",
  "climate.set_ac": "设置 A/C",
  "climate.set_cycle_mode": "设置内外循环",
  "climate.set_outlet_mode": "设置出风模式",
  "climate.set_front_defrost": "设置前风挡除霜",
  "ambient_light.set_power": "设置氛围灯电源",
  "ambient_light.set_illumination": "设置氛围灯颜色与亮度",
  "ambient_light.set_color": "设置氛围灯颜色",
  "ambient_light.set_brightness": "设置氛围灯亮度",
  "ambient_light.set_mode": "设置氛围灯模式",
  "roof.set_transmittance": "设置天幕透光率",
  "roof.set_shade_position": "设置遮阳帘位置",
  "roof.set_automatic_dimming": "设置自动调光",
};

const CONFIG_PARAMETER_LABELS = {
  power: "电源",
  state: "状态",
  level: "档位",
  temperature_c: "目标温度",
  fan_level: "目标风量",
  position_pct: "目标位置",
  angle_deg: "目标角度",
  color_hex: "目标颜色",
  brightness_pct: "目标亮度",
  transmittance_pct: "目标透光率",
  shade_position_pct: "遮阳帘位置",
  automatic_dimming: "自动调光",
  cycle_mode: "循环模式",
  outlet_mode: "出风模式",
  mode: "工作模式",
};

function makeConfigElement(tagName, className, textValue) {
  const element = document.createElement(tagName);
  if (className) element.className = className;
  if (textValue != null) element.textContent = textValue;
  return element;
}

function configTargetLabel(target = {}, domain) {
  const scopes = {
    driver: "主驾",
    passenger: "副驾",
    front_left: "主驾",
    front_right: "副驾",
    front_row: "前排",
    rear_row: "后排",
    vehicle: "全车",
    cabin: "全车舱",
  };
  const rawScope = target.instance || target.zone || (domain === "seat" ? "passenger" : "vehicle");
  const scope = scopes[rawScope] || rawScope;
  if (domain === "seat") return `${scope}座椅`;
  const device = CONFIG_DOMAIN_META[domain]?.label || target.device || domain;
  return `${scope} · ${device}`;
}

function formatConfigValue(name, value) {
  const stateLabels = {
    on: "开启",
    off: "关闭",
    internal: "内循环",
    external: "外循环",
    face: "面部出风",
    feet: "脚部出风",
    cinema: "观影",
    rest: "小憩",
    custom: "自定义",
  };
  if (typeof value === "string" && stateLabels[value]) return stateLabels[value];
  if (name === "temperature_c") return `${value} ℃`;
  if (name === "angle_deg") return `${value}°`;
  if (name === "fan_level" || name === "level") return `${value} 档`;
  if (name.endsWith("_pct")) return `${value}%`;
  if (typeof value === "boolean") return value ? "开启" : "关闭";
  if (value && typeof value === "object") return JSON.stringify(value);
  return String(value ?? "--");
}

function configEntries(result) {
  const configured = result.function_configs || {};
  if (Object.keys(configured).length) return Object.entries(configured);
  const single = result.function_config || result.preset_config;
  const domain = single?.spec?.domain || "seat";
  return single ? [[domain, single]] : [];
}

function planForDomain(result, domain) {
  if (result.command_plans?.[domain]) return result.command_plans[domain];
  return result.command_plan?.spec?.domain === domain ? result.command_plan : null;
}

function renderConfigCards(result) {
  const container = $("#configCards");
  container.replaceChildren();
  const entries = configEntries(result);
  const operations = entries.flatMap(([domain, config]) => (
    (config?.spec?.operations || []).map((operation) => ({ domain, config, operation }))
  ));
  if (!operations.length) {
    const empty = makeConfigElement("div", "config-empty");
    empty.innerHTML = '<i data-lucide="panel-top-dashed"></i><strong>暂无可展示的功能配置</strong><span>原始配置仍可在下方展开查看。</span>';
    container.append(empty);
    refreshIcons();
    return 0;
  }

  const sceneSummary = makeConfigElement("div", "config-scene-summary");
  const sceneCopy = makeConfigElement("div", "config-scene-copy");
  const sceneIcon = makeConfigElement("span", "config-scene-icon");
  sceneIcon.innerHTML = '<i data-lucide="workflow"></i>';
  const sceneText = makeConfigElement("div", "");
  sceneText.append(
    makeConfigElement("strong", "", result.scene_config?.metadata?.name || "单域功能配置"),
    makeConfigElement("span", "", result.scene_config ? "SceneConfig 联合场景" : "FunctionConfig 独立控制"),
  );
  sceneCopy.append(sceneIcon, sceneText);
  const sceneStats = makeConfigElement("div", "config-scene-stats");
  [[entries.length, "控制域"], [operations.length, "控制动作"], [result.validation?.length || 0, "校验提示"]].forEach(([value, label]) => {
    const stat = makeConfigElement("span", "");
    stat.append(makeConfigElement("b", "", value), makeConfigElement("small", "", label));
    sceneStats.append(stat);
  });
  sceneSummary.append(sceneCopy, sceneStats);
  container.append(sceneSummary);

  operations.forEach(({ domain, config, operation }, index) => {
    const meta = CONFIG_DOMAIN_META[domain] || { label: domain, icon: "box", className: "generic" };
    const card = makeConfigElement("article", `config-card config-${meta.className}`);
    const header = makeConfigElement("header", "config-card-header");
    const identity = makeConfigElement("div", "config-card-identity");
    const icon = makeConfigElement("span", "config-card-icon");
    icon.innerHTML = `<i data-lucide="${meta.icon}"></i>`;
    const title = makeConfigElement("div", "");
    title.append(
      makeConfigElement("small", "", `ACTION ${String(index + 1).padStart(2, "0")} · ${domain.toUpperCase()}`),
      makeConfigElement("strong", "", CONFIG_CAPABILITY_LABELS[operation.capability] || operation.capability || meta.label),
    );
    identity.append(icon, title);
    header.append(identity, makeConfigElement("span", "config-domain-badge", meta.label));

    const objectBlock = makeConfigElement("section", "config-object-block");
    objectBlock.append(
      makeConfigElement("span", "config-block-label", "控制对象"),
      makeConfigElement("strong", "config-object-name", configTargetLabel(operation.target, domain)),
      makeConfigElement("code", "config-object-path", `${operation.target?.device || domain} / ${operation.target?.zone || operation.target?.instance || "vehicle"}`),
    );

    const parametersBlock = makeConfigElement("section", "config-parameters-block");
    parametersBlock.append(makeConfigElement("span", "config-block-label", "目标参数"));
    const parameterGrid = makeConfigElement("div", "config-parameter-grid");
    const parameters = Object.entries(operation.parameters || {});
    (parameters.length ? parameters : [["state", "--"]]).forEach(([name, value]) => {
      const item = makeConfigElement("div", "config-parameter");
      const valueNode = makeConfigElement("strong", "", formatConfigValue(name, value));
      if (name === "color_hex" && /^#[0-9A-Fa-f]{6}$/.test(String(value))) {
        const swatch = makeConfigElement("i", "config-color-swatch");
        swatch.style.background = value;
        valueNode.prepend(swatch);
      }
      item.append(
        makeConfigElement("span", "", CONFIG_PARAMETER_LABELS[name] || name),
        valueNode,
      );
      parameterGrid.append(item);
    });
    parametersBlock.append(parameterGrid);

    const plan = planForDomain(result, domain);
    const allCommands = plan?.spec?.commands || [];
    const matchedCommands = allCommands.filter((command) => !command.operation_ref || command.operation_ref === operation.id);
    const command = matchedCommands[0] || null;
    const hardwareBlock = makeConfigElement("section", `config-hardware-block ${command ? "mapped" : "unmapped"}`);
    hardwareBlock.append(makeConfigElement("span", "config-block-label", "硬件映射"));
    const route = makeConfigElement("div", "config-hardware-route");
    const from = makeConfigElement("div", "config-route-node");
    from.append(makeConfigElement("small", "", "逻辑配置"), makeConfigElement("strong", "", operation.id || "operation"));
    const arrow = makeConfigElement("i", "config-route-arrow");
    arrow.innerHTML = '<i data-lucide="arrow-right"></i>';
    const to = makeConfigElement("div", "config-route-node target");
    to.append(
      makeConfigElement("small", "", command?.bus || plan?.spec?.platform || "待编译"),
      makeConfigElement("strong", "", command?.message || "暂无 CAN 命令"),
    );
    route.append(from, arrow, to);
    hardwareBlock.append(route);
    const signals = Object.keys(command?.signals || {});
    const signalList = makeConfigElement("div", "config-signal-list");
    if (signals.length) {
      signals.slice(0, 5).forEach((signal) => signalList.append(makeConfigElement("code", "", signal)));
      if (signals.length > 5) signalList.append(makeConfigElement("code", "config-signal-more", `+${signals.length - 5}`));
    } else {
      signalList.append(makeConfigElement("span", "config-unmapped-note", "虚拟状态可预览，等待硬件编译映射"));
    }
    hardwareBlock.append(signalList);

    const footer = makeConfigElement("footer", "config-card-footer");
    footer.append(
      makeConfigElement("span", "", `超时 ${operation.timeout_ms ?? "--"} ms`),
      makeConfigElement("span", "", operation.failure_policy === "continue" ? "失败后继续" : "失败即中止"),
      makeConfigElement("span", "", config.metadata?.labels?.execution_scope === "virtual_only" ? "仅虚拟执行" : "已通过配置校验"),
    );

    card.append(header, objectBlock, parametersBlock, hardwareBlock, footer);
    container.append(card);
  });
  refreshIcons();
  return operations.length;
}

function renderCode(result) {
  const config = renderedConfig(result);
  $("#configCode code").textContent = toYaml(config);
  const configCardCount = renderConfigCards(result);
  const configDomains = Object.keys(result.function_configs || {});
  $("#configFileName").textContent = result.scene_config
    ? `scene.yaml + functions/{${configDomains.join(",")}}.yaml`
    : result.preset_config
      ? "presets/seat.yaml"
      : `functions/${configDomains[0] || "seat"}.yaml`;
  $("#configNavMeta").textContent = `${configCardCount} 个控制动作`;
  $("#planCode code").textContent = toYaml(renderedPlan(result));
  const planDomains = Object.keys(result.command_plans || {});
  $("#planFileName").textContent = planDomains.length > 1
    ? `command-plans/{${planDomains.join(",")}}.yaml`
    : `command-plans/${planDomains[0] || "seat"}.yaml`;

  const resultItems = result.execution_report?.spec?.results || [];
  const telemetry = resultItems.find((item) => item.telemetry?.feedback_frame)?.telemetry
    || resultItems[0]?.telemetry;
  const frames = resultItems
    .map((item) => item.telemetry?.command_frame)
    .filter(Boolean);
  const summary = $("#frameSummary");
  if (frames.length) {
    const feedback = telemetry?.feedback_frame
      ? `${telemetry.feedback_frame.frame_id} · ${telemetry.feedback_frame.data_hex}`
      : "NO DIRECT FEEDBACK";
    const mode = result.execution_report?.spec?.mode === "hil" ? "HIL · PHYSICAL" : "DRY-RUN";
    summary.innerHTML = `<span>Frames</span><b>${frames.length}</b><span>First payload</span><code>${frames[0].frame_id} · ${frames[0].data_hex}</code><span>Feedback</span><code>${feedback}</code><span>Mode</span><b>${mode}</b>`;
    $("#planNavMeta").textContent = `${frames.length} 帧 · ${mode}`;
  } else if (telemetry?.operation === "save_posture_preset") {
    summary.innerHTML = `<span>Operation</span><b>PRESET STORE</b><span>CAN</span><code>NO FRAME EMITTED</code><span>Scope</span><b>CONVERSATION</b>`;
    $("#planNavMeta").textContent = "预设存储 · 无 CAN 帧";
  } else {
    summary.innerHTML = "<span>Frame ID</span><b>--</b><span>Payload</span><code>--</code><span>Mode</span><b>NOT EXECUTED</b>";
    $("#planNavMeta").textContent = "未生成 CAN 帧";
  }
}

function renderExecution(result) {
  const summary = $("#executionSummary");
  const list = $("#resultList");
  list.replaceChildren();
  const report = result.execution_report;
  if (!report) {
    summary.className = "execution-summary failed";
    const compileIssue = result.validation?.find((issue) => issue.code === "CAN_COMPILE_REJECTED");
    const blockedReason = {
      needs_confirmation: "请求需要补充确认",
      capability_unavailable: "目标能力已识别，但对应域尚未接入执行器",
      compile_failed: compileIssue?.message || "CAN 命令编译被安全约束阻止",
    }[result.status] || "配置或语义校验未通过";
    summary.innerHTML = `<i data-lucide="circle-x"></i><div><strong>执行未开始</strong><span>${blockedReason}</span></div>`;
    $("#resultNavMeta").textContent = "未执行 · 查看原因";
    $("#resultPanelState").textContent = "BLOCKED";
    $("#resultPanelState").className = "workspace-panel-state failed";
    refreshIcons();
    return;
  }
  const reportSucceeded = report.spec.status === "succeeded";
  summary.className = `execution-summary ${reportSucceeded ? "succeeded" : "failed"}`;
  const presetSave = Boolean(result.preset_config);
  const physical = report.spec.mode === "hil";
  const executedDomains = [...new Set(report.spec.results.map((item) => item.domain))];
  const motionCount = report.spec.results.filter((item) => item.telemetry?.motion_axis).length;
  const firmwareResult = report.spec.results.find((item) => item.telemetry?.firmware_verified);
  const operationResults = report.spec.results.filter((item) => item.ref !== "seat-controller-firmware");
  let executionDetail = presetSave
    ? "当前五轴姿态已持久化到会话预设仓库，未生成 CAN 命令"
    : physical
      ? `${executedDomains.join(" / ")} 已下发真实 CAN，并以 IAR 固件实际反馈确认 ${operationResults.filter((item) => item.status === "succeeded").length} 个步骤`
      : `${executedDomains.join(" / ")} 共 ${report.spec.results.length} 个操作已完成 CAN 编码与虚拟执行`;
  if (motionCount) executionDetail += `，含 ${motionCount} 个座椅位置电机反馈`;
  if (firmwareResult?.telemetry?.programmed_this_request) executionDetail += "；本次已自动烧录并校验统一固件";
  else if (firmwareResult) executionDetail += "；板上统一固件身份已校验";
  if (result.status === "partially_succeeded") {
    executionDetail += "；未接入域请求已保留为 deferred request";
  }
  if (!reportSucceeded) {
    const failure = report.spec.results.find((item) => item.status === "failed");
    const failureTelemetry = failure?.telemetry || {};
    executionDetail = failureTelemetry.error_type === "FirmwareProgrammingError"
      ? "固件身份验证或自动烧录失败，座椅控制帧未发送。"
      : failureTelemetry.calibration_required
        ? `大幅相对移动已转换为绝对目标，但 Motor${failureTelemetry.motor_selector} 的 Position_Valid=0；未发送绝对移动命令，请先在台架清空并备好急停后执行显式端点标定。`
      : failureTelemetry.failure_category === "stall_no_hall_activity"
        ? `Motor${failureTelemetry.motor_selector} STALL：Hall ${failureTelemetry.hall_before ?? "?"}→${failureTelemetry.hall_after ?? "?"}，未检测到持续 Hall 活动；可能已到目标方向机械端点/存在阻挡，或 Hall 供电、信号线未接通。请先安全地反向移动 2° 诊断。`
      : failureTelemetry.failure_category === "stall_after_hall_activity"
        ? `Motor${failureTelemetry.motor_selector} STALL：Hall ${failureTelemetry.hall_before ?? "?"}→${failureTelemetry.hall_after ?? "?"}，运动后发生堵转，请检查目标方向端点或机械阻挡。`
      : failureTelemetry.motor_result_name
        ? `Motor${failureTelemetry.motor_selector} ${failureTelemetry.motor_result_name}，板端事件 ${failureTelemetry.last_motor_event_name || "UNAVAILABLE"}；${failureTelemetry.stop_all_attempted ? "已尝试发送 STOP_ALL。" : "请检查硬件回读。"}`
      : failureTelemetry.stop_all_attempted
        ? "真实台架未返回满足目标的反馈，移动链路已尝试发送 STOP_ALL。"
        : "真实台架未返回满足目标的物理反馈。";
  }
  summary.innerHTML = `<i data-lucide="${reportSucceeded ? (presetSave ? "bookmark-check" : "circle-check-big") : "circle-x"}"></i><div><strong>${reportSucceeded ? (presetSave ? "姿态预设已保存" : (physical ? "真实台架执行成功" : "虚拟执行成功")) : "真实台架执行失败"}</strong><span>${executionDetail}</span></div>`;
  $("#resultNavMeta").textContent = reportSucceeded
    ? `${report.spec.results.length} 项完成 · ${physical ? "HIL" : "DRY-RUN"}`
    : "执行失败 · 查看回读";
  $("#resultPanelState").textContent = reportSucceeded ? "SUCCEEDED" : "FAILED";
  $("#resultPanelState").className = `workspace-panel-state ${reportSucceeded ? "succeeded" : "failed"}`;
  report.spec.results.forEach((item) => {
    const row = document.createElement("div");
    row.className = "result-item";
    row.innerHTML = `<i data-lucide="${item.status === "succeeded" ? "circle-check" : "circle-x"}"></i>`;
    const text = document.createElement("div");
    const title = document.createElement("strong");
    title.textContent = item.ref;
    const detail = document.createElement("span");
    detail.textContent = item.message;
    text.append(title, detail);
    const frame = document.createElement("code");
    frame.textContent = item.telemetry?.command_frame
      ? `${item.telemetry.command_frame.frame_id}  ${item.telemetry.command_frame.data_hex}`
      : item.telemetry?.firmware_verified
        ? `${item.telemetry.programmed_this_request ? "FLASHED" : "VERIFIED"} · ${item.telemetry.identity_frame_id} · ${item.telemetry.identity_data_hex}`
        : "CONTROL PLANE · NO CAN";
    row.append(text, frame);
    list.append(row);
  });
  refreshIcons();
}

function renderResult(result) {
  state.result = result;
  const executionSucceeded = ["succeeded", "partially_succeeded"].includes(result.status);
  const domains = Object.keys(result.function_configs || {});
  const domainLabels = {
    seat: "座椅",
    climate: "空调",
    roof: "天幕",
    ambient_light: "氛围灯",
  };
  $("#resultTitle").textContent = executionSucceeded
    ? result.preset_config
      ? "座椅姿态预设已保存"
      : result.scene_config
        ? `${domains.length} 域场景闭环完成`
        : `${domainLabels[domains[0]] || "车舱"}单域闭环完成`
    : "请求未执行";
  const conversationLabel = result.conversation_id?.slice(-8) || "no-context";
  $("#requestMeta").textContent = `${result.request_id} / context:${conversationLabel} / turn:${result.conversation_turn} / ${result.provider_used || result.provider_requested}`;
  $("#requestMeta").textContent += ` / ${result.execution_report?.spec?.mode || result.execution_mode || "dry_run"}`;
  setRunStatus(
    executionSucceeded ? "succeeded" : "failed",
    result.status.toUpperCase(),
  );
  renderPipeline(result.trace_events || []);
  renderDecision(result);
  renderTrace(result.trace_events || []);
  renderValidation(result.validation || []);
  renderSeatState(result.actuator_state);
  renderDomainState(result.domain_state);
  updateTwinExplicitAngles(result);
  renderSavedPresets(result);
  renderCode(result);
  renderExecution(result);
  window.dispatchEvent(new CustomEvent("cognitive-agent:result", { detail: result }));
}

async function submitRequest(event) {
  event.preventDefault();
  const utterance = $("#utterance").value.trim();
  if (!utterance) {
    showToast("请输入车舱控制请求");
    return;
  }
  const button = $("#runButton");
  button.disabled = true;
  button.classList.add("loading");
  button.innerHTML = '<i data-lucide="loader-circle"></i><span>处理中</span>';
  refreshIcons();
  setRunStatus("processing", "PROCESSING");
  $("#resultTitle").textContent = "正在执行车舱编排";
  startProgress();
  const approvalTokenInput = $("#approvalToken");
  const approvalToken = state.executionMode === "hardware"
    ? approvalTokenInput.value
    : null;
  if (approvalTokenInput) approvalTokenInput.value = "";

  try {
    const response = await fetch("/api/requests", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        utterance,
        provider: state.provider,
        conversation_id: state.conversationId,
        execution_mode: state.executionMode,
        ...(state.executionMode === "hardware"
          ? { approval_token: approvalToken }
          : {}),
      }),
    });
    const payload = await response.json();
    if (response.status === 401) {
      window.location.replace("/login");
      return;
    }
    if (!response.ok) throw new Error(payload.message || payload.error || `HTTP ${response.status}`);
    renderResult(payload);
    const completed = ["succeeded", "partially_succeeded"].includes(payload.status);
    showToast(completed
      ? (payload.execution_report?.spec?.mode === "hil" ? "真实台架执行与反馈确认已完成" : "可执行动作的 dry-run 已完成")
      : "请求未执行");
  } catch (error) {
    window.clearInterval(state.progressTimer);
    resetPipeline();
    setRunStatus("failed", "FAILED");
    $("#resultTitle").textContent = "请求处理失败";
    showToast(error.message);
  } finally {
    button.disabled = false;
    button.classList.remove("loading");
    button.innerHTML = `<i data-lucide="play"></i><span>${state.executionMode === "hardware" ? "授权并真实执行" : "生成并执行"}</span>`;
    refreshIcons();
  }
}

function activateTab(tabName) {
  $$(".tab").forEach((tab) => tab.classList.toggle("active", tab.dataset.tab === tabName));
  const panel = $(`#panel-${tabName}`);
  if (!panel) return;
  panel.classList.add("navigation-focus");
  panel.scrollIntoView({ behavior: "smooth", block: "start" });
  window.setTimeout(() => panel.classList.remove("navigation-focus"), 900);
}

function initResultWorkspace() {
  const panels = $$(".result-workspace .tab-panel");
  panels.forEach((panel) => {
    panel.hidden = false;
    panel.classList.add("active");
  });
  if (!("IntersectionObserver" in window)) return;
  const observer = new IntersectionObserver((entries) => {
    const visible = entries
      .filter((entry) => entry.isIntersecting)
      .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
    if (!visible) return;
    const tabName = visible.target.id.replace("panel-", "");
    $$(".result-nav .tab").forEach((tab) => {
      tab.classList.toggle("active", tab.dataset.tab === tabName);
    });
  }, { rootMargin: "-18% 0px -56% 0px", threshold: [0.08, 0.3, 0.6] });
  panels.forEach((panel) => observer.observe(panel));
}

async function copyArtifact(type) {
  const value = type === "config" ? renderedConfig(state.result || {}) : renderedPlan(state.result || {});
  if (!value) return showToast("当前没有可复制的内容");
  await navigator.clipboard.writeText(toYaml(value));
  showToast("已复制到剪贴板");
}

function downloadArtifact(type) {
  const value = type === "config" ? renderedConfig(state.result || {}) : renderedPlan(state.result || {});
  if (!value) return showToast("当前没有可下载的内容");
  const blob = new Blob([toYaml(value)], { type: "text/yaml;charset=utf-8" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = type === "config"
    ? (state.result?.preset_config
      ? "seat-preset.yaml"
      : state.result?.scene_config
        ? "cabin-scene-bundle.yaml"
        : "function-config.yaml")
    : "command-plans.yaml";
  link.click();
  URL.revokeObjectURL(link.href);
}

function startNewConversation() {
  state.conversationId = createConversationId();
  sessionStorage.setItem("cognitive-agent.conversation-id", state.conversationId);
  window.location.reload();
}

window.CognitiveAgentConsole = {
  executeUtterance(utterance, { autoSubmit = true } = {}) {
    const input = $("#utterance");
    const button = $("#runButton");
    if (!input || !button || button.disabled) return false;
    input.value = String(utterance || "").trim();
    input.dispatchEvent(new Event("input", { bubbles: true }));
    input.focus({ preventScroll: true });
    if (autoSubmit) $("#requestForm").requestSubmit();
    return true;
  },
  getExecutionMode() {
    return state.executionMode;
  },
  getResult() {
    return state.result;
  },
  notify(message) {
    showToast(String(message));
  },
};

document.addEventListener("DOMContentLoaded", async () => {
  initJointTwinLayout();
  initResultWorkspace();
  refreshIcons();
  initSeatTwin();
  $("#requestForm").addEventListener("submit", submitRequest);
  $("#utterance").addEventListener("keydown", (event) => {
    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
      event.preventDefault();
      $("#requestForm").requestSubmit();
    }
  });
  $("#newConversation").addEventListener("click", startNewConversation);
  $("#logoutButton").addEventListener("click", logout);
  $$(".segment[data-provider]").forEach((button) => button.addEventListener("click", () => selectProvider(button.dataset.provider)));
  $$('[data-execution-mode]').forEach((button) => button.addEventListener("click", () => selectExecutionMode(button.dataset.executionMode)));
  $$(".example-command").forEach((button) => button.addEventListener("click", () => {
    $("#utterance").value = button.dataset.example;
  }));
  $$(".tab").forEach((tab) => tab.addEventListener("click", () => activateTab(tab.dataset.tab)));
  $$('[data-copy]').forEach((button) => button.addEventListener("click", () => copyArtifact(button.dataset.copy)));
  $$('[data-download]').forEach((button) => button.addEventListener("click", () => downloadArtifact(button.dataset.download)));
  await loadAuthStatus();
  await loadRuntime();
  if (new URLSearchParams(window.location.search).get("autorun") === "1") {
    $("#requestForm").requestSubmit();
  }
});