import { drainOrientation, rotationPlan, batchTitles, batchSeeds } from './batch.js';
import { departure as buildDeparture, garagePath } from './routes.js';
import { journey, journeyPosition, scheduleDepartures } from './schedule.js';
import { carPaints, theme } from './theme.js';
import { at, advance, activeCorridors, passageOrder, resolveGridlock } from './motion.js';
import { createPerimeter } from './perimeter.js';
import { center, port, curve, rotate, trace, generateSample, generate, suggestion, solve, directions } from './model.js';
const $ = id => document.getElementById(id);
const canvas = $('game');
let ctx = canvas.getContext('2d'), backdrop = null;
let W = 768, H = 740, CX = 384, CY = 360;
const TAU = Math.PI * 2, FINISH = 0;
const params = new URLSearchParams(location.search);
let mode = params.get('mode') === 'batch' ? 'batch' : 'free';
let turnCount = 0, turnGoal = 0, roundStarted = 0, batchAvailable = [];
let batchClock = 0, pendingDepartures = [];
const freeOptions = ['01 · 连弯初见 / 10 辆', '02 · 交织长路 / 16 辆', '03 · 满盘绕行 / 22 辆', '04 · 超大桌面 / 96 辆'];
let kind = params.get('kind') === 'hex' ? 'hex' : 'square', scenario = params.get('size') === 'xl' ? 3 : 1, variation = 0, board, cars, total, delivered = 0;
if (mode === 'batch') scenario = 0;
let resumeAfterTurn = [], templates = new Map();
let traffic = [], hover = null, selected = null, auto = false, lastAuto = 0, speed = 2;
let turnAnimation = null, last = performance.now(), stats, idleFor = 0;
const mod = a => (a % TAU + TAU) % TAU;
const scale = () => kind === 'square' ? 68 : 74;
const screen = p => ({ x: CX + p.x * scale(), y: CY + p.y * scale() });
const carCenter = car => screen(center(kind, car.x, car.y));
let perimeter, finishPath;
const ring = a => perimeter.at(a);
function poly(points, color, width = 1, dash = []) {
  if (!points.length) return;
  ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y);
  for (const p of points.slice(1)) ctx.lineTo(p.x, p.y);
  ctx.strokeStyle = color; ctx.lineWidth = width; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.setLineDash(dash); ctx.stroke(); ctx.setLineDash([]);
}
function roundRect(x, y, w, h, r, fill, stroke) {
  ctx.beginPath(); ctx.roundRect(x, y, w, h, r);
  if (fill) { ctx.fillStyle = fill; ctx.fill(); }
  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 1; ctx.stroke(); }
}
function text(value, x, y, size = 12, color = '#6e8574', align = 'center') {
  ctx.fillStyle = color; ctx.font = `500 ${size}px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif`; ctx.textAlign = align; ctx.fillText(value, x, y);
}
const departure = route => buildDeparture(route, kind, screen, perimeter);

