<script setup lang="ts">
import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
import AIAssistant from '../components/AIAssistant.vue'
import UploadButton from '../components/UploadButton.vue'
import { elements, type CircuitElement, type Preset } from './elements'
import { formatValue } from './utils'
import { usePreview } from '../composables/usePreview'

// 1) 左侧面板元件清单
type PaletteItem = CircuitElement
const palette: PaletteItem[] = [...elements]

// 2) 画布世界状态（平移/缩放）
const viewportRef = ref<HTMLDivElement | null>(null)
const worldRef = ref<HTMLDivElement | null>(null)

// 右侧 AI 面板显示开关
const { isPreview } = usePreview()
const showAI = ref(true)


const state = reactive({
  scale: 1,
  minScale: 0.2,
  maxScale: 3,
  translateX: 0,
  translateY: 0,
  worldSize: 5000, // 世界为正方形 5000x5000，中心在 2500,2500
  gridSize: 40, // 网格间距（未缩放前）
})

const worldStyle = computed(() => ({
  width: state.worldSize + 'px',
  height: state.worldSize + 'px',
  transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
  transformOrigin: '0 0',
  // 提供给 CSS 的网格尺寸变量
  '--grid': state.gridSize + 'px',
  '--grid5': state.gridSize * 5 + 'px',
}))

// 3) 已放置的元件
type Instance = {
  id: string
  key: string // 文件名键
  url: string
  x: number
  y: number
  size: number
  rotation: number // 角度，单位：deg
  props: Record<string, number | string>
  state?: 'on' | 'off'
}

let idSeq = 0
const instances = reactive<Instance[]>([])

// 连接点与导线
type EndpointRef = { instId: string; cpIndex: number }
type Wire = { id: string; a: EndpointRef; b: EndpointRef }
let wireSeq = 0
const wires = reactive<Wire[]>([])
let pendingEndpoint: EndpointRef | null = null

// 选中与属性编辑
const selectedId = ref<string | null>(null)
const selectedInst = computed(() => instances.find(i => i.id === selectedId.value) || null)
function selectInstance(id: string) { selectedId.value = id }
function clearSelection() { selectedId.value = null }

// 选中元件的元数据（用于读取预设清单）
const selectedMeta = computed(() => {
  const inst = selectedInst.value
  if (!inst) return null
  return elements.find(e => e.key === inst.key) || null
})

// 应用预设：将预设中的属性值写到实例 props
function applyPreset(p: Preset) {
  const inst = selectedInst.value
  if (!inst) return
  const values = p?.propertyValues || {}
  for (const [k, v] of Object.entries(values)) {
    inst.props[k] = v as any
  }
}

// 4) 视口 <-> 世界 坐标转换
function clientToWorld(clientX: number, clientY: number) {
  const viewport = viewportRef.value!
  const rect = viewport.getBoundingClientRect()
  const x = (clientX - rect.left - state.translateX) / state.scale
  const y = (clientY - rect.top - state.translateY) / state.scale
  return { x, y }
}

function zoomAt(clientX: number, clientY: number, deltaY: number) {
  const { x: wx, y: wy } = clientToWorld(clientX, clientY)
  const zoomFactor = Math.exp(-deltaY * 0.0015) // 平滑缩放
  const next = Math.min(state.maxScale, Math.max(state.minScale, state.scale * zoomFactor))
  const prev = state.scale
  if (next === prev) return
  // 调整平移以保持光标下的世界点不变
  state.translateX = clientX - viewportRef.value!.getBoundingClientRect().left - wx * next
  state.translateY = clientY - viewportRef.value!.getBoundingClientRect().top - wy * next
  state.scale = next
}

// 5) 拖拽放置（来自左侧面板）
const DND_MIME = 'application/x-circuit-element'

function onPaletteDragStart(e: DragEvent, item: PaletteItem) {
  if (!e.dataTransfer) return
  e.dataTransfer.setData(DND_MIME, item.key)
  e.dataTransfer.setData('text/plain', item.key)
  e.dataTransfer.effectAllowed = 'copy'
}

function onCanvasDragOver(e: DragEvent) {
  e.preventDefault()
  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
}

function onCanvasDrop(e: DragEvent) {
  e.preventDefault()
  const key = e.dataTransfer?.getData(DND_MIME) || e.dataTransfer?.getData('text/plain')
  if (!key) return
  const item = palette.find(p => p.key === key)
  if (!item) return
  const { x, y } = clientToWorld(e.clientX, e.clientY)
  const defSize = item.defaultSize ?? 64
  const props: Record<string, number | string> = {}
    ; (item.propertySchemas || []).forEach((p) => { props[p.key] = p.default })
  // 通用：为所有元件注入“隐藏属性”控制，默认关闭
  if (props['hideProps'] === undefined) props['hideProps'] = 'off'
  const inst: Instance = { id: String(++idSeq), key: item.key, url: item.url, x: x, y: y, size: defSize, rotation: 0, props }
  // 仍保留 state 字段用于灯泡等展示，但对于开关用 props.state 作为真值
  if (item.stateImages) inst.state = String(props['state'] ?? 'off') as any
  instances.push(inst)
}

// 6) 背景平移
let isPanning = false
let panStart = { x: 0, y: 0 }
let panOrigin = { x: 0, y: 0 }

function onViewportMouseDown(e: MouseEvent) {
  // 只在点到空白区域时平移（元素自身会阻止冒泡）
  if (e.button !== 0) return
  isPanning = true
  panStart = { x: e.clientX, y: e.clientY }
  panOrigin = { x: state.translateX, y: state.translateY }
}

function onViewportMouseMove(e: MouseEvent) {
  if (!isPanning) return
  const dx = e.clientX - panStart.x
  const dy = e.clientY - panStart.y
  state.translateX = panOrigin.x + dx
  state.translateY = panOrigin.y + dy
}

function onViewportMouseUp() {
  isPanning = false
}

function onWheel(e: WheelEvent) {
  // 触控板垂直滚轮缩放，按住 Ctrl 也缩放
  if (e.ctrlKey || Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
    e.preventDefault()
    zoomAt(e.clientX, e.clientY, e.deltaY)
  }
}

// 7) 画布内元素拖动
let draggingId: string | null = null
let dragOffset = { x: 0, y: 0 } // 元素内相对偏移（世界坐标）
const mouseWorld = reactive({ x: 0, y: 0 })
// 滑动变阻器滑块拖动状态
let sliderDraggingId: string | null = null

function onInstanceMouseDown(e: MouseEvent, inst: Instance) {
  if (e.button !== 0) return
  e.stopPropagation()
  draggingId = inst.id
  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
  dragOffset = { x: wx - inst.x, y: wy - inst.y }
}

function onViewportMouseMoveDrag(e: MouseEvent) {
  if (!draggingId) return
  const inst = instances.find(i => i.id === draggingId)
  if (!inst) return
  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
  inst.x = wx - dragOffset.x
  inst.y = wy - dragOffset.y
}

function onViewportMouseUpDrag() {
  draggingId = null
}

