import { AirportGame, SIDES, boardAt, catalogs, parkedCount, copy, boardRadius, waitingPose, apronDistance, trayHull, rimCrossing, TRAY_PAD } from './core.js';
import { LEVELS } from './levels.js';
import { requestReward } from './rewards.js';
import { position, PORTS, hexPoints, trackPoints, sweepPath } from '../../src/path-math.js';
import { DIRS, key } from '../../src/core.js';
import { roundedHex } from '../../src/tile-shape.js';
import { travelProgress } from '../../src/exit-animation.js';
import { collisionPhase } from '../../src/collision-animation.js';
import { artDirection, directionTheme } from '../../src/art-directions.js';
import { ICONS } from '../../src/ui-skin.js';

const direction = artDirection('macaron');
const world = directionTheme(direction, 'lagoon');
const pigments = direction.pigments;
const materials = world.materials;

const $ = id => document.getElementById(id), canvas = $('board'), ctx = canvas.getContext('2d');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
const STORAGE = 'hex-airport-v1';
let saved = { completed: [], last: 0, sound: true };
try { const value = JSON.parse(localStorage.getItem(STORAGE)); if (value && Array.isArray(value.completed)) saved = { ...saved, ...value }; } catch {}
function persist() { try { localStorage.setItem(STORAGE, JSON.stringify(saved)); } catch {} }
let index = Number.isInteger(saved.last) && saved.last >= 0 && saved.last < LEVELS.length ? saved.last : 0;
let game, motions = [], rotation = null, feedback = null, queue = [], requestId = 0, diagnosis = null, generation = 0;
let dragSpin = null;
const STEP=Math.PI/3, SNAP=22*Math.PI/180, FLICK_MS=240, FLICK_ANG=.18;
function wrapDelta(a){while(a>Math.PI)a-=Math.PI*2;while(a<-Math.PI)a+=Math.PI*2;return a;}
let view = { width: 390, height: 460, size: 28, ox: 195, oy: 230 }, audioContext;
const worker = new Worker(new URL('./solver-worker.js', import.meta.url), { type: 'module' });
worker.onmessage = ({ data }) => {
  if (data.request !== requestId) return;
  diagnosis = data.result;
  if (diagnosis.status === 'deadlock') game.deadlocked = true;
  settle();
};
worker.onerror = () => { diagnosis = { status: 'unknown' }; settle(); };
function diagnose() {
  diagnosis = null;
  worker.postMessage({ request: ++requestId, level: game.level, state: copy(game.state) });
}
function sound(name) {
  if (!saved.sound) return;
  try {
    audioContext ??= new (window.AudioContext || window.webkitAudioContext)();
    audioContext.resume().catch(() => {});
    const frequencies = { land: [440, 660], exit: [660, 880], rotated: [330, 440], hit: [145], win: [523, 659, 784] }[name] || [480];
    frequencies.forEach((frequency, i) => {
      const oscillator = audioContext.createOscillator(), gain = audioContext.createGain(), t = audioContext.currentTime + i * .09;
      oscillator.frequency.value = frequency; gain.gain.setValueAtTime(.001, t); gain.gain.linearRampToValueAtTime(.045, t + .01); gain.gain.exponentialRampToValueAtTime(.001, t + .18);
      oscillator.connect(gain); gain.connect(audioContext.destination); oscillator.start(t); oscillator.stop(t + .2);
    });
  } catch {}
}
function notice(message, warning = false) { $('notice').textContent = message; $('notice').classList.toggle('warning', warning); }
let cheers = [];
// A short candy burst around the stand that just accepted a plane. Pieces stay
// outside the hex so they do not cover the nose or the bay mark. Windows with
// animation effects off still gets the burst: skipping it hid the landing.
function cheer(at, color) {
  const colors = ['#EE5398', '#E5680C', '#4C9E5A', '#578BF0', '#937DE4', '#D06E93', '#FFFFFF', pigments[color].color];
  cheers.push({
    x: at.x, y: at.y, start: performance.now(), duration: 1100,
    bits: Array.from({ length: 16 }, (_, i) => ({
      angle: -Math.PI / 2 + (i / 16) * Math.PI * 2 + (i % 2 ? .1 : -.06),
      reach: .1 + (i % 3) * .04,
      spin: (i % 2 ? 1 : -1) * (.55 + (i % 3) * .15),
      len: i % 4 === 3 ? 0 : .26 + (i % 3) * .04,
      color: colors[i % colors.length],
    })),
  });
}
function drawCheers(now) {
  const before = cheers.length;
  cheers = cheers.filter(c => now - c.start < c.duration);
  const unit = Math.max(view.size, 1);
  const stroke = Math.max(.16, 4.5 / unit);
  const dot = Math.max(.09, 3 / unit);
  for (const c of cheers) {
    const t = (now - c.start) / c.duration;
    const fade = t < .05 ? t / .05 : Math.max(0, 1 - (t - .7) / .3);
    for (const bit of c.bits) {
      const ease = 1 - Math.pow(1 - t, 2);
      const dist = 1.14 + ease * bit.reach;
      const curl = bit.spin * ease * .14;
      const x = c.x + Math.cos(bit.angle + curl) * dist;
      const y = c.y + Math.sin(bit.angle + curl) * dist + ease * ease * .05;
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(bit.angle + t * bit.spin);
      ctx.globalAlpha = fade;
      if (bit.len) line([{ x: -bit.len / 2, y: 0 }, { x: bit.len / 2, y: 0 }], bit.color, stroke);
      else { ctx.beginPath(); ctx.arc(0, 0, dot, 0, Math.PI * 2); ctx.fillStyle = bit.color; ctx.fill(); }
      ctx.restore();
    }
  }
  return before > 0 && !cheers.length;
}
function loadLevel(next) {
  generation++; requestId++; index = next; saved.last = index; persist();
  game = new AirportGame(LEVELS[index]); motions = []; cheers = []; rotation = null; dragSpin = null; feedback = null; queue = []; diagnosis = null;
  for (const dialog of document.querySelectorAll('dialog[open]')) dialog.close();
  $('level-title').textContent = `第 ${index + 1} 关`;
  $('level-name').textContent = game.level.name;
  notice(game.level.lesson); resize(); diagnose();
}
function waitingLocation(plane, state = game.state) {
  return waitingPose(plane, state.planes, boardRadius(game.level.cells));
}
function planeLocation(plane, state = game.state) {
  return plane.state === 'waiting' ? waitingLocation(plane, state) : { ...position(plane.q, plane.r), angle: plane.dir * Math.PI / 3 };
}
function screen(point) { return { x: view.ox + point.x * view.size, y: view.oy + point.y * view.size }; }
// A waiting plane whose edge actually connects to a same-colour stand: the runway
// exists (whether or not a plane currently blocks it). Used to prompt the player
// and to draw the approach guide; the player still performs the landing.
function approachHints() {
  if (game.won || game.deadlocked) return [];
  const routes = catalogs(game.level)[game.state.orientation].arrivals;
  const blockers = game.state.planes.filter(p => (p.state === 'ground' || p.state === 'parked'))
    .map(p => ({ ...position(p.q, p.r), id: p.id }));
  const hints = [];
  for (const plane of game.state.planes) {
    if (plane.state !== 'waiting') continue;
    const route = routes.find(r => r.side === plane.side && r.color === plane.color);
    if (!route) continue; // no entrance / no connected runway from this edge
    const hit = sweepPath(route.points, blockers.filter(b => b.id !== plane.id));
    hints.push({ plane, from: planeLocation(plane), points: route.points, blocker: hit ? hit.blocker : null });
  }
  return hints;
}
function sync() {
  $('airspace').setAttribute('aria-busy', String(game.busy.size > 0 || game.rotating));
  $('moves').textContent = game.moves;
  const parked = parkedCount(game.state), total = game.level.arrivals.length;
  $('progress').textContent = `${parked} / ${total}`;
  $('progress-bar').style.width = `${100 * parked / total}%`;
  $('left').disabled = $('right').disabled = game.busy.size > 0 || game.rotating || game.moves <= 0 || game.won || game.deadlocked;
  $('sound').textContent = `声音：${saved.sound ? '开' : '关'}`;
  const controls = $('plane-controls');
  const live = new Set();
  for (const plane of game.state.planes) {
    if (plane.state === 'gone') continue;
    live.add(plane.id);
    let button = controls.querySelector(`[data-plane="${plane.id}"]`);
    if (!button) {
      button = document.createElement('button'); button.type = 'button'; button.className = 'plane-hit'; button.dataset.plane = plane.id;
      button.addEventListener('click', () => perform({ type: 'tap', id: plane.id })); controls.append(button);
    }
    const label = plane.state === 'waiting' ? `${SIDES[plane.side]}停机坪待降落` : plane.kind === 'arrival' ? '已停靠，可再次起飞' : '地面待起飞';
    button.setAttribute('aria-label', `${pigments[plane.color].name}飞机 ${plane.id}，${label}`);
    const p = screen(planeLocation(plane));
    button.style.left = `${p.x}px`; button.style.top = `${p.y}px`;
    button.style.width = button.style.height = `${Math.max(44, view.size * 1.65)}px`;
    button.disabled = game.busy.has(plane.id) || game.won || game.deadlocked || (game.moves <= 0 && plane.state !== 'waiting');
    button.classList.toggle('queued', queue.some(a => a.id === plane.id));
  }
  for (const button of [...controls.children]) if (!live.has(button.dataset.plane)) button.remove();
}
function perform(action, opts = {}) {
  if (document.querySelector('dialog[open]')) return;
  if (game.rotating && action.type === 'tap') {
    if (!queue.some(a => a.id === action.id) && !game.busy.has(action.id)) queue.push(action);
    sync(); return;
  }
  const before = copy(game.state), result = game.begin(action);
  if (['busy', 'invalid', 'finished', 'out-of-moves'].includes(result.status)) return;
  if (result.status === 'ambiguous') { notice('此布局有多个停靠结果，已暂停操作。', true); return; }
  feedback = null; const now = performance.now();
  if (result.status === 'rotated') {
    if (opts.skipSpin) game.finish('rotation');
    else rotation = { old: boardAt(game.level, before.orientation), direction: action.direction, start: now, duration: 240 };
    sound('rotated'); notice('轨道已调整，观察飞机所在侧的连接。');
  } else {
    const plane = before.planes.find(p => p.id === action.id), updated = game.state.planes.find(p => p.id === action.id);
    let points, kind;
    if (result.status === 'land') {
      const start = waitingLocation(plane, before);
      // Exterior approach stays outside the board and joins the selected boundary port.
      const mouth = result.points[0], n = PORTS[result.exitDir ?? plane.side], len = Math.hypot(n.x,n.y);
      const approach = { x: mouth.x + n.x / len * 1.3, y: mouth.y + n.y / len * 1.3 };
      points = [start, approach, ...result.points]; kind = 'land'; sound('land');
      notice('停靠成功。留意新飞机是否挡住其他通路。');
    } else if (result.status === 'exit') {
      points = [...result.points]; kind = 'exit'; sound('exit');
      if (plane.kind === 'arrival') {
        const last = points.at(-1), n = PORTS[result.exitDir ?? result.side], len = Math.hypot(n.x,n.y);
        points.push({ x:last.x+n.x/len*1.3, y:last.y+n.y/len*1.3 }, waitingLocation(updated));
        notice(`来机已起飞，将在${SIDES[result.side]}停机坪等待。`);
      } else notice('飞机已离场，空出的通路可以用于接机。');
    } else {
      sound('hit'); kind = plane.state === 'waiting' ? 'shake' : 'bump';
      points = result.travelPoints || result.points || [planeLocation(plane)];
      if (kind === 'bump' && result.status !== 'blocked') points = [planeLocation(plane)];
      feedback = { ...result, until: now + 4500 };
      const messages = { 'blocked':'路线受阻 · 先移开高亮的飞机', 'no-stand':'没有可用的跑道', 'no-route':'没有可供行进的路线', 'loop':'没有可供离场的路线' };
      notice(messages[result.status] || '没有可供行进的路线', true);
    }
    const length = pathLength(points);
    motions.push({ id: plane.id, plane, updated, kind, points, blocker: result.blocker, start: now, duration: kind === 'shake' ? (reduced ? 100 : 420) : kind === 'bump' ? 800 : motionTiming(length, kind) });
  }
  sync(); diagnose();
}
function pathLength(points) { let length=0; for(let i=1;i<points.length;i++)length+=Math.hypot(points[i].x-points[i-1].x,points[i].y-points[i-1].y); return length; }
// Descent reads slower than taxi-out; both keep one cruising speed per unit and
// accelerate only past the knee, like the original exit timing.
function motionTiming(length, kind) {
  const msPerUnit = kind === 'land' ? 150 : 100, knee = 2600, maxMs = 3600, ramp = 90;
  const linear = length * msPerUnit;
  const base = linear <= knee ? linear : Math.min(maxMs, knee + (linear - knee) * (maxMs - knee) / Math.max(1, linear - knee) * (1 - Math.exp(-(linear - knee) / Math.max(1, maxMs - knee))));
  return Math.max(kind === 'land' ? 560 : 320, base + Math.min(ramp, base / 3));
}
function along(points, progress) {
  if (points.length < 2) return { ...points[0], angle: 0 };
  let remaining = pathLength(points) * Math.min(1, Math.max(0, progress));
  for(let i=1;i<points.length;i++){
    const a=points[i-1],b=points[i],length=Math.hypot(b.x-a.x,b.y-a.y);
    if(remaining<=length||i===points.length-1){const t=length?Math.min(1,remaining/length):0;return{x:a.x+(b.x-a.x)*t,y:a.y+(b.y-a.y)*t,angle:Math.atan2(b.y-a.y,b.x-a.x)+Math.PI/2};}
    remaining-=length;
  }
}
function show(dialog) { queue=[]; sync(); if(!dialog.open)dialog.showModal(); }
function settle() {
  if (motions.length || rotation) return;
  sync();
  // Prompt the player when a waiting plane's runway is connected (blocked or not).
  if (!game.won && !game.deadlocked && approachHints().length) {
    const guide = '来机已连通：点击它接入同色机位。';
    if ($('notice').textContent !== guide && !$('notice').classList.contains('warning')) notice(guide);
  }
  if (game.won) {
    if (cheers.some(c => performance.now() - c.start < c.duration)) return;
    if (!$('result').open) {
      if (!saved.completed.includes(game.level.id)) saved.completed.push(game.level.id);
      persist(); sound('win');
      $('result-title').textContent='全部到位';
      const remaining=game.state.planes.filter(p=>p.kind==='original'&&p.state==='ground').length;
      $('result-copy').textContent=`全部 ${game.level.arrivals.length} 架来机已停好，剩余 ${game.moves} 次操作。场内还保留了 ${remaining} 架原有飞机。`;
      $('next').hidden=false;$('next').textContent=index<LEVELS.length-1?'下一关':'回到第一关';
      $('reward').hidden=true;$('reward-note').hidden=true;show($('result'));
    }
  } else if (game.moves <= 0 || game.deadlocked) {
    $('next').hidden=true;
    $('result-title').textContent=game.deadlocked?'当前调度已无法完成':'操作次数已用完';
    $('result-copy').textContent=game.deadlocked?'增加次数也无法解开当前局面。重新安排起降顺序，再试一次。':!diagnosis?'正在检查当前局面…':diagnosis.status==='solved'?'当前局面仍有可行路线，可以补充操作次数继续。':'尚未确定当前局面是否可完成，补充次数不保证能解围。';
    const available=!game.deadlocked&&game.rewardCount<game.level.reward.maxClaims;
    if(!game.deadlocked&&!available)$('result-copy').textContent='本关的补充次数已用完，可以重新安排调度再挑战。';
    $('reward').hidden=!available;$('reward').disabled=!diagnosis||game.rewardPending;
    $('reward').textContent=window.airportAdProvider?`观看广告 · +${game.level.reward.steps} 次`:`测试补充 · +${game.level.reward.steps} 次`;
    $('reward-note').hidden=!available||!!window.airportAdProvider;
    show($('result'));
  }
}