function busy() { return !!turnAnimation || pendingDepartures.length > 0 || traffic.some(t => ['board', 'waiting', 'joining'].includes(t.stage) && t.distance < t.boardLength + 27); }
function say(message) { $('status').textContent = message; }
function ui() {
  $('remaining').textContent = cars.length; $('transit').textContent = traffic.length; $('arrived').textContent = delivered;
  $('meter').style.width = `${delivered / total * 100}%`;
  $('left').disabled = $('right').disabled = (mode === 'batch' && busy()) || !!turnAnimation || (!cars.length && !traffic.some(t => t.distance < t.boardLength + 27));
  if (mode === 'batch') batchStatus();
  $('auto').textContent = auto ? 'Ⅱ 暂停演示' : '▶ 自动演示'; $('auto').setAttribute('aria-pressed', String(auto));
}
function batchStatus() {
  const internal = traffic.filter(t => ['board', 'waiting', 'joining'].includes(t.stage) && t.distance < t.boardLength + 27);
  const outside = traffic.length - internal.length;
  let phase, label, message;
  if (turnAnimation) {
    phase = 'turning'; label = '转动中'; message = '道路转动中，转好后即可查看能放行的车辆。';
  } else if (pendingDepartures.length || internal.length) {
    phase = 'running'; label = '放行中';
    message = `本轮放行 ${roundStarted} 辆 · 待发 ${pendingDepartures.length} 辆 · 盘内 ${internal.length} 辆 · 外环 ${outside} 辆。已错开交汇时间，出发后连续通行。`;
  } else if (!cars.length) {
    phase = traffic.length ? 'arriving' : 'complete'; label = traffic.length ? '到站中' : '已清空';
    message = traffic.length ? `棋盘已清空，外环还有 ${traffic.length} 辆正在前往终点。` : '全部抵达！';
  } else if (batchAvailable.length) {
    phase = 'ready'; label = '发车'; message = `当前方向可放行 ${batchAvailable.length} 辆，点击中间按钮统一放行，自动错开路线冲突。`;
  } else {
    phase = 'blocked'; label = '需转盘'; message = `当前方向无车可走，剩余 ${cars.length} 辆。请左转或右转棋盘。`;
  }
  $('batch-hud').dataset.phase = phase;
  $('hint-label').textContent = label;
  $('hint').disabled = phase !== 'ready';
  $('hint').setAttribute('aria-label', phase === 'ready' ? `统一发车 ${batchAvailable.length} 辆` : label);
  $('hint').setAttribute('aria-pressed', String(phase === 'running'));
  $('run-symbol').setAttribute('d', 'M24 17L43 30 24 43Z');
  $('turn-count').textContent = `已转 ${turnCount} 次`;
  $('batch-result').textContent = phase === 'running' ? `放行中 · 待发 ${pendingDepartures.length} / 盘内 ${internal.length} / 外环 ${outside}`
    : phase === 'ready' ? `可发车 ${batchAvailable.length} 辆` : message;
  if ($('status').textContent !== message) say(message);
}
function listCars() {
  $('car-list').replaceChildren(...cars.map(car => {
    const button = document.createElement('button'); button.textContent = `车 ${Number(car.id.slice(1)) + 1}`;
    button.addEventListener('click', () => { if (mode === 'batch') selected = car.id; else fire(car.id); }); return button;
  }));
}
function cacheRoutes() {
  const order = passageOrder(board, board.cars, trace);
  templates = new Map(board.cars.map(car => {
    const route = trace(board, car, []);
    return [car.id, route.status === 'exit' ? { car, ...departure(route), distance: 0, order: order.get(car.id) } : null];
  }));
}
function reset() {
  const batch = mode === 'batch';
  const large = !batch && scenario === 3;
  W = large ? 1320 : 768; H = large ? 1380 : 740; CX = W / 2; CY = large ? 690 : 360;
  canvas.width = W; canvas.height = H; backdrop = null;
  document.body.classList.toggle('desktop-level', large || batch);
  document.body.classList.toggle('batch-mode', batch);
  canvas.style.setProperty('--board-aspect', String(W / H));
  $('mode').value = mode;
  canvas.setAttribute('aria-label', batch ? '转盘发车棋盘，点击车辆查看路线，点击中间发车按钮统一放行。' : '交互车场，点击车辆立即发车。也可用车辆操作列表。');
  const labels = batch ? batchTitles.map((title, i) => `0${i + 1} · ${title} / 16 辆`) : freeOptions;
  $('scenario').replaceChildren(...labels.map((label, i) => { const option = document.createElement('option'); option.value = String(i); option.textContent = label; return option; }));
  $('auto').hidden = batch; $('batch-help').hidden = $('batch-hud').hidden = !batch;
  $('hint').disabled = false;
  $('hint-label').textContent = batch ? '发车' : '路线提示';
  $('hint').setAttribute('aria-label', batch ? '统一发车' : '查看路线提示');
  turnCount = 0; roundStarted = 0;
  batchClock = 0; pendingDepartures = [];
  $('batch-result').textContent = '点击发车开始';
  $('scenario').value = String(scenario);
  $('new').textContent = batch ? '下一关' : large ? '换个朝向' : '换张路网';
  perimeter = createPerimeter(kind, CX, CY, scale(), large ? 7 : 3);
  finishPath = garagePath(perimeter, W);
  board = batch ? generate(kind, batchSeeds[kind][scenario], 16) : generateSample(kind, scenario, variation);
  if (batch) { turnGoal = rotationPlan(board).turns.length; $('turn-goal').textContent = `目标 ${turnGoal} 次`; }
  cars = [...board.cars]; batchAvailable = batch ? drainOrientation(board, cars).departed : []; total = cars.length; traffic = []; resumeAfterTurn = []; idleFor = 0; delivered = 0; hover = selected = null; auto = false; turnAnimation = null;
  cacheRoutes();
  $('win').hidden = true;
  $('level-label').textContent = batch ? batchTitles[scenario] : scenario === 3 ? '超大桌面关卡' : `关卡 ${scenario + 1}`;
  document.querySelectorAll('.level-progress b').forEach((b,i) => b.classList.toggle('current', i === scenario));
  const solution = solve(board), multi = solution.paths.filter(p => p.bends >= 2).length;
  stats = { mean: (solution.paths.reduce((sum,p) => sum+p.bends,0)/total).toFixed(1), multi, max: Math.max(...solution.paths.map(p => p.bends)), solvable: solution.solvable };
  $('stats').textContent = `参考路线：平均 ${stats.mean} 弯，最长 ${stats.max} 弯；${multi}/${total} 辆经过多弯。路网 #${board.seed}。`;
  $('board-label').textContent = kind === 'square' ? `${large ? 15 : 7} × ${large ? 15 : 7} · 四向道路` : `${board.cells.length} 格 · 六向道路`;
  document.querySelectorAll('[data-kind]').forEach(b => { b.classList.toggle('active', b.dataset.kind === kind); b.setAttribute('aria-pressed', String(b.dataset.kind === kind)); });
  say(batch ? '点击中间发车；没有可通行车辆时，由你转动棋盘，再继续发车。' : '点击立即开车；遇到前车或交叉冲突会刹停，路空后自动继续。'); listCars(); ui();
}
function fire(id) {
  const car = cars.find(c => c.id === id); if (!car) return;
  if (turnAnimation) { if (!resumeAfterTurn.includes(id)) resumeAfterTurn.push(id); return; }
  // Occupancy never prevents departure: contact is checked against actual positions while driving.
  const route = trace(board, car, []);
  if (route.status !== 'exit') {
    selected = id; say('这条路线是闭环，请转动底盘换路。'); return;
  }
  traffic.push({ ...templates.get(id), car, stage: 'board', stopped: false });
  cars = cars.filter(c => c.id !== id); selected = hover = null;
  say(mode === 'batch' ? '沿绿色提示路线发车中；本轮不会自动转动棋盘。' : '已经出发，可以继续点其他车；前方有车时会停下等候。');
  listCars(); ui();
}
function turn(direction) {
  if (turnAnimation || (mode === 'batch' && busy())) return;
  if (mode === 'batch' && cars.length) { auto = false; turnCount++; $('batch-result').textContent = '已调整方向，点击发车'; }
  // Re-seat cars still inside the rotating panel before changing its route geometry.
  const returning = traffic.filter(t => ['board','waiting','joining'].includes(t.stage) && t.distance < t.boardLength + 27);
  resumeAfterTurn = returning.map(t => t.car.id);
  cars.push(...returning.map(t => t.car));
  traffic = traffic.filter(t => !returning.includes(t));
  if (!cars.length) return;
  listCars();
  turnAnimation = { from: board, direction, time: 0 };
  selected = hover = null;
  say(mode === 'batch' ? '道路转动中，转好后点击中间发车。' : `内部道路${direction > 0 ? '顺' : '逆'}时针转动 ${kind === 'square' ? 90 : 60}°；盘内行驶车辆归位，转好后重新出发。`); ui();
}
function startBatch() {
  if (turnAnimation || busy() || !batchAvailable.length) return;
  const ids = batchAvailable;
  const candidates = ids.map(id => ({ ...templates.get(id), journey: journey(templates.get(id), perimeter, finishPath) }));
  pendingDepartures = scheduleDepartures(candidates, {
    now: batchClock, active: traffic, parked: cars.map(car => ({ id: car.id, ...carCenter(car) })),
    clearance: scale() * .92 + 2, parkedClearance: scale() * .8 + 1,
  });
  batchAvailable = []; roundStarted = ids.length; auto = true; selected = hover = null;
  tickBatch(0); listCars(); ui();
}