// 将世界坐标转换为实例局部坐标（考虑旋转）
function worldToLocal(inst: Instance, wx: number, wy: number) {
  const dx = wx - inst.x
  const dy = wy - inst.y
  const rad = (inst.rotation || 0) * Math.PI / 180
  const cos = Math.cos(rad)
  const sin = Math.sin(rad)
  // 逆旋转
  const lx = dx * cos + dy * sin
  const ly = -dx * sin + dy * cos
  return { lx, ly }
}

function onViewportMouseMoveSlider(e: MouseEvent) {
  if (!sliderDraggingId) return
  const inst = instances.find(i => i.id === sliderDraggingId)
  if (!inst) return
  if (inst.key !== 'sliding_rheostat') return
  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
  const { lx } = worldToLocal(inst, wx, wy)
  // 滑道范围（与 getRheostatPinOffset 对齐）
  const leftFrac = 0.25, rightFrac = 0.75
  const t = (lx / inst.size + 0.5 - leftFrac) / (rightFrac - leftFrac)
  const pos = Math.max(0, Math.min(1, t))
  inst.props['position'] = pos
}

function onViewportMouseUpSlider() {
  sliderDraggingId = null
}

// 连接点点击逻辑
function onEndpointClick(instId: string, cpIndex: number, e: MouseEvent) {
  e.stopPropagation()
  const ep = { instId, cpIndex }
  if (!pendingEndpoint) {
    pendingEndpoint = ep
    return
  }
  // 不允许同一端点两次
  if (pendingEndpoint.instId === instId && pendingEndpoint.cpIndex === cpIndex) {
    pendingEndpoint = null
    return
  }
  // 创建导线
  wires.push({ id: String(++wireSeq), a: pendingEndpoint, b: ep })
  pendingEndpoint = null
}

function removeWire(id: string, e?: MouseEvent) {
  if (e) e.stopPropagation()
  const idx = wires.findIndex(w => w.id === id)
  if (idx >= 0) wires.splice(idx, 1)
}

// 工具函数：获取实例、连接点坐标（世界坐标）
function getInstance(instId: string) {
  return instances.find(i => i.id === instId)
}

function getConnectionPointWorldPos(inst: Instance, cpIndex: number) {
  const elem = elements.find(e => e.key === inst.key)
  const cp = elem?.connectionPoints[cpIndex]
  if (!cp) return { x: inst.x, y: inst.y }
  const offsetX = (cp.x - 0.5) * inst.size
  const offsetY = (cp.y - 0.5) * inst.size
  // 旋转偏移
  const rad = (inst.rotation || 0) * Math.PI / 180
  const cos = Math.cos(rad)
  const sin = Math.sin(rad)
  const rx = offsetX * cos - offsetY * sin
  const ry = offsetX * sin + offsetY * cos
  return { x: inst.x + rx, y: inst.y + ry }
}

function onViewportMouseMoveTrack(e: MouseEvent) {
  const { x, y } = clientToWorld(e.clientX, e.clientY)
  mouseWorld.x = x
  mouseWorld.y = y
}

// 命中测试：鼠标是否靠近某连接点（返回最近的端点）
const SNAP_RADIUS = 12
function findClosestEndpoint() {
  let best: { instId: string; cpIndex: number; dist: number } | null = null
  for (const inst of instances) {
    const elem = elements.find(e => e.key === inst.key)
    const cps = elem?.connectionPoints || []
    cps.forEach((_, idx) => {
      const p = getConnectionPointWorldPos(inst, idx)
      const dx = p.x - mouseWorld.x
      const dy = p.y - mouseWorld.y
      const d = Math.hypot(dx, dy)
      if (d <= SNAP_RADIUS && (!best || d < best.dist)) best = { instId: inst.id, cpIndex: idx, dist: d }
    })
  }
  return best
}

type Nearest = { instId: string; cpIndex: number; dist: number } | null
const nearestEndpoint = computed<Nearest>(() => findClosestEndpoint())
const previewTarget = computed(() => {
  const n = nearestEndpoint.value
  // 若靠近端点，且不是与 pendingEndpoint 相同的端点，则吸附到该端点；否则跟随鼠标
  if (n && !(pendingEndpoint && n.instId === pendingEndpoint.instId && n.cpIndex === pendingEndpoint.cpIndex)) {
    const inst = getInstance(n.instId)!
    return getConnectionPointWorldPos(inst, n.cpIndex)
  }
  return { x: mouseWorld.x, y: mouseWorld.y }
})

function isNearest(instId: string, cpIndex: number) {
  const n = nearestEndpoint.value
  return !!n && n.instId === instId && n.cpIndex === cpIndex
}

// 悬停端点与其连通集高亮
const hoveredEndpoint = ref<EndpointRef | null>(null)
const connectedEndpointSet = computed<Set<string>>(() => {
  const set = new Set<string>()
  const start = hoveredEndpoint.value
  if (!start) return set
  // 构建无向邻接表（仅基于导线）
  const key = (ep: EndpointRef) => `${ep.instId}:${ep.cpIndex}`
  const adj = new Map<string, string[]>()
  const add = (a: EndpointRef, b: EndpointRef) => {
    const ka = key(a), kb = key(b)
    if (!adj.has(ka)) adj.set(ka, [])
    if (!adj.has(kb)) adj.set(kb, [])
    adj.get(ka)!.push(kb)
    adj.get(kb)!.push(ka)
  }
  for (const w of wires) add(w.a, w.b)
  // BFS/DFS 查找连通端点
  const startKey = key(start)
  const stack = [startKey]
  set.add(startKey)
  while (stack.length) {
    const cur = stack.pop()!
    for (const nxt of adj.get(cur) || []) {
      if (!set.has(nxt)) { set.add(nxt); stack.push(nxt) }
    }
  }
  return set
})
function isConnectedEndpoint(instId: string, cpIndex: number) {
  return connectedEndpointSet.value.has(`${instId}:${cpIndex}`)
}

// 7.5) 直流电路求解（MNA）
// - 支持：电压源(battery)、电阻(resistor/light_bulb/meter)、开关(ON=0V源，OFF=断开)、电感(DC=0V源)、电容(DC=断开)
// - 结果：每个实例的端口电压差与电流（方向：从连接点0 -> 连接点1 为正）

type InstLive = {
  v: number | null // 端口电压 v = V(p0) - V(p1) 或电压源设定值
  i: number | null // 支路电流，正方向 p0->p1
  node0?: string
  node1?: string
}

const instLive = reactive<Record<string, InstLive>>({})

function getElemMeta(inst: Instance) {
  return elements.find(e => e.key === inst.key)
}

// 针对滑动变阻器：计算滑块的屏幕内偏移（未考虑旋转，先期简化为只支持0°/180°朝向的水平滑动）
function getRheostatPinOffset(inst: Instance) {
  const pos = Math.max(0, Math.min(1, Number(inst.props?.['position'] ?? 0.5)))

  const leftFrac = 0.25, rightFrac = 0.75
  const cx = (leftFrac + (rightFrac - leftFrac) * pos) * inst.size
  return cx
}