// Drawing uses exactly the same normalized paths as collision and replay.
function polygon(points, fill, stroke, width=.04) {
  ctx.beginPath();points.forEach((p,i)=>i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y));ctx.closePath();
  if(fill){ctx.fillStyle=fill;ctx.fill();}if(stroke){ctx.strokeStyle=stroke;ctx.lineWidth=width;ctx.stroke();}
}
function line(points,color,width=.06){if(!points?.length)return;ctx.beginPath();points.forEach((p,i)=>i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y));ctx.strokeStyle=color;ctx.lineWidth=width;ctx.lineCap='round';ctx.lineJoin='round';ctx.stroke();}
function label(text,x,y,size,color=world.ink){ctx.fillStyle=color;ctx.font=`700 ${size}px "Resource Han Rounded","Microsoft YaHei",sans-serif`;ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(text,x,y);}
function roundedPoly(poly,radius){
  return poly.flatMap((v,i)=>{
    const prev=poly[(i+poly.length-1)%poly.length],next=poly[(i+1)%poly.length];
    const ka=Math.min(.5,radius/Math.hypot(prev.x-v.x,prev.y-v.y)),kb=Math.min(.5,radius/Math.hypot(next.x-v.x,next.y-v.y));
    const a={x:v.x+(prev.x-v.x)*ka,y:v.y+(prev.y-v.y)*ka},b={x:v.x+(next.x-v.x)*kb,y:v.y+(next.y-v.y)*kb};
    return Array.from({length:6},(_,j)=>{const t=j/5,u=1-t;return {x:u*u*a.x+2*u*t*v.x+t*t*b.x,y:u*u*a.y+2*u*t*v.y+t*t*b.y};});
  });
}
function ringTint(cell){
  const rings=materials.rings||[materials.board];
  return rings[(Math.abs(cell.q)+Math.abs(cell.r)+Math.abs(cell.q+cell.r))/2%rings.length];
}
const FLAT=Math.cos(Math.PI/6);
function hull(points){
  const sorted=[...points].sort((a,b)=>a.x-b.x||a.y-b.y),lower=[],upper=[],cross=(o,a,b)=>(a.x-o.x)*(b.y-o.y)-(a.y-o.y)*(b.x-o.x);
  for(const q of sorted){while(lower.length>=2&&cross(lower.at(-2),lower.at(-1),q)<=0)lower.pop();lower.push(q);}
  for(const q of sorted.reverse()){while(upper.length>=2&&cross(upper.at(-2),upper.at(-1),q)<=0)upper.pop();upper.push(q);}
  return [...lower.slice(0,-1),...upper.slice(0,-1)];
}
function insideHull(poly,x,y){for(let i=0;i<poly.length;i++){const a=poly[i],b=poly[(i+1)%poly.length];if((b.x-a.x)*(y-a.y)-(b.y-a.y)*(x-a.x)<-1e-9)return false;}return true;}
function clipToHull(points,poly){
  const out=[];
  for(let i=0;i<points.length;i++){
    const p=points[i],inn=insideHull(poly,p.x,p.y),prev=i?points[i-1]:null,prevIn=prev&&insideHull(poly,prev.x,prev.y);
    if(inn){
      if(prev&&!prevIn){const dx=p.x-prev.x,dy=p.y-prev.y,l=Math.hypot(dx,dy)||1,t=rimCrossing(poly,p,{x:-dx/l,y:-dy/l});if(t!==null)out.push({x:p.x-dx/l*t,y:p.y-dy/l*t});}
      out.push(p);
    }else if(prevIn){const dx=p.x-prev.x,dy=p.y-prev.y,l=Math.hypot(dx,dy)||1,t=rimCrossing(poly,prev,{x:dx/l,y:dy/l});if(t!==null)out.push({x:prev.x+dx/l*t,y:prev.y+dy/l*t});}
  }
  return out;
}
function apronSector(hull,side,outerR,steps=16,inset=.035){
  const a0=-Math.PI/2+side*Math.PI/3+inset,a1=-Math.PI/2+(side+1)*Math.PI/3-inset,pts=[];
  for(let i=0;i<=steps;i++){
    const a=a0+(a1-a0)*i/steps,dir={x:Math.cos(a),y:Math.sin(a)};
    const t=rimCrossing(hull,{x:0,y:0},dir),r=(t??0)+.08;
    pts.push({x:dir.x*r,y:dir.y*r});
  }
  for(let i=steps;i>=0;i--){
    const a=a0+(a1-a0)*i/steps;
    pts.push({x:Math.cos(a)*outerR,y:Math.sin(a)*outerR});
  }
  return pts;
}
function rgba(hex,a){const n=hex.replace('#','');return `rgba(${parseInt(n.slice(0,2),16)},${parseInt(n.slice(2,4),16)},${parseInt(n.slice(4,6),16)},${a})`;}
function drawApronFans(hull,outerR){
  const fill='#d1d1d1';
  for(let side=0;side<6;side++){
    polygon(apronSector(hull,side,outerR),rgba(fill,.2));
    const inset=.035,a0=-Math.PI/2+side*Math.PI/3+inset,a1=-Math.PI/2+(side+1)*Math.PI/3-inset;
    ctx.beginPath();ctx.arc(0,0,outerR,a0,a1);
    ctx.strokeStyle=rgba(fill,.16);ctx.lineWidth=.055;ctx.lineCap='round';ctx.stroke();
  }
}
function drawSpinArc(hull,angle){
  if(!angle||Math.abs(angle)<.02)return;
  let r=0;for(const v of hull)r=Math.max(r,Math.hypot(v.x,v.y));
  r+=.18;
  const a0=-Math.PI/2,commit=Math.abs(angle)>=SNAP;
  ctx.beginPath();ctx.arc(0,0,r,a0,a0+angle,angle<0);
  ctx.strokeStyle=commit?direction.accent:rgba(materials.track,.55);
  ctx.lineWidth=commit?.12:.09;ctx.lineCap='round';ctx.stroke();
}
const NOSE=.70;
function nosePoint(where){
  return {x:where.x+Math.sin(where.angle)*NOSE,y:where.y-Math.cos(where.angle)*NOSE};
}
function aircraft(plane,where,alpha=1){
  ctx.save();ctx.translate(where.x,where.y);ctx.globalAlpha=alpha;
  const color=pigments[plane.color].color;
  const face=roundedHex(0,0,.90,.16);
  polygon(face,color);
  polygon(face,null,'#FFFFFF',.09);
  ctx.save();ctx.rotate(where.angle);
  const silhouette=[[0,-NOSE],[.11,-.50],[.11,-.12],[.58,.20],[.58,.32],[.12,.13],[.11,.44],[.28,.60],[.28,.68],[0,.56],[-.28,.68],[-.28,.60],[-.11,.44],[-.12,.13],[-.58,.32],[-.58,.20],[-.11,-.12],[-.11,-.50]];
  polygon(silhouette.map(([x,y])=>({x,y})),'#FFFFFF');
  line([{x:0,y:-.46},{x:0,y:-.28}],color,.07);
  ctx.restore();
  label(String.fromCharCode(65+plane.color),-.50,-.46,.24,world.ink);
  if(plane.state==='parked'){
    ctx.beginPath();ctx.arc(.52,.50,.22,0,Math.PI*2);ctx.fillStyle=direction.accent;ctx.fill();label('P',.52,.50,.26,'#FFFFFF');
  }
  ctx.restore();
}
// Stand icon. 'bay' is the trial; set STAND_MARK to 'plain' to restore the white pad.
const STAND_MARK='bay';
function drawStand(stand){
  const p=position(stand.q,stand.r),color=pigments[stand.color].color,letter=String.fromCharCode(65+stand.color);
  if(STAND_MARK==='plain'){
    polygon(roundedHex(p.x,p.y,.70,.16),'#FFFFFF',color,.08);
    label('P',p.x,p.y-.06,.52,color);label(letter,p.x,p.y+.38,.22,world.ink);
    return;
  }
  // Inverted aircraft: a candy ring around a white face. Outer edge matches the
  // old stroke's reach, so the runway gutter is unchanged. The face stays white
  // so the P keeps its contrast on every pigment, including honey.
  polygon(roundedHex(p.x,p.y,.74,.16),color);
  polygon(roundedHex(p.x,p.y,.56,.20),'#FFFFFF');
  label('P',p.x,p.y-.06,.46,color);label(letter,p.x,p.y+.30,.22,world.ink);
}
function draw(now){
  const dpr=Math.min(devicePixelRatio||1,2);ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,view.width,view.height);
  ctx.translate(view.ox,view.oy);ctx.scale(view.size,view.size);
  const board=rotation?rotation.old:catalogs(game.level)[game.state.orientation].board;
  const hullPts=trayHull(board.cells);
  // Six equal apron fans, fixed around the board centre. They replace the old
  // strip runways so each visual flat (the ABCDEF wedges) is a readable sector.
  const radius=boardRadius(game.level.cells),apronR=apronDistance(radius);
  const stacks=Math.max(1,...[0,1,2,3,4,5].map(s=>game.level.arrivals.filter(a=>a.side===s).length));
  const outerR=apronR+(stacks-1)*1.12+.85;
  drawApronFans(hullPts,outerR);
  if(dragSpin)drawSpinArc(hullPts,dragSpin.angle);
  if(dragSpin?.settling){
    const s=dragSpin.settling,p=Math.min(1,(now-s.start)/s.duration),u=p*p*(3-2*p);
    dragSpin.angle=s.from+(s.to-s.from)*u;
    if(p>=1){const dir=s.commitDir;dragSpin=null;if(dir)perform({type:'rotate',direction:dir},{skipSpin:true});}
  }
  ctx.save();
  const boardSpin=rotation?(Math.min(1,(now-rotation.start)/rotation.duration)**2*(3-2*Math.min(1,(now-rotation.start)/rotation.duration)))*rotation.direction*STEP:(dragSpin?.angle||0);
  if(boardSpin)ctx.rotate(boardSpin);
  const tray=grow=>roundedPoly(hull(board.cells.flatMap(c=>{const p=position(c.q,c.r);return hexPoints(p.x,p.y,TRAY_PAD+grow);})),.9);
  polygon(tray(.06).map(q=>({x:q.x,y:q.y+.20})),materials.shadowSoft);
  polygon(tray(0).map(q=>({x:q.x,y:q.y+.10})),materials.shadow);
  polygon(tray(0),materials.tray);
  for(const cell of board.cells){const p=position(cell.q,cell.r);polygon(roundedHex(p.x,p.y,.90,.16),ringTint(cell));}
  // Runways stay one piece with the sugar bricks: an end that joins a neighbouring
  // brick keeps its port radius, while a board-edge end is pulled inside the flat side.
  const cellKeys=new Set(board.cells.map(c=>key(c.q,c.r)));
  const trackWidth=.11,portRadius=Math.hypot(PORTS[0].x,PORTS[0].y),visualRadius=Math.max(0,.90*FLAT-trackWidth/2-.01);
  const exterior=(cell,d)=>!cellKeys.has(key(cell.q+DIRS[d][0],cell.r+DIRS[d][1]));
  // A boundary runway reaches the tray outline instead of stopping inside the brick,
  // but never leaves the board: the round cap is pulled back by half the stroke.
  const rimEnd=(point,dir)=>{
    const n=PORTS[dir],l=Math.hypot(n.x,n.y),ux=n.x/l,uy=n.y/l,t=rimCrossing(hullPts,point,{x:ux,y:uy});
    if(t===null)return null;
    const reach=Math.max(0,t-trackWidth/2);
    return {x:point.x+ux*reach,y:point.y+uy*reach};
  };
  for(const cell of board.cells){
    const p=position(cell.q,cell.r);
    for(let d=0;d<6;d++){
      if(d>=cell.tracks[d])continue;
      const b=cell.tracks[d],points=trackPoints(p.x,p.y,1,d,b),shrink=1-visualRadius/portRadius;
      const last=points[points.length-1];
      const dx0=exterior(cell,d)?(points[0].x-p.x)*shrink:0,dy0=exterior(cell,d)?(points[0].y-p.y)*shrink:0;
      const dx1=exterior(cell,b)?(last.x-p.x)*shrink:0,dy1=exterior(cell,b)?(last.y-p.y)*shrink:0;
      points.forEach((q,i)=>{const t=i/(points.length-1),u=1-t;q.x-=u*u*u*dx0+t*t*t*dx1;q.y-=u*u*u*dy0+t*t*t*dy1;});
      if(exterior(cell,d)){const g=rimEnd(points[0],d);if(g)points.unshift(g);}
      if(exterior(cell,b)){const g=rimEnd(points.at(-1),b);if(g)points.push(g);}
      line(points,materials.track,trackWidth);
    }
  }
  ctx.restore();
  // Stands, like the aircraft, never turn with the base.
  for(const stand of game.level.stands)drawStand(stand);
  if(feedback&&now<feedback.until){
    const pts=feedback.travelPoints||feedback.points;
    if(pts?.length){
      // Macaron blocked reading: a chunky blocked-colour line ending in an orange cross.
      line(pts,materials.blocked,.126);
      const tip=pts.at(-1),k=.13;
      line([{x:tip.x-k,y:tip.y-k},{x:tip.x+k,y:tip.y+k}],materials.blocked,.11);
      line([{x:tip.x-k,y:tip.y+k},{x:tip.x+k,y:tip.y-k}],materials.blocked,.11);
    }
  }
  const moving=new Set(motions.map(m=>m.id));
  const kicks=new Map(), impacts=[];
  for(const motion of motions)if(motion.kind==='bump'&&motion.blocker){
    const phase=collisionPhase(Math.min(1,(now-motion.start)/motion.duration),reduced);
    const blocker=game.state.planes.find(p=>p.id===motion.blocker);
    if(!blocker)continue;
    const contact=motion.points.at(-1),target=planeLocation(blocker);
    if(phase.kick>0){
      const angle=Math.atan2(target.y-contact.y,target.x-contact.x);
      kicks.set(blocker.id,{x:Math.cos(angle)*phase.kick*.32,y:Math.sin(angle)*phase.kick*.32});
    }
    if(phase.impact>0)impacts.push({contact,target,impact:phase.impact});
  }
  // Macaron blocked reading: the blocked cell blushes under the impact.
  for(const {target} of impacts)polygon(roundedHex(target.x,target.y,.90,.16),materials.blush);
  for(const plane of game.state.planes)if(plane.state!=='gone'&&!moving.has(plane.id)){
    const where=planeLocation(plane),kick=kicks.get(plane.id);
    if(kick){where.x+=kick.x;where.y+=kick.y;}
    aircraft(plane,where);
  }
  for(const motion of motions){
    const progress=Math.min(1,(now-motion.start)/motion.duration);
    let where,alpha=1;
    if(motion.kind==='shake'){
      where=planeLocation(motion.plane);where.x+=reduced?0:Math.sin(progress*36)*.11*(1-progress);
    }else if(motion.kind==='bump'){
      where=along(motion.points,collisionPhase(progress,reduced).distance);
      if(motion.points.length===1)where.angle=motion.plane.dir*Math.PI/3;
    } else {
      where = along(motion.points, travelProgress(progress, motion.duration));
      if (motion.kind === 'exit' && motion.plane.kind === 'original') alpha = 1 - Math.max(0, (progress - .8) / .2);
      if (motion.kind === 'land' && progress >= .96 && !motion.cheered) {
        motion.cheered = true;
        cheer(position(motion.updated.q, motion.updated.r), motion.plane.color);
      }
    }
    aircraft({...motion.plane,state:motion.kind==='land'&&progress>.96?'parked':motion.plane.state==='parked'?'ground':motion.plane.state},where,alpha);
  }
  // Macaron blocked reading: an orange cross grows at the contact while the impact holds.
  for(const {contact,target,impact} of impacts){
    const x=(contact.x+target.x)/2,y=(contact.y+target.y)/2,k=.30*impact;
    line([{x:x-k,y:y-k},{x:x+k,y:y+k}],materials.blocked,.11);
    line([{x:x-k,y:y+k},{x:x+k,y:y-k}],materials.blocked,.11);
  }
  // Runway read: when a waiting plane's edge connects to a same-colour stand, light the
  // channel from the nose, across the apron, onto the board path. The ripple stays on
  // the plane. Board runways stay inside the tray. A ring at the opening and an inbound
  // arrow still guide; a blocker ripples red.
  if (!motions.length && !rotation && !dragSpin && !document.querySelector('dialog[open]')) {
    const hints = approachHints(), T = now / 1000;
    for (const h of hints) {
      const onboard = clipToHull(h.points, hullPts);
      const nose = nosePoint(h.from);
      const pts = onboard.length ? [nose, ...onboard] : [nose, ...h.points];
      if (pts.length > 1) {
        line(pts, materials.hintGlow, .19);
        line(pts, materials.hint, .085);
        const at = along(pts, (T * 0.6) % 1), dir = at.angle - Math.PI / 2, s = .26;
        polygon([{ x: at.x + Math.cos(dir) * s, y: at.y + Math.sin(dir) * s }, { x: at.x + Math.cos(dir + 2.4) * s, y: at.y + Math.sin(dir + 2.4) * s }, { x: at.x + Math.cos(dir - 2.4) * s, y: at.y + Math.sin(dir - 2.4) * s }], world.ink);
        const ring = onboard[0] || along(pts, .08);
        ctx.save(); ctx.globalAlpha = .9; ctx.beginPath(); ctx.arc(ring.x, ring.y, .28, 0, Math.PI * 2);
        ctx.strokeStyle = materials.hint; ctx.lineWidth = .10; ctx.stroke(); ctx.restore();
      }
      for (const phase of [T % 1, (T + .5) % 1]) {
        ctx.save(); ctx.globalAlpha = (1 - phase) * .8;
        ctx.beginPath(); ctx.arc(h.from.x, h.from.y, .5 + phase * 1.2, 0, Math.PI * 2);
        ctx.strokeStyle = materials.hint; ctx.lineWidth = .10; ctx.stroke(); ctx.restore();
      }
      const blocker = h.blocker && game.state.planes.find(p => p.id === h.blocker);
      if (blocker) {
        const bp = position(blocker.q, blocker.r);
        for (const phase of [(T * 1.3) % 1, (T * 1.3 + .5) % 1]) {
          ctx.save(); ctx.globalAlpha = (1 - phase) * .85;
          ctx.beginPath(); ctx.arc(bp.x, bp.y, .5 + phase * 1.2, 0, Math.PI * 2);
          ctx.strokeStyle = materials.blocked; ctx.lineWidth = .12; ctx.stroke(); ctx.restore();
        }
      }
    }
  }
  const cheerDone = drawCheers(now);
  let changed = false;
  motions = motions.filter(m => { if (now - m.start < m.duration) return true; game.finish(m.id); changed = true; return false; });
  if (rotation && now - rotation.start >= rotation.duration) { rotation = null; game.finish('rotation'); changed = true; const pending = queue; queue = []; for (const action of pending) perform(action); }
  if (changed) { sync(); settle(); }
  else if (cheerDone && game.won && !$('result').open) settle();
  requestAnimationFrame(draw);
}
function resize(){
  const rect=$('airspace').getBoundingClientRect(),dpr=Math.min(devicePixelRatio||1,2);
  const radius=game?boardRadius(game.level.cells):2;
  const stacks=game?Math.max(1,...[0,1,2,3,4,5].map(s=>game.level.arrivals.filter(a=>a.side===s).length)):1;
  const span=(apronDistance(radius)+(stacks-1)*1.12+1.8)*2;
  view={width:rect.width,height:rect.height,size:Math.min(rect.width/span,rect.height/span),ox:rect.width/2,oy:rect.height/2};
  canvas.width=Math.round(rect.width*dpr);canvas.height=Math.round(rect.height*dpr);if(game)sync();
}
new ResizeObserver(resize).observe($('airspace'));
// Rim drag: follow the finger within ±60°. A quick flick still turns one sector.
// Release past SNAP commits that sector; otherwise the board eases back.
canvas.addEventListener('pointerdown', event => {
  if (document.querySelector('dialog[open]') || game.won || game.deadlocked || game.moves <= 0 || game.rotating || dragSpin) return;
  const rect = $('airspace').getBoundingClientRect();
  const x = event.clientX - rect.left - view.ox, y = event.clientY - rect.top - view.oy;
  if (Math.hypot(x, y) <= Math.min(view.width, view.height) * 0.28) return;
  dragSpin = { id: event.pointerId, x, y, startAngle: Math.atan2(y, x), angle: 0, t0: performance.now(), analog: false, settling: null };
  canvas.setPointerCapture?.(event.pointerId);
});
canvas.addEventListener('pointermove', event => {
  if (!dragSpin || event.pointerId !== dragSpin.id || dragSpin.settling || rotation) return;
  const rect = $('airspace').getBoundingClientRect();
  let delta = wrapDelta(Math.atan2(event.clientY - rect.top - view.oy, event.clientX - rect.left - view.ox) - dragSpin.startAngle);
  delta = Math.max(-STEP, Math.min(STEP, delta));
  if (Math.abs(delta) > .04) dragSpin.analog = true;
  if (dragSpin.analog) dragSpin.angle = delta;
});
canvas.addEventListener('pointerup', event => {
  if (!dragSpin || event.pointerId !== dragSpin.id) { dragSpin = null; return; }
  if (dragSpin.settling) return;
  const rect = $('airspace').getBoundingClientRect(), dt = performance.now() - dragSpin.t0;
  let delta = wrapDelta(Math.atan2(event.clientY - rect.top - view.oy, event.clientX - rect.left - view.ox) - dragSpin.startAngle);
  const flick = dt < FLICK_MS && Math.abs(delta) > FLICK_ANG;
  if (flick) {
    dragSpin = null;
    perform({ type: 'rotate', direction: delta > 0 ? 1 : -1 });
    return;
  }
  const angle = dragSpin.analog ? dragSpin.angle : 0;
  if (Math.abs(angle) >= SNAP) {
    const dir = angle > 0 ? 1 : -1;
    dragSpin.settling = { from: angle, to: dir * STEP, start: performance.now(), duration: reduced ? 80 : 180, commitDir: dir };
  } else if (Math.abs(angle) > .01) {
    dragSpin.settling = { from: angle, to: 0, start: performance.now(), duration: reduced ? 80 : 180, commitDir: 0 };
  } else dragSpin = null;
});
canvas.addEventListener('pointercancel', () => { dragSpin = null; });