function tickBatch(dt) {
  batchClock += dt * speed;
  const starting = pendingDepartures.filter(t => t.start <= batchClock + 1e-8);
  if (starting.length) {
    const ids = new Set(starting.map(t => t.car.id));
    cars = cars.filter(c => !ids.has(c.id));
    pendingDepartures = pendingDepartures.filter(t => !ids.has(t.car.id));
    traffic.push(...starting); listCars();
  }
  for (const actor of traffic) {
    const elapsed = batchClock - actor.start;
    actor.pose = journeyPosition(actor.journey, elapsed);
    actor.distance = actor.pose.distance;
    actor.stage = actor.distance < actor.journey.ringStart ? 'board'
      : actor.distance < actor.journey.finishStart ? 'ring' : 'finish';
    if (elapsed >= actor.journey.duration) { actor.stage = 'done'; delivered++; }
  }
}
function hint() {
  if (busy() || !cars.length) return;
  const next = suggestion(board, cars);
  if (!next) { say('没有可用路线，请换张路网。'); return; }
  if (next.turn) { turn(Math.sign(next.turn)); return; }
  selected = next.id;
  const car = cars.find(c => c.id === next.id), route = trace(board, car, cars);
  say(`已标出车 ${Number(car.id.slice(1)) + 1} 的路线 · ${route.bends} 处弯道。点击这辆车发车。`);
}
function drawCar(car, x, y, angle, glow = false) {
  const size = scale() / 37 * 1.1;
  const paint = carPaints[car.color % carPaints.length];
  ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.scale(size, size);
  if (glow) { ctx.beginPath(); ctx.arc(0, 0, 18, 0, TAU); ctx.fillStyle = '#ffcc0030'; ctx.fill(); ctx.strokeStyle = '#f5bd1d'; ctx.lineWidth = 1.4; ctx.stroke(); }
  // Symmetric top-down silhouette: no offset colored slab beneath the tires.
  // Rounded body and compact wheels still fit the model's .36-radius envelope.
  for (const side of [-1, 1]) for (const axle of [-5.5, 5.5]) roundRect(axle - 2.5, side * 7 - 2, 5, 4, 1.5, '#354841');
  roundRect(-11.5, -7, 23, 14, 4, paint.side);
  roundRect(-11, -6.5, 22, 13, 3.5, paint.face);
  poly([{x:-6,y:-5},{x:7,y:-5}], paint.light, 1.5);
  roundRect(-5, -4.5, 11, 9, 2.5, paint.side);
  roundRect(2, -4, 4, 8, 1.2, '#355578');
  roundRect(-4, -4, 3, 8, 1, paint.light);
  for (const sy of [-4, 3]) roundRect(10, sy, 1, 2, .5, '#fffbd6');
  // High-contrast forward arrow stays legible on every body color.
  ctx.beginPath();
  [[-7,-2],[1,-2],[1,-5],[8,0],[1,5],[1,2],[-7,2]].forEach(([px,py], i) => i ? ctx.lineTo(px,py) : ctx.moveTo(px,py));
  ctx.closePath(); ctx.fillStyle = '#F9FFFF'; ctx.fill(); ctx.strokeStyle = '#56637b'; ctx.lineWidth = .7; ctx.stroke();
  ctx.restore();
}
function drawRing() {
  const points = perimeter.points;
  poly(points, theme.ringEdge, 48); poly(points, theme.ring, 38); poly(points, theme.ringMark, 1.3, [16, 24]);
  for (let i = 0; i < 12; i++) {
    const a = i / 12 * TAU, p = ring(a); ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.angle);
    poly([{ x: -5, y: -4 }, { x: 0, y: 0 }, { x: -5, y: 4 }], theme.ringMark, 2); ctx.restore();
  }
  poly(finishPath.points, theme.ringEdge, 42); poly(finishPath.points, theme.ring, 32);
  poly(finishPath.points, theme.ringMark, 1.5, [6, 9]);
  text('ONE WAY  /  顺时针', CX, H - 28, 11, '#8e97a6');

}
function drawRamps() {
  if (kind === 'hex') return;
  // Fixed exterior ramps cover every boundary port in both rotationally symmetric grids.
  const occupied = new Set(board.cells.map(c => `${c.x},${c.y}`));
  for (const cell of board.cells) directions(kind).forEach(([dx, dy], d) => {
    if (occupied.has(`${cell.x + dx},${cell.y + dy}`)) return;
    const c = center(kind, cell.x, cell.y), p = port(kind, d);
    const route = { points: [c, { x: c.x + p.x, y: c.y + p.y }], exitDir: d };
    const ramp = departure(route).connector;
    poly(ramp, theme.ringEdge, 12); poly(ramp, theme.roadEdge, 8);
  });
}
function clipHexRoads() {
  // Keep road strokes and round caps inside the actual outer tile boundary.
  if (kind !== 'hex') return;
  ctx.beginPath();
  for (const cell of board.cells) {
    const c = screen(center(kind, cell.x, cell.y)), radius = scale() / Math.sqrt(3);
    for (let i = 0; i < 6; i++) {
      const x = c.x + Math.cos(i * TAU / 6) * radius;
      const y = c.y + Math.sin(i * TAU / 6) * radius;
      if (i) ctx.lineTo(x,y); else ctx.moveTo(x,y);
    }
    ctx.closePath();
  }
  ctx.clip();
}
function drawBoard() {
  ctx.save();
  // The rotating road layer remains underneath the fixed, close-fitting frame.
  ctx.beginPath();
  perimeter.points.forEach((p, i) => {
    const x = CX + (p.x - CX) * (scenario === 3 ? .96 : .9), y = CY + (p.y - CY) * (scenario === 3 ? .96 : .9);
    if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y);
  });
  ctx.closePath(); ctx.clip();
  if (turnAnimation) {
    const t = Math.min(1, turnAnimation.time / .45), ease = t * t * (3 - 2 * t);
    ctx.translate(CX, CY); ctx.rotate(ease * turnAnimation.direction * TAU / directions(kind).length); ctx.translate(-CX, -CY);
  }
  const s = scale();
  for (const cell of board.cells) {
    const c = screen(center(kind, cell.x, cell.y));
    if (kind === 'square') roundRect(c.x - s / 2 + .25, c.y - s / 2 + .25, s - .5, s - .5, 2, theme.board, theme.boardEdge);
    else {
      const points = Array.from({ length: 7 }, (_, i) => ({ x: c.x + Math.cos(i * TAU / 6) * (s / Math.sqrt(3) - .15), y: c.y + Math.sin(i * TAU / 6) * (s / Math.sqrt(3) - .15) }));
      ctx.beginPath(); points.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y)); ctx.fillStyle = theme.board; ctx.fill(); ctx.strokeStyle = theme.boardEdge; ctx.lineWidth = 1; ctx.stroke();
    }
  }
  const tracks = [];
  for (const cell of board.cells) cell.tracks.forEach((b, a) => {
    if (a < b) tracks.push(curve(kind, cell, a, b).map(screen));
  });
  clipHexRoads();
  // Draw each paired lane with its own outline. At crossings, the small overpass
  // edge keeps the two connections visually separate rather than a four-way junction.
  for (const points of tracks) {
    poly(points, theme.roadEdge, 10); poly(points, theme.road, 8);
  }
  ctx.restore();
}
function drawPreview() {
  if (turnAnimation) return;
  const id = hover || selected, car = cars.find(c => c.id === id); if (!car) return;
  const route = trace(board, car, cars);
  const color = mode === 'batch' || route.status === 'exit' ? '#329378' : '#cc725d';
  const points = route.points.map(screen);
  ctx.save(); clipHexRoads();
  poly(points, `${color}25`, 17); poly(points, color, 4);
  ctx.restore();
  if (route.status === 'exit' && kind !== 'hex') poly(departure(route).connector, '#32937880', 3, [5, 7]);
  const p = points.at(-1); ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, TAU); ctx.fillStyle = color; ctx.fill();
  if (route.blocker) {
    const c = carCenter(cars.find(c => c.id === route.blocker)); ctx.beginPath(); ctx.arc(c.x, c.y, 21, 0, TAU); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke();
  }
}
function drawActiveRoutes() {
  if (mode !== 'batch' || turnAnimation) return;
  for (const actor of traffic) {
    if (actor.stage !== 'board' || actor.distance >= actor.boardLength) continue;
    const color = '#329378';
    const points = actor.path.points.filter((p, i) => actor.path.lengths[i] <= actor.boardLength);
    ctx.save(); clipHexRoads();
    // Match the hover guide: a soft halo and one solid line, without a moving tail.
    poly(points, `${color}25`, 17); poly(points, color, 4);
    const end = points.at(-1);
    ctx.beginPath(); ctx.arc(end.x, end.y, 5, 0, TAU); ctx.fillStyle = color; ctx.fill();
    ctx.restore();
  }
}
function drawTerminal() {
  const end = finishPath.points.at(-1), x = end.x - 33, y = end.y - 32;
  roundRect(x, y, 66, 49, 9, '#4787ED');
  roundRect(x + 8, y + 19, 50, 30, 4, '#2456a7');
  for (let i = 0; i < 6; i++) for (let j = 0; j < 2; j++) roundRect(x + 9 + i * 8, y + 19 + j * 7, 8, 7, 0, (i + j) % 2 ? '#f9ffff' : '#3273d1');
  text('终 点', end.x, y - 9, 16, '#4787ED');
  text('GARAGE', end.x, y + 13, 8, '#ffffff');
}