// 并查集用于将端点连成节点
class DSU {
  parent = new Map<string, string>()
  find(x: string): string {
    let p = this.parent.get(x) || x
    if (p !== x) {
      p = this.find(p)
      this.parent.set(x, p)
    } else {
      this.parent.set(x, x)
    }
    return p
  }
  union(a: string, b: string) {
    const ra = this.find(a)
    const rb = this.find(b)
    if (ra !== rb) this.parent.set(ra, rb)
  }
}

function safeNum(v: any, def = 0) {
  const n = typeof v === 'number' ? v : Number(v)
  return Number.isFinite(n) ? n : def
}

type BuiltNet = {
  nodeIds: string[] // 所有节点根ID
  ground: string | null
  // 器件分类
  resistors: { inst: Instance; nPlus: string; nMinus: string; R: number }[]
  vsrcs: { inst: Instance; nPlus: string; nMinus: string; V: number }[]
}

function buildNet(): BuiltNet {
  const dsu = new DSU()
  const termId = (instId: string, cp: number) => `${instId}:${cp}`

  // 先把显式导线合并
  for (const w of wires) {
    dsu.union(termId(w.a.instId, w.a.cpIndex), termId(w.b.instId, w.b.cpIndex))
  }

  // 将“短路类器件”作为0V电压源（开关ON、DC电感）
  // OFF开关/电容视为断开，不合并

  // 收集所有端点以便形成节点清单
  const allTerms: string[] = []
  for (const inst of instances) {
    const meta = getElemMeta(inst)
    const cps = meta?.connectionPoints?.length || 0
    for (let i = 0; i < cps; i++) allTerms.push(termId(inst.id, i))
  }

  // 形成节点集合
  const roots = new Set<string>()
  for (const t of allTerms) roots.add(dsu.find(t))
  // 仅基于真实端点选择参考地
  const nodeIds = Array.from(roots)
  const ground = nodeIds.length ? nodeIds[0] : null // 任取一个参考地

  // 为后续引入的“内部节点”（例如串联内阻的中间点）保留集合，避免重复
  const nodeSet = new Set(nodeIds)
  const addNode = (nid: string) => {
    if (!nodeSet.has(nid)) { nodeSet.add(nid); nodeIds.push(nid) }
  }

  // 分类器件
  const resistors: BuiltNet['resistors'] = []
  const vsrcs: BuiltNet['vsrcs'] = []

  const getNode = (inst: Instance, cp: number) => dsu.find(termId(inst.id, cp))

  for (const inst of instances) {
    const meta = getElemMeta(inst)
    if (!meta || meta.connectionPoints.length < 2) continue
    const n0 = getNode(inst, 0)
    const n1 = getNode(inst, 1)

    const key = meta.key
    if (key === 'battery') {
      const V = safeNum(inst.props?.['voltage'], 0)
      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
      const nInt = `${inst.id}:int`
      addNode(nInt)
      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
    } else if (key === 'power_supply') {
      const V = safeNum(inst.props?.['voltage'], 0)
      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
      const nInt = `${inst.id}:int`
      addNode(nInt)
      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
    } else if (key === 'switch') {
      const sw = (inst.props?.['state'] as any) === 'on' || inst.state === 'on'
      if (sw) {
        vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
      }
      // off = open, 忽略
    } else if (key === 'inductor') {
      // DC 等效 0V 源
      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
    } else if (key === 'capacitor') {
      // DC 断开
      // 忽略
    } else if (key === 'sliding_rheostat') {
      // 四脚：A(0) B(1) C(2) D(3)
      const n2 = getNode(inst, 2)
      const n3 = getNode(inst, 3)
      // AB 直通：用 0V 电压源建模
      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
      // 变量电阻：AB->C、AB->D 与滑块位置有关
      const Rmax = Math.max(1e-6, safeNum(inst.props?.['maxResistance'], 100))
      const pos = Math.max(0, Math.min(1, safeNum(inst.props?.['position'], 0.5)))
      const Rac = Math.max(1e-6, Rmax * pos)
      const Rad = Math.max(1e-6, Rmax * (1 - pos))
      // 将 AB 汇成一个等效节点（任选 A 侧 n0）到 C/D
      resistors.push({ inst, nPlus: n0, nMinus: n2, R: Rac })
      resistors.push({ inst, nPlus: n0, nMinus: n3, R: Rad })
      // CD 固定为最大电阻
      resistors.push({ inst, nPlus: n2, nMinus: n3, R: Rmax })
    } else if (key === 'resistor' || key === 'light_bulb' || key === 'meter' || key === 'resistance_box') {
      const R = Math.max(1e-6, safeNum(inst.props?.['resistance'], 0))
      resistors.push({ inst, nPlus: n0, nMinus: n1, R })
    } else {
      // 其他未知器件，按开路处理
    }
  }

  return { nodeIds, ground, resistors, vsrcs }
}

function solveMNA() {
  const net = buildNet()
  // 清空上一次结果
  for (const inst of instances) instLive[inst.id] = { v: null, i: null }

  if (!net.ground) return { ok: false }

  // 建索引（去掉参考地）
  const nodeIndex = new Map<string, number>()
  let idx = 0
  for (const nid of net.nodeIds) {
    if (nid === net.ground) continue
    nodeIndex.set(nid, idx++)
  }
  const n = nodeIndex.size
  const m = net.vsrcs.length
  const N = n + m
  if (N === 0) return { ok: true }

  // 构造 A x = z
  const A: number[][] = Array.from({ length: N }, () => Array(N).fill(0))
  const z: number[] = Array(N).fill(0)
  const gmin = 1e-12

  const mapNi = (nid: string) => (nid === net.ground ? -1 : (nodeIndex.get(nid) ?? -1))

  // 电导矩阵 G（顶部 n×n）
  for (const r of net.resistors) {
    const a = mapNi(r.nPlus)
    const b = mapNi(r.nMinus)
    const g = 1 / r.R
    if (a >= 0) A[a][a] += g + gmin
    if (b >= 0) A[b][b] += g + gmin
    if (a >= 0 && b >= 0) {
      A[a][b] -= g
      A[b][a] -= g
    }
  }
  // 稳定性：对所有节点加 gmin 到地
  for (let i = 0; i < n; i++) A[i][i] += gmin

  // 电压源耦合矩阵 B、C
  // B: (n×m)，位于 A 的右上；C = B^T（m×n），位于 A 的左下
  net.vsrcs.forEach((vs, k) => {
    const p = mapNi(vs.nPlus)
    const q = mapNi(vs.nMinus)
    const row = n + k // 对应电流未知量的位置
    z[row] = vs.V
    if (p >= 0) { A[p][n + k] += 1; A[row][p] += 1 }
    if (q >= 0) { A[q][n + k] -= 1; A[row][q] -= 1 }
    // D 为 0，已初始化
  })

  // 求解线性方程
  const x = gaussianSolve(A, z)
  if (!x) return { ok: false }

  // 组装节点电压
  const Vn = (nid: string) => {
    const i = mapNi(nid)
    return i >= 0 ? x[i] : 0 // 地节点 0V
  }

  // 写回每个器件的 v / i
  for (const r of net.resistors) {
    const vp = Vn(r.nPlus)
    const vn = Vn(r.nMinus)
    const v = vp - vn
    const i = v / r.R
    instLive[r.inst.id] = { v, i, node0: r.nPlus, node1: r.nMinus }
  }
  net.vsrcs.forEach((vs, k) => {
    const vp = Vn(vs.nPlus)
    const vn = Vn(vs.nMinus)
    const v = vp - vn // 由解出的节点电压
    const i = x[n + k] // 电压源支路电流，方向 nPlus -> nMinus
    instLive[vs.inst.id] = { v, i, node0: vs.nPlus, node1: vs.nMinus }
  })

  // 对于未分类（断开）器件，保持 null

  // 根据计算电流，自动切换需要按电流显示状态的元件（如灯泡）
  const CURRENT_ON_THRESHOLD = 0.1 // A，即 100 mA
  for (const inst of instances) {
    if (inst.key === 'light_bulb') {
      const live = instLive[inst.id]
      const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
      if (iabs > CURRENT_ON_THRESHOLD) inst.state = 'on'
      else inst.state = 'off'
    }
  }

  return { ok: true }
}