$('left').onclick=()=>perform({type:'rotate',direction:-1});$('right').onclick=()=>perform({type:'rotate',direction:1});
$('restart').onclick=$('retry').onclick=()=>loadLevel(index);
$('next').onclick=()=>loadLevel((index+1)%LEVELS.length);
$('settings').onclick=()=>show($('help'));
$('sound').onclick=()=>{saved.sound=!saved.sound;persist();sync();};
$('levels').onclick=()=>{
  $('level-list').replaceChildren(...LEVELS.map((level,i)=>{
    const button=document.createElement('button');button.className=`level-option${i===index?' current':''}`;
    const title=document.createElement('strong');title.textContent=`${i+1} · ${level.name}${saved.completed.includes(level.id)?' ✓':''}`;
    const caption=document.createElement('small');caption.textContent=level.lesson;
    button.append(title,caption);button.onclick=()=>loadLevel(i);return button;
  }));show($('menu'));
};
for(const button of document.querySelectorAll('[data-close]'))button.onclick=()=>{button.closest('dialog').close();settle();};
$('result').addEventListener('cancel',event=>event.preventDefault());
$('reward').onclick=async()=>{
  const current=game,session=generation;$('reward').disabled=true;
  const provider=window.airportAdProvider|| (async()=>({id:crypto.randomUUID(),completed:true}));
  const outcome=await requestReward(current,provider,()=>game===current&&generation===session);
  if(game!==current||generation!==session)return;
  if(outcome.status==='granted'){$('result').close();notice(`已补充 ${game.level.reward.steps} 次操作。`);sync();diagnose();}
  else{$('result-copy').textContent=outcome.status==='failed'?'未能获得奖励，请稍后重试。':'未完成奖励，操作次数保持不变。';$('reward').disabled=false;}
};
// Reuse the accepted UI atlas rather than substituting a new icon family.
const atlas=new Image();atlas.src='../../assets/ui-icons-generated.png';atlas.onload=()=>{
  for(const target of document.querySelectorAll('[data-icon]')){
    const f=ICONS[target.dataset.icon],g=target.getContext('2d');
    g.clearRect(0,0,target.width,target.height);
    g.fillStyle=target.closest('.restart,.primary')?'#FFFFFF':'#5A3A44';
    g.fillRect(0,0,target.width,target.height);
    g.globalCompositeOperation='destination-in';
    g.drawImage(atlas,f.x,f.y,f.w,f.h,0,0,target.width,target.height);
    g.globalCompositeOperation='source-over';
  }
};
loadLevel(index);resize();requestAnimationFrame(draw);