function draw(now) {
  ctx.clearRect(0, 0, W, H);
  if (turnAnimation) { drawRamps(); drawRing(); drawBoard(); }
  else {
    if (!backdrop) {
      backdrop = document.createElement('canvas'); backdrop.width = W; backdrop.height = H;
      const main = ctx; ctx = backdrop.getContext('2d');
      drawRamps(); drawRing(); drawBoard(); ctx = main;
    }
    ctx.drawImage(backdrop, 0, 0);
  }
  drawPreview();
  drawActiveRoutes();
  for (const car of cars) {
    const c = carCenter(car), angle = -Math.PI / 2 + car.dir * TAU / directions(kind).length;
    drawCar(car, c.x, c.y, angle, car.id === selected || car.id === hover);
    const pending = pendingDepartures.find(t => t.car.id === car.id);
    if (pending) {
      const countdown = Math.max(0, (pending.start - batchClock) / speed).toFixed(1);
      roundRect(c.x - 20, c.y - 37, 40, 17, 6, '#F9FFFFe8');
      text(`${countdown}s`, c.x, c.y - 25, 11, '#4882B3');
    }
  }
  for (const t of traffic) {
    const p = t.pose || (t.stage === 'ring' ? ring(t.angle)
      : at(t.stage === 'finish' ? finishPath : t.path, t.distance));
    drawCar(t.car, p.x, p.y, p.angle);
    if (t.stopped) text(t.retreating ? '↶' : 'Ⅱ', p.x, p.y - 29, 14, '#b96549');
  }

  drawTerminal();

}
function tickFree(dt) {
  const reversed = resolveGridlock(traffic, cars.map(carCenter), t => t.stage === 'ring' ? ring(t.angle) : at(t.stage === 'finish' ? finishPath : t.path, t.distance), scale() * .72 + 1, dt * 140 * speed);
  const lane = traffic.filter(t => t.stage === 'ring' || t.stage === 'joining');
  for (const t of traffic) {
    if (t.stage === 'board') {
      if (reversed.has(t)) continue;
      const obstacles = cars.map(carCenter);
      // Parked cars occupy their bodies, never roads they might use later.
      const corridors = activeCorridors(traffic, t);
      for (const other of traffic) {
        if (other === t || other.stage === 'done') continue;
        obstacles.push(other.stage === 'ring' ? ring(other.angle) : at(other.stage === 'finish' ? finishPath : other.path, other.distance));
      }
      const target = Math.min(t.path.length - 34, t.distance + dt * 240 * speed);
      const next = advance(t.path, t.distance, target, obstacles, corridors, scale() * .72 + 1);
      t.stopped = next < target - .1;
      t.blockedFor = t.stopped ? (t.blockedFor || 0) + dt : 0;
      t.distance = next;
      if (t.distance >= t.path.length - 34 - .01) { t.stage = 'waiting'; t.stopped = false; }
    } else if (t.stage === 'waiting') {
      const clear = lane.every(o => Math.min(mod(o.angle - t.entry), mod(t.entry - o.angle)) * perimeter.unit > 98);
      if (clear) { t.stage = 'joining'; t.angle = t.entry; lane.push(t); }
    } else if (t.stage === 'joining') {
      t.distance += dt * 180 * speed;
      if (t.distance >= t.path.length) { t.stage = 'ring'; t.angle = t.entry; t.remaining = mod(FINISH - t.entry) * perimeter.unit; }
    } else if (t.stage === 'ring') {
      let advance = dt * 180 * speed;
      for (const other of lane) if (other !== t) advance = Math.min(advance, Math.max(0, mod(other.angle - t.angle) * perimeter.unit - 80));
      advance = Math.min(advance, t.remaining); t.angle += advance / perimeter.unit; t.remaining -= advance;
      if (t.remaining <= .01) { t.stage = 'finish'; t.distance = 0; }
    } else if (t.stage === 'finish') {
      t.distance += dt * 180 * speed;
      if (t.distance >= finishPath.length) { t.stage = 'done'; delivered++; }
    }
  }
}
function tick(dt, now) {
  const before = traffic.filter(t => t.stage === 'board').reduce((sum,t) => sum+t.distance,0);
  if (turnAnimation) {
    turnAnimation.time += dt;
    if (turnAnimation.time >= .45) {
      board = rotate(board, turnAnimation.direction); backdrop = null; cacheRoutes(); turnAnimation = null;
      const ids = resumeAfterTurn; resumeAfterTurn = []; ids.forEach(fire);
      if (mode === 'batch') batchAvailable = drainOrientation(board, cars).departed;
    }
  }
  if (mode === 'batch') tickBatch(dt); else tickFree(dt);
  const progressed = traffic.filter(t => t.stage === 'board').reduce((sum,t) => sum+t.distance,0) > before + .1;
  idleFor = progressed ? 0 : idleFor + dt;
  traffic = traffic.filter(t => t.stage !== 'done');
  if (delivered === total && traffic.length === 0) { say('全部抵达！'); $('win-count').textContent = mode === 'batch' ? `${total} 辆全部抵达 · 转动 ${turnCount} 次 / 目标 ${turnGoal} 次` : `${total} 辆小车，全部到齐`; $('win').hidden = false; auto = false; }
  // Recover a pre-existing manual pile-up even after every car has been clicked.
  // Re-seat only internal vehicles; delivered cars and perimeter traffic continue.
  if (mode === 'free' && auto && !turnAnimation && busy() && idleFor > 3) {
    const returning = traffic.filter(t => ['board', 'waiting', 'joining'].includes(t.stage) && t.distance < t.boardLength + 27);
    if (returning.length) {
      cars.push(...returning.map(t => t.car));
      traffic = traffic.filter(t => !returning.includes(t));
      idleFor = 0; listCars();
      say('检测到盘内拥堵，车辆归位后按可通行顺序继续演示。');
    }
  }
  if (mode === 'batch' && auto && !busy()) auto = false;
  // Free-play demonstration keeps its automatic rotation and sequential dispatch.
  if (mode === 'free' && auto && !turnAnimation && !busy() && now - lastAuto > 220) {
    const next = suggestion(board, cars); lastAuto = now;
    if (!next) { if (!traffic.length) auto = false; }
    else if (next.turn) turn(Math.sign(next.turn));
    else fire(next.id);
  }
  ui();
}
canvas.addEventListener('pointermove', e => {
  if (!$('preview').checked || e.pointerType === 'touch') return;
  const rect = canvas.getBoundingClientRect(), x = (e.clientX - rect.left) * W / rect.width, y = (e.clientY - rect.top) * H / rect.height;
  hover = cars.find(car => { const c = carCenter(car); return Math.hypot(x - c.x, y - c.y) < scale() * .39; })?.id || null;
  canvas.style.cursor = hover ? 'pointer' : 'default';
});
canvas.addEventListener('pointerleave', () => { hover = null; });
canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect(), x = (e.clientX - rect.left) * W / rect.width, y = (e.clientY - rect.top) * H / rect.height;
  const closest = cars.map(car => ({ car, distance: Math.hypot(x-carCenter(car).x,y-carCenter(car).y) })).sort((a,b) => a.distance-b.distance)[0];
  const car = closest && closest.distance < Math.max(scale()*.42, 22*W/rect.width) ? closest.car : null;
  if (car) { if (mode === 'batch') { selected = car.id; say('已标出这辆车的路线；点击中间按钮统一发车。'); } else fire(car.id); }
});
$('left').onclick = () => turn(-1); $('right').onclick = () => turn(1); $('hint').onclick = () => mode === 'batch' ? startBatch() : hint();
$('reset').onclick = $('restart').onclick = $('play-again').onclick = reset; $('new').onclick = () => { if (mode === 'batch') scenario = (scenario + 1) % batchTitles.length; else variation++; reset(); };
$('mode').onchange = e => { mode = e.target.value; scenario = mode === 'batch' ? 0 : 1; variation = 0; reset(); };
$('scenario').onchange = e => { scenario = Number(e.target.value); variation = 0; reset(); };
$('speed').oninput = e => { speed = Number(e.target.value); $('speed-label').textContent = `${speed}×`; };
$('preview').onchange = () => { hover = null; };
$('auto').onclick = () => { auto = !auto && (cars.length > 0 || traffic.length > 0); ui(); };
document.querySelectorAll('[data-kind]').forEach(b => b.onclick = () => { kind = b.dataset.kind; reset(); });
reset();
requestAnimationFrame(function frame(now) { const dt = Math.min(.05, (now - last) / 1000); last = now; tick(dt, now); draw(now); requestAnimationFrame(frame); });