// 简单高斯消元（带部分选主元）
function gaussianSolve(A: number[][], b: number[]): number[] | null {
  const n = b.length
  // 扩展矩阵
  for (let i = 0; i < n; i++) A[i].push(b[i])

  for (let col = 0, row = 0; col < n && row < n; col++, row++) {
    // 选主元
    let piv = row
    let maxAbs = Math.abs(A[row][col])
    for (let r = row + 1; r < n; r++) {
      const v = Math.abs(A[r][col])
      if (v > maxAbs) { maxAbs = v; piv = r }
    }
    if (maxAbs < 1e-14) {
      // 退化，放弃
      return null
    }
    if (piv !== row) { const tmp = A[piv]; A[piv] = A[row]; A[row] = tmp }

    // 归一化
    const div = A[row][col]
    for (let c = col; c <= n; c++) A[row][c] /= div

    // 消元
    for (let r = 0; r < n; r++) {
      if (r === row) continue
      const factor = A[r][col]
      if (factor === 0) continue
      for (let c = col; c <= n; c++) A[r][c] -= factor * A[row][c]
    }
  }

  // 回读解
  const x = new Array(n).fill(0)
  for (let i = 0; i < n; i++) x[i] = A[i][n]
  return x
}

// 绑定求解到响应式数据
watchEffect(() => { solveMNA() })



function meterText(inst: Instance) {
  const live = instLive[inst.id]
  const i = live?.i ?? 0
  const r = inst.props?.['resistance'] ? safeNum(inst.props?.['resistance'], 0) : 0
  const code = String(inst.props?.['renderFunc'] || '')
  if (!code) return `${(i).toFixed(6)} A`
  try {
    // 允许两种形态："(i)=>..." 或 "(i,v,props)=>..."
    const fn = new Function('i', 'r', 'props', 'return (' + code + ')(i, r, props)')
    const out = fn(i, r, inst.props)
    return String(out)
  } catch {
    return `ERR_RF`
  }
}

// 灯泡发光参数：随电流变化增加线条数量、长度、透明度
function clamp01(x: number) { return x < 0 ? 0 : x > 1 ? 1 : x }
function getBulbGlow(inst: Instance) {
  if (inst.key !== 'light_bulb') return { t: 0, count: 0, opacity: 0, lenFrac: 0 }
  const live = instLive[inst.id]
  const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
  // 使 0.5A 达到比较饱和的光效，0A 无光
  const t = clamp01(iabs / 0.5)
  const count = 12 + Math.round(8 * t) // 12..20 根射线
  const opacity = 0.8 * t // 0..0.8
  const lenFrac = 0.18 + 0.45 * t // 以尺寸为基准的长度比例
  return { t, count, opacity, lenFrac }
}

// 电阻色环：根据实时电阻值绘制 4 环（两位有效数字 + 倍率 + 5% 容差金色）
const DIGIT_COLORS = ['#000000', '#8B4513', '#FF0000', '#FFA500', '#FFFF00', '#008000', '#0000FF', '#800080', '#808080', '#FFFFFF']
const GOLD = '#D4AF37'
const SILVER = '#C0C0C0'

function computeResistorColorBands(ohms: number): string[] {
  // 4 环：D1, D2, multiplier, tolerance(默认金色)
  if (!Number.isFinite(ohms)) ohms = 0
  const R = Math.max(0, ohms)
  // 特殊：0Ω 跳线，显示单一黑环加固定金色作为占位
  if (R === 0) return ['#000000', '#000000', '#000000', GOLD]

  // 将 R 逼近到 (10..99) × 10^k 的形式，以两位有效数字表示
  let exp = Math.floor(Math.log10(R)) - 1
  // 处理非常小的阻值（<0.01Ω）和非常大的阻值，限制到可表示范围
  if (!Number.isFinite(exp)) exp = 0
  let N = R / Math.pow(10, exp)
  // 目标区间为 [10, 99]
  let D = Math.round(N)
  if (D < 10) {
    // 提升到两位
    while (D < 10) { D *= 10; exp -= 1 }
  } else if (D > 99) {
    // 回落并进位倍率
    while (D > 99) { D = Math.round(D / 10); exp += 1 }
  }

  // 提取两位数字
  D = Math.max(10, Math.min(99, D))
  let d1 = Math.floor(D / 10)
  let d2 = D % 10

  // 倍率色环支持指数 -2..9（-1 金、-2 银；其余 0..9 用数字色）
  let mulColor: string
  if (exp <= -2) mulColor = SILVER
  else if (exp === -1) mulColor = GOLD
  else mulColor = DIGIT_COLORS[Math.max(0, Math.min(9, exp))]

  const c1 = DIGIT_COLORS[d1]
  const c2 = DIGIT_COLORS[d2]
  const tol = GOLD // 默认 5%
  return [c1, c2, mulColor, tol]
}

function getResistorBandColors(inst: Instance): string[] {
  if (inst.key !== 'resistor') return []
  const R = safeNum(inst.props?.['resistance'], 0)
  return computeResistorColorBands(R)
}

// 色环在图片中的相对位置（经验位置，适配当前素材）
const RES_BAND_X_FRACS = [0.4, 0.4666, 0.5334, 0.6]
const RES_BAND_WIDTH_FRAC = 0.03
const RES_BAND_TOP_FRAC = 0.432
const RES_BAND_HEIGHT_FRAC = 0.13

function getResBandX(inst: Instance, index: number) {
  const cx = inst.size * (RES_BAND_X_FRACS[index] || 0.3)
  const w = inst.size * RES_BAND_WIDTH_FRAC
  return cx - w / 2
}

// 8) 初始居中到世界中心
function centerWorld() {
  const vp = viewportRef.value
  if (!vp) return
  const rect = vp.getBoundingClientRect()
  const center = state.worldSize / 2
  state.translateX = rect.width / 2 - center * state.scale
  state.translateY = rect.height / 2 - center * state.scale
}

onMounted(() => {
  centerWorld()
  // 检测从详情页跳转携带的导入数据
  try {
    const txt = sessionStorage.getItem('cvln_import_json')
    if (txt) {
      sessionStorage.removeItem('cvln_import_json')
      loadFromJSONText(txt)
    }
  } catch { }
})

// 9) 导出 / 导入（JSON 序列化）
type SaveWorld = Pick<typeof state, 'scale' | 'translateX' | 'translateY' | 'worldSize' | 'gridSize'>
// 新的连接点保存结构：每个实例在 props 下包含 __connections，按连接点索引记录连接到的端点
type SaveConnectionRef = { instId: string; cpIndex: number }
type SaveConnections = Record<string /* cpIndex */, SaveConnectionRef[]>
type SaveInstance = Pick<Instance, 'id' | 'key' | 'x' | 'y' | 'size' | 'rotation' | 'state'> & {
  props: Record<string, any> & { __connections?: SaveConnections }
}
type SaveFile = {
  version: 3
  world: SaveWorld
  instances: SaveInstance[]
}

function makeSave(): SaveFile {
  const world: SaveWorld = {
    scale: state.scale,
    translateX: state.translateX,
    translateY: state.translateY,
    worldSize: state.worldSize,
    gridSize: state.gridSize,
  }

  // 基于当前 wires 构建每个实例的端点连接表
  const connMap: Record<string, Record<number, SaveConnectionRef[]>> = {}
  const addConn = (from: EndpointRef, to: EndpointRef) => {
    if (!connMap[from.instId]) connMap[from.instId] = {}
    if (!connMap[from.instId][from.cpIndex]) connMap[from.instId][from.cpIndex] = []
    connMap[from.instId][from.cpIndex].push({ instId: to.instId, cpIndex: to.cpIndex })
  }
  for (const w of wires) {
    addConn(w.a, w.b)
    addConn(w.b, w.a)
  }

  const data: SaveFile = {
    version: 3,
    world,
    instances: instances.map(i => {
      const propsCopy: Record<string, any> = { ...i.props }
      const m = connMap[i.id]
      // 始终写入 __connections（即使为空对象），确保未连接元件也被保留
      // 将 number 索引键转成字符串键，以便 JSON 键稳定
      const mapped: SaveConnections = {}
      if (m) {
        for (const [k, arr] of Object.entries(m)) mapped[String(k)] = arr.map(x => ({ instId: x.instId, cpIndex: x.cpIndex }))
      }
      propsCopy.__connections = mapped
      return {
        id: i.id,
        key: i.key,
        x: i.x,
        y: i.y,
        size: i.size,
        rotation: i.rotation,
        props: propsCopy,
        state: i.state,
      }
    }),
  }
  return data
}

function downloadJSON(filename: string, text: string) {
  const blob = new Blob([text], { type: 'application/json;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

function pad(n: number) { return n.toString().padStart(2, '0') }
function timestampName() {
  const d = new Date()
  const y = d.getFullYear()
  const m = pad(d.getMonth() + 1)
  const day = pad(d.getDate())
  const hh = pad(d.getHours())
  const mm = pad(d.getMinutes())
  const ss = pad(d.getSeconds())
  return `${y}${m}${day}-${hh}${mm}${ss}`
}

function onExportJSON() {
  const data = makeSave()
  const json = JSON.stringify(data, null, 2)
  downloadJSON(`circuit-${timestampName()}.json`, json)
}

const importInputRef = ref<HTMLInputElement | null>(null)
function triggerImport() { importInputRef.value?.click() }

function safeNumber(v: any, def = 0) {
  const n = typeof v === 'number' ? v : Number(v)
  return Number.isFinite(n) ? n : def
}

function loadFromJSONText(text: string) {
  let obj: any
  try {
    obj = JSON.parse(text)
  } catch (err) {
    alert('JSON 解析失败：' + (err as Error).message)
    return
  }
  if (!obj || typeof obj !== 'object') {
    alert('无效的文件内容')
    return
  }
  // 兼容校验
  const world = obj.world || {}
  const rawInstances = Array.isArray(obj.instances) ? obj.instances : []

  // 过滤仅保留存在于库里的元件
  const knownKeys = new Set(elements.map(e => e.key))
  const validInstances: Instance[] = []
  for (const r of rawInstances) {
    if (!r || typeof r !== 'object') continue
    if (!knownKeys.has(r.key)) continue
    // 提前拿到连接信息（若为新格式）
    const rawProps = (typeof r.props === 'object' && r.props) ? { ...r.props } : {}
    const savedConnections: SaveConnections | undefined = rawProps.__connections
    if ('__connections' in rawProps) delete (rawProps as any)['__connections']
    // 兼容：若缺少通用隐藏属性开关，补上默认值
    if (rawProps['hideProps'] === undefined) rawProps['hideProps'] = 'off'
    const inst: Instance = {
      id: String(r.id ?? (++idSeq)),
      key: String(r.key),
      url: elements.find(e => e.key === r.key)!.url,
      x: safeNumber(r.x),
      y: safeNumber(r.y),
      size: safeNumber(r.size, elements.find(e => e.key === r.key)?.defaultSize ?? 64),
      rotation: safeNumber(r.rotation, 0),
      props: rawProps,
      state: r.state === 'on' || r.state === 'off' ? r.state : undefined,
    }
    // 兼容老文件：若为开关且 props.state 缺失，则使用 legacy state 或默认 off
    if (inst.key === 'switch') {
      const cur = String((inst.props as any)['state'] ?? '')
      if (cur !== 'on' && cur !== 'off') {
        (inst.props as any)['state'] = (inst.state === 'on' ? 'on' : 'off')
      }
    }
    // 暂存连接信息在实例对象上（不入 props）以便后续重建导线
    ; (inst as any).__savedConnections = savedConnections
    validInstances.push(inst)
  }

  // 基于实例与元件接线点数量校验导线
  const instMap = new Map(validInstances.map(i => [i.id, i]))
  const validWires: Wire[] = []

  // 从每个实例 props.__connections 重建导线（去重）
  const dedup = new Set<string>()
  const getKey = (a: EndpointRef, b: EndpointRef) => {
    const k1 = `${a.instId}:${a.cpIndex}`
    const k2 = `${b.instId}:${b.cpIndex}`
    return k1 < k2 ? `${k1}|${k2}` : `${k2}|${k1}`
  }
  for (const inst of validInstances) {
    const conns: SaveConnections | undefined = (inst as any).__savedConnections
    if (!conns) continue
    const elem = elements.find(e => e.key === inst.key)
    const cps = elem?.connectionPoints?.length ?? 0
    for (const [cpStr, arr] of Object.entries(conns)) {
      const cpi = safeNumber(cpStr)
      if (cpi < 0 || cpi >= cps) continue
      for (const ref of arr || []) {
        const tgt = instMap.get(String(ref.instId))
        if (!tgt) continue
        const elemB = elements.find(e => e.key === tgt.key)
        const cpsB = elemB?.connectionPoints?.length ?? 0
        const cpb = safeNumber(ref.cpIndex)
        if (cpb < 0 || cpb >= cpsB) continue
        const a: EndpointRef = { instId: inst.id, cpIndex: cpi }
        const b: EndpointRef = { instId: String(ref.instId), cpIndex: cpb }
        const key = getKey(a, b)
        if (dedup.has(key)) continue
        dedup.add(key)
        validWires.push({ id: String(++wireSeq), a, b })
      }
    }

  }

  // 写回世界与状态
  state.scale = safeNumber(world.scale, state.scale)
  state.translateX = safeNumber(world.translateX, state.translateX)
  state.translateY = safeNumber(world.translateY, state.translateY)
  // worldSize/gridSize 通常固定，如需覆盖可解开注释
  // state.worldSize = safeNumber(world.worldSize, state.worldSize)
  // state.gridSize = safeNumber(world.gridSize, state.gridSize)

  // 覆盖当前电路
  instances.splice(0, instances.length, ...validInstances)
  wires.splice(0, wires.length, ...validWires)
  selectedId.value = null
  pendingEndpoint = null

  // 续增 id 序列
  const maxInstId = validInstances.reduce((m, i) => Math.max(m, Number(i.id) || 0), 0)
  const maxWireId = validWires.reduce((m, w) => Math.max(m, Number(w.id) || 0), 0)
  idSeq = Math.max(idSeq, maxInstId)
  wireSeq = Math.max(wireSeq, maxWireId)
}

function onImportFileChange(e: Event) {
  const input = e.target as HTMLInputElement
  const file = input.files && input.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = () => {
    const text = String(reader.result || '')
    loadFromJSONText(text)
  }
  reader.onerror = () => alert('读取文件失败')
  reader.readAsText(file, 'utf-8')
  // 重置以便可重复选择同一文件
  input.value = ''
}

// 提供给 AI 助手的实时电路状态（每次访问都会序列化最新数据）
const aiState = computed(() => makeSave())

function onAiError(e: string) {
  // 采用函数方式，避免模板类型检查对全局 alert 的报错
  alert(e)
}

// 删除当前选中的元件以及所有关联导线
function deleteSelected() {
  const inst = selectedInst.value
  if (!inst) return
  // 删除连接到该实例的所有导线
  for (let i = wires.length - 1; i >= 0; i--) {
    const w = wires[i]
    if (w.a.instId === inst.id || w.b.instId === inst.id) wires.splice(i, 1)
  }
  // 如果正在连线且端点来自该实例，取消预连
  if (pendingEndpoint && pendingEndpoint.instId === inst.id) pendingEndpoint = null
  // 如果正在拖拽该实例，停止拖拽
  if (draggingId === inst.id) draggingId = null
  // 删除实例本身
  const idx = instances.findIndex(i => i.id === inst.id)
  if (idx >= 0) instances.splice(idx, 1)
  // 清理实时状态与选中
  delete instLive[inst.id]
  selectedId.value = null
}

// 文本框编辑函数
function editTextBox(inst: Instance) {
  // 仅处理文本框
  if (inst.key !== 'text_box') return
  const cur = String(inst.props?.['text'] ?? '')
  const next = globalThis.prompt ? globalThis.prompt('编辑文本', cur) : null
  if (next !== null) inst.props['text'] = next
}
</script>

<template>
  <div class="app" :style="{ '--ai-width': showAI ? '360px' : '0px' }"
    :class="{ 'preview-mode': isPreview }">
    <!-- 左侧元件面板 -->
    <aside class="sidebar" v-if="!isPreview">
      <RouterLink class="back-to-home" to="/">
        <button class="btn">回到大厅</button>
      </RouterLink>

      <h2>元件</h2>
      <div class="palette">
        <div v-for="item in palette" :key="item.key" class="palette-item"
          draggable="true" @dragstart="(e) => onPaletteDragStart(e, item)"
          :title="item.name">
          <img :src="item.url" :alt="item.name" draggable="false" />
          <span class="label">{{ item.name }}</span>
        </div>
      </div>

      <div class="file-actions">
        <button class="btn" @click="onExportJSON">导出 JSON</button>
        <button class="btn" @click="triggerImport">导入 JSON</button>
        <!-- 上传模型到模型广场（需登录） -->
        <UploadButton :makeSave="makeSave" />
        <input ref="importInputRef" type="file" accept="application/json,.json"
          class="hidden-file" @change="onImportFileChange" />
      </div>
    </aside>

    <!-- 画布视口（可平移、缩放、接收拖拽） -->
    <main class="viewport" ref="viewportRef" @pointerdown="onViewportMouseDown"
      @pointermove="(e) => { onViewportMouseMove(e); onViewportMouseMoveDrag(e); onViewportMouseMoveTrack(e); onViewportMouseMoveSlider(e) }"
      @pointerup="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }"
      @pointerleave="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }"
      @wheel="onWheel" @dragover="onCanvasDragOver" @drop="onCanvasDrop"
      @click="clearSelection">
      <!-- 世界平面：网格背景，应用 transform -->
      <div class="world" :style="worldStyle" ref="worldRef">
        <!-- 导线（SVG 覆盖层） -->
        <svg class="wires" :width="state.worldSize" :height="state.worldSize"
          @mousemove="onViewportMouseMoveTrack">
          <g>
            <g v-for="w in wires" :key="w.id" class="wire-group"
              @click.stop="(e) => removeWire(w.id, e)">
              <line class="wire-base"
                :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
                :y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
                :x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
                :y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y"
                stroke-linecap="round" vector-effect="non-scaling-stroke" />
            </g>

            <!-- 预览线：当选中一个端点时，显示到鼠标或吸附端点的线 -->
            <line v-if="pendingEndpoint"
              :x1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).x"
              :y1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).y"
              :x2="previewTarget.x" :y2="previewTarget.y"
              class="wire preview" />
          </g>
        </svg>

        <!-- 已放置的元件（可拖动） -->
        <div v-for="inst in instances" :key="inst.id" class="inst"
          :class="{ selected: selectedId === inst.id }"
          :style="{ left: inst.x + 'px', top: inst.y + 'px', transform: 'translate(-50%, -50%) rotate(' + (inst.rotation || 0) + 'deg)' }"
          @pointerdown="(e) => onInstanceMouseDown(e, inst)"
          @click.stop="() => selectInstance(inst.id)"
          :title="(elements.find(e => e.key === inst.key)?.name || inst.key)">
          <div class="inst-box"
            :style="{ width: inst.size > 0 ? inst.size + 'px' : 'auto', height: inst.size > 0 ? inst.size + 'px' : 'auto' }">
            <img v-if="inst.key !== 'text_box'" :src="(elements.find(e => e.key === inst.key)?.stateImages
              ? (((inst.key === 'switch' ? (inst.props['state'] as string) : inst.state) === 'on')
                ? elements.find(e => e.key === inst.key)!.stateImages!.on
                : elements.find(e => e.key === inst.key)!.stateImages!.off)
              : inst.url)" :alt="inst.key" :draggable="false"
              @contextmenu.prevent="() => {
                const meta = elements.find(e => e.key === inst.key);
                if (!meta?.stateImages) return;
                if (inst.key === 'switch') {
                  const cur = String(inst.props['state'] ?? 'off');
                  inst.props['state'] = cur === 'on' ? 'off' : 'on'
                } else {
                  inst.state = inst.state === 'on' ? 'off' : 'on'
                }
              }" />

            <!-- 文本框渲染层：不参与电路，仅显示可编辑文本 -->
            <div v-if="inst.key === 'text_box'" class="text-box" :style="{
              fontSize: (Number(inst.props?.['fontSize'] ?? 24)) + 'px',
              color: String(inst.props?.['color'] ?? '#111827'),
            }" @dblclick.stop="editTextBox(inst)" title="双击编辑文本">
              {{ String(inst.props?.['text'] ?? '') }}
            </div>

            <!-- 电阻色环叠加层：根据实时电阻值渲染 4 个色带 -->
            <template v-if="inst.key === 'resistor'">
              <div v-for="(c, bi) in getResistorBandColors(inst)" :key="bi"
                class="res-band" :style="{
                  left: getResBandX(inst, bi) + 'px',
                  top: (inst.size * RES_BAND_TOP_FRAC) + 'px',
                  width: (inst.size * RES_BAND_WIDTH_FRAC) + 'px',
                  height: (inst.size * RES_BAND_HEIGHT_FRAC) + 'px',
                  backgroundColor: c
                }"></div>
            </template>

            <!-- 滑动变阻器滑块 -->
            <img v-if="inst.key === 'sliding_rheostat'" class="rheo-pin"
              :src="(elements.find(e => e.key === inst.key) as any)?.pinUrl"
              alt="pin" draggable="false" :style="{
                left: ((getRheostatPinOffset(inst) / inst.size) * 100) + '%',
              }" @pointerdown.stop="() => { sliderDraggingId = inst.id }" />

            <!-- 灯泡发散光线叠加层 -->
            <svg v-if="inst.key === 'light_bulb'" class="bulb-glow"
              :width="inst.size" :height="inst.size"
              :viewBox="'0 0 ' + inst.size + ' ' + inst.size"
              aria-hidden="true">
              <g :opacity="getBulbGlow(inst).opacity">
                <line v-for="k in getBulbGlow(inst).count" :key="k"
                  :x1="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
                  :y1="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
                  :x2="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
                  :y2="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
                  stroke="#f59e0b" stroke-width="2" stroke-linecap="round"
                  vector-effect="non-scaling-stroke" />
              </g>
            </svg>

            <!-- meter 显示层 -->
            <div v-if="inst.key === 'meter'" class="meter-label">
              {{ meterText(inst) }}
            </div>

            <div v-if="inst.key === 'power_supply'" class="power-supply-label">
              <span>{{ instLive[inst.id]?.v?.toFixed(2) }} V</span>
              <span>{{ (-(instLive[inst.id]?.i ?? 0)).toFixed(2) }} A</span>
            </div>
          </div>
        </div>

        <!-- 连接点（显示为虚线圆圈） -->
        <div v-for="inst in instances" :key="inst.id + '-cps'">
          <template
            v-for="(cp, idx) in (elements.find(e => e.key === inst.key)?.connectionPoints || [])"
            :key="inst.id + '-' + idx">
            <div class="endpoint" :class="{
              active: pendingEndpoint && pendingEndpoint.instId === inst.id && pendingEndpoint.cpIndex === idx,
              hover: isNearest(inst.id, idx),
              connected: hoveredEndpoint && isConnectedEndpoint(inst.id, idx)
            }" :style="{
              left: getConnectionPointWorldPos(inst, idx).x + 'px',
              top: getConnectionPointWorldPos(inst, idx).y + 'px'
            }" @click.stop="(e) => onEndpointClick(inst.id, idx, e)"
              @pointerenter="() => { hoveredEndpoint = { instId: inst.id, cpIndex: idx } }"
              @pointerleave="() => { if (hoveredEndpoint && hoveredEndpoint.instId === inst.id && hoveredEndpoint.cpIndex === idx) hoveredEndpoint = null }"
              :title="cp.name || ('P' + (idx + 1))"></div>
          </template>
        </div>
      </div>
    </main>

    <!-- 右侧 AI 助手面板 -->
    <aside v-if="!isPreview && showAI" class="ai-aside">
      <AIAssistant :state="aiState" @error="onAiError"
        @close="showAI = false" />
    </aside>
    <button v-else-if="!isPreview" class="ai-reopen" title="打开 AI 助手"
      @click="showAI = true">◀</button>

    <!-- 底部属性面板：编辑选中元件的业务属性（非尺寸） -->
    <footer v-if="selectedInst" class="bottom-panel"
      :style="{ right: showAI ? '360px' : '0' }">
      <div class="panel-inner">
        <div class="prop-title">{{ selectedInst.key }} 属性</div>
        <!-- 预设按钮区域：显示当前元件的预设，点击一键应用（当未隐藏属性时） -->
        <div
          v-if="selectedMeta?.preset?.length && String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'"
          class="presets">
          <span class="preset-label">预设</span>
          <button v-for="p in selectedMeta!.preset" :key="p.name"
            class="preset-btn" @click.stop="applyPreset(p)">{{
              p.name
            }}</button>
        </div>
        <div class="props">
          <!-- 实时电学量（在隐藏属性=on时不显示） -->
          <label class="prop-row"
            v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
            <span class="label">电压</span>
            <span>{{ formatValue(instLive[selectedInst!.id]?.v ?? null, 'V')
            }}</span>
          </label>
          <label class="prop-row"
            v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
            <span class="label">电流</span>
            <span>{{ formatValue(instLive[selectedInst!.id]?.i ?? null, 'A')
            }}</span>
          </label>
          <!-- 旋转控制（在隐藏属性=on时不显示） -->
          <label class="prop-row"
            v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
            <span class="label">旋转</span>
            <input type="range" min="-180" max="180" step="1"
              v-model.number="selectedInst!.rotation" />
            <input type="number" class="deg-input" step="1"
              v-model.number="selectedInst!.rotation" />
            <span class="unit">deg</span>
            <button class="rot-btn"
              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) - 45 + 360) % 360">-45°</button>
            <button class="rot-btn"
              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) + 45) % 360">+45°</button>
          </label>
          <!-- 通用：隐藏属性开关（始终显示） -->
          <label class="prop-row">
            <span class="label">隐藏属性</span>
            <select v-model="selectedInst!.props['hideProps'] as string">
              <option value="off">off</option>
              <option value="on">on</option>
            </select>
          </label>
          <!-- 业务属性编辑：当未隐藏属性时显示 -->
          <template
            v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'"
            v-for="schema in (elements.find(e => e.key === selectedInst!.key)?.propertySchemas || [])"
            :key="schema.key">
            <label class="prop-row" v-if="schema.key !== 'hideProps'">
              <span class="label">{{ schema.label }}</span>
              <input v-if="schema.type === 'number'" type="number" step="any"
                v-model.number="selectedInst!.props[schema.key]" />
              <input v-else-if="schema.type === 'text'" type="text"
                v-model="selectedInst!.props[schema.key] as string" />
              <input v-else-if="schema.type === 'color'" type="color"
                v-model="selectedInst!.props[schema.key] as string" />
              <select v-else-if="schema.type === 'select'"
                v-model="selectedInst!.props[schema.key] as string">
                <option
                  v-for="opt in (Array.isArray((schema as any).options) ? (schema as any).options : [])"
                  :key="typeof opt === 'string' ? opt : (opt.value)"
                  :value="typeof opt === 'string' ? opt : (opt.value)">
                  {{ typeof opt === 'string' ? opt : (opt.label || opt.value) }}
                </option>
              </select>
              <span class="unit"
                v-if="schema.type === 'number' && (schema as any).unit">{{
                  (schema as any).unit }}</span>
            </label>
          </template>
        </div>
        <!-- 右侧操作区：删除按钮 -->
        <div class="panel-actions">
          <button class="danger-btn" title="删除此元件及其所有连接的导线"
            @click="deleteSelected">删除元件</button>
        </div>
      </div>
    </footer>
  </div>

</template>

<style scoped>
.app {
  display: grid;
  grid-template-columns: 140px 1fr var(--ai-width, 360px);
  /* 左栏 / 画布 / AI 辅助 */
  grid-template-rows: 100vh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.app.preview-mode {
  grid-template-columns: 1fr;
}

.sidebar {
  border-right: 1px solid #e5e7eb;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafafa;
}

.file-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

a {
  text-decoration: none;
}

.hidden-file {
  display: none;
}

.sidebar h2 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #111827;
}

.palette {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
}

.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: grab;
  user-select: none;
}

.palette-item:active {
  cursor: grabbing;
}

.palette-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.palette-item .label {
  font-size: 12px;
  color: #374151;
}

.inspector {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspector h3 {
  margin: 0;
  font-size: 14px;
  color: #111827;
}

.inspector .row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 8px;
}

.inspector .row label {
  color: #4b5563;
  font-size: 12px;
}

.inspector .row .num {
  width: 70px;
}

.viewport {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* 右侧 AI 面板容器 */
.ai-aside {
  border-left: 1px solid #e5e7eb;
  height: 100vh;
  overflow: hidden;
}

/* 右侧重新打开箭头按钮（在隐藏时显示） */
.ai-reopen {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px 0 0 999px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ai-reopen:hover {
  background: #f3f4f6;
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  /* 网格背景（细线 + 粗线，每 5 格一条） */
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size:
    var(--grid) 1px,
    1px var(--grid),
    var(--grid5) 1px,
    1px var(--grid5);
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.wires {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

/* 新增：分层导线样式 */
.wire-group {
  cursor: pointer;
}

.wire-base {
  stroke: #111827;
  stroke-width: 3;
  opacity: 0.85;
}

.wire-highlight {
  stroke-width: 2;
  mix-blend-mode: multiply;
}

/* 悬停时微弱高亮 */
.wire-group:hover .wire-base {
  opacity: 0.95;
}

.wire-group:hover .wire-highlight {
  filter: brightness(1.06);
}

/* 放大可点击区域（不可见）以提升命中，通过 pointer-events 控制组级点击 */
.wire-hit {
  stroke: transparent;
  stroke-width: 10;
}

/* 预览线保留原 class 名，便于最小改动 */
.wire {
  stroke: #111827;
  stroke-width: 2;
}

.wire.preview {
  stroke: #3b82f6;
  stroke-dasharray: 10 6;
  animation: dash-move 1.2s linear infinite;
  opacity: 0.9;
}

@keyframes dash-move {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -32;
  }
}

.inst {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: move;
  user-select: none;
  z-index: 2;
}

.inst .inst-box {
  position: relative;
}

.inst img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* 电阻色环样式 */
.res-band {
  position: absolute;
  transform: translateX(-50%);
  opacity: 0.8;
  top: 0;
  left: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.rheo-pin {
  position: absolute;
  z-index: 3;
  cursor: ew-resize;
  pointer-events: auto;
  width: 15% !important;
  height: auto !important;
  top: 25.5% !important;
  transform: translateX(-50%);
}

.bulb-glow {
  position: absolute;
  left: 0;
  top: -20%;
  pointer-events: none;
  /* 轻微发光的滤镜 */
  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.6));
}

.inst.selected img {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 6px;
}

.meter-label {
  position: absolute;
  right: 25%;
  top: 20%;
  color: #111827;
  font-family: "meter-font";
  font-size: 20px;
  white-space: nowrap;
  pointer-events: none;
}

.power-supply-label {
  position: absolute;
  right: 44%;
  height: 38%;
  top: 17%;
  color: #62D3EF;
  text-shadow: 0 0 2px #62D3EF, 0 0 6px #62d3ef44;
  font-family: "meter-font";
  font-size: 22px;
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.endpoint {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 2px dashed #3b82f6;
  border-radius: 50%;
  background: #ffffffcc;
  z-index: 3;
  cursor: crosshair;
}

.endpoint.active {
  background: #dbeafe;
  border-color: #2563eb;
}

.endpoint.hover {
  transform: translate(-50%, -50%) scale(1.25);
}

/* 连通端点高亮：当某端点悬停时，其所有通过导线连通的端点以强调色显示 */
.endpoint.connected {
  border-color: #10b981;
  /* teal-500 */
  background: #ecfdf5;
  /* teal-50 */
  transform: translate(-50%, -50%) scale(1.25);
}

.bottom-panel {
  position: fixed;
  left: 140px;
  /* 与左侧栏对齐 */
  right: 360px;
  /* 默认让出 AI 侧栏宽度，实际由内联样式覆盖 */
  bottom: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.bottom-panel .panel-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}

/* 右侧操作区 */
.panel-actions {
  margin-left: auto;
}

.danger-btn {
  padding: 6px 10px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
  cursor: pointer;
  width: max-content;
}

.danger-btn:hover {
  background: #fecaca;
  border-color: #ef4444;
}

/* 预设区域样式 */
.presets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.preset-label {
  color: #4b5563;
  font-size: 12px;
}

.preset-btn {
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}

.preset-btn:hover {
  background: #f3f4f6;
}

.bottom-panel .props {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.prop-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prop-row .label {
  color: #374151;
  font-size: 12px;
}

.prop-row .unit {
  color: #6b7280;
  font-size: 12px;
}

/* 旋转控制样式 */
.deg-input {
  width: 70px;
}

.rot-btn {
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}

.rot-btn:hover {
  background: #f3f4f6;
}

/* 文本框样式 */
.text-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  padding: 6px;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
  pointer-events: auto;
  user-select: text;
}
</style>
