import { WIDTH, HEIGHT, PALETTE } from '../src/config';
import { FlowGame, FEVER_TARGET, type FlowResult } from '../src/flow';
import { FlowAnimation } from '../src/flow-animation';
import { canFlowAppend } from '../src/flow-rules';
import { Gesture } from '../src/input';
import { drawBoard } from '../src/view';
import { loadRecord, saveRecord, recordRound } from '../src/record';
import type { Reaction } from '../src/cascade';
import type { Point } from '../src/types';
import { paint } from './canvas-painter';
import { Sound } from './audio';
declare const __DEV__: boolean;
const $ = <T extends HTMLElement = HTMLElement>(id: string): T => document.getElementById(id) as T;
const icon = (name: string) => `<svg aria-hidden="true"><use href="#i-${name}"/></svg>`;
const format = (n: number) => Math.round(n).toLocaleString('en-US');
const canvas = $<HTMLCanvasElement>('board'), ctx = canvas.getContext('2d')!;
const modal = $('modal'), sheet = $('sheet');
const storage = { read: (key: string) => localStorage.getItem(key), write: (key: string, value: string) => localStorage.setItem(key, value) };
const record = loadRecord(storage), sound = new Sound(); sound.enabled = record.sound;
const reduced = matchMedia('(prefers-reduced-motion: reduce)');
let game = new FlowGame(1234), gesture = new Gesture(() => game.balls, canFlowAppend);
let hints = game.hint(), hintUntil = Infinity;
let transform = { scale: 1, x: 0, y: 0, dpr: 1 };
let animation: FlowAnimation | null = null, seenReaction = 0;
let pointer: number | null = null, previousFocus: HTMLElement | null = null;
let toastTimer = 0, bannerTimer = 0, previewKey = '', saveAvailable = true;
let displayScore = 0, scoreTarget = 0, lastFrame = 0;

function save(): void { recordRound(record, game.stats); saveAvailable = saveRecord(storage, record); }
function resize(): void {
  const r = canvas.getBoundingClientRect(), dpr = Math.min(3, devicePixelRatio || 1), scale = Math.min(r.width / WIDTH, r.height / HEIGHT);
  canvas.width = Math.round(r.width * dpr); canvas.height = Math.round(r.height * dpr);
  transform = { scale, x: (r.width - WIDTH * scale) / 2, y: (r.height - HEIGHT * scale) / 2, dpr };
}
function coordinates(e: PointerEvent): Point {
  const r = canvas.getBoundingClientRect();
  return { x: (e.clientX - r.left - transform.x) / transform.scale, y: (e.clientY - r.top - transform.y) / transform.scale };
}
function cancel(): void {
  gesture.cancel(); const id = pointer; pointer = null;
  if (id !== null && canvas.hasPointerCapture(id)) canvas.releasePointerCapture(id);
  updatePreview();
}
function toast(message: string): void {
  clearTimeout(toastTimer); $('toast').textContent = message; $('toast').classList.add('show');
  toastTimer = window.setTimeout(() => $('toast').classList.remove('show'), 2100);
}
function banner(title: string, subtitle: string, rainbow = false): void {
  clearTimeout(bannerTimer); const el = $('combo-banner');
  el.className = `combo-banner${rainbow ? ' rainbow' : ''}`; el.innerHTML = `<strong>${title}</strong><span>${subtitle}</span>`;
  void el.offsetWidth; el.classList.add('show');
  bannerTimer = window.setTimeout(() => el.classList.remove('show'), 1100);
}
function updateSound(): void {
  $('sound').innerHTML = icon(sound.enabled ? 'sound' : 'muted');
  $('sound').setAttribute('aria-label', sound.enabled ? '关闭音效' : '开启音效'); $('sound').setAttribute('aria-pressed', String(sound.enabled));
}
function updateHUD(): void {
  $('app').dataset.mode = 'flow'; $('app').dataset.turns = String(game.stats.turns); $('app').dataset.animating = String(!!animation);
  $('app').classList.toggle('fever', game.fever);
  $('peak').textContent = String(game.stats.maxNumber);
  const p = PALETTE[(game.stats.maxNumber - 1) % PALETTE.length]; $('peak').style.backgroundColor = p.fill;
  $('best-score').textContent = format(record.bestScore);
  $('fever-label').textContent = game.fever ? '彩虹时刻 · 双倍得分' : '彩虹能量';
  $('fever-count').textContent = game.fever ? `剩 ${game.feverLeft} 次` : `${game.feverCharge} / ${FEVER_TARGET}`;
  $('fever-fill').style.width = `${game.fever ? game.feverLeft / 5 * 100 : game.feverCharge / FEVER_TARGET * 100}%`;
  $('fever-meter').setAttribute('aria-valuenow', String(game.fever ? game.feverLeft * 2 : game.feverCharge));
  $('fever-meter').setAttribute('aria-valuetext', game.fever ? `双倍得分，剩 ${game.feverLeft} 次合成` : `${game.feverCharge} / 10`);
  $('queue').innerHTML = game.queue.slice(0, 3).map(n => `<span class="next-ball" style="background:${PALETTE[n - 1].fill}">${n}</span>`).join('');
  $('queue').setAttribute('aria-label', `接下来掉落 ${game.queue.slice(0, 3).join('、')}`);
  $<HTMLButtonElement>('undo').disabled = !game.canUndo || !!animation;
  $<HTMLButtonElement>('hint').disabled = !!animation; $<HTMLButtonElement>('shuffle').disabled = !!animation;
  $('welcome').classList.toggle('hidden', game.stats.turns > 0 || !!animation);
  $('welcome').setAttribute('aria-hidden', String(game.stats.turns > 0 || !!animation));
  $('flight-count').textContent = `已放飞 ${game.stats.flown} 颗`;
  $('footer-text').textContent = saveAvailable ? '不计时，不限步，开心一直连。' : '浏览器未允许保存，成绩暂存本次';
  $('stage-caption').textContent = game.fever ? '彩虹时刻 · 最多 4 连消' : '合成 10，放飞一颗快乐';
  updatePreview();
}
function updatePreview(): void {
  const ids = gesture.chain, key = `${ids.join(',')}/${game.stats.turns}/${!!animation}`;
  if (key === previewKey) return; previewKey = key;
  const el = $('chain-preview');
  if (!ids.length) {
    el.innerHTML = animation ? '啵！还有下一连…' : game.stats.turns < 2 ? '连起 3 颗，看看能接出几连消' : '顺号或同号都能连 · 新球还能自动接力';
    return;
  }
  const balls = ids.map(id => game.balls.find(b => b.id === id)!);
  const result = game.preview(ids), visible = balls.length > 5 ? [...balls.slice(0, 2), null, ...balls.slice(-2)] : balls;
  el.innerHTML = visible.map(b => b ? `<span class="mini-ball" style="background:${PALETTE[(b.n - 1) % PALETTE.length].fill}">${b.n}</span>` : '<span>…</span>').join('<span>·</span>') +
    (result ? `<span>→</span><b>${result.stages[result.stages.length - 1].created.n}</b>${result.stages.length > 1 ? `<span class="predict">${result.stages.length} 连消</span>` : ''}<span class="gain">+${format(result.score)} 起</span>` : `<span class="gain">再连 ${Math.max(0, 3 - ids.length)} 颗</span>`);
}
function feedback(stage: Reaction): void {
  const x = Math.max(65, Math.min($('stage').clientWidth - 65, transform.x + stage.created.x * transform.scale)), y = transform.y + stage.created.y * transform.scale;
  const el = document.createElement('span'); el.className = 'score-pop'; el.textContent = `+${format(stage.points)}`;
  el.style.left = `${x}px`; el.style.top = `${y - 16}px`; $('stage').append(el); setTimeout(() => el.remove(), 750);
  sound.pop(stage.created.n, stage.index, animation?.result.doubled || false);
  if (stage.index >= 2) banner(`${stage.index} 连消！`, stage.index >= 3 ? '一口气，停不下来' : '接上了，再长大一点');
  if (stage.created.n >= 10) banner('放飞啦！', '10 号气球 · 额外 +10,000', true);
  if (!reduced.matches) for (let i = 0; i < 10; i++) {
    const spark = document.createElement('i'); spark.className = 'spark'; spark.style.left = `${x}px`; spark.style.top = `${y}px`;
    const angle = i / 10 * Math.PI * 2;
    spark.style.setProperty('--dx', `${Math.cos(angle) * (30 + stage.index * 7)}px`);
    spark.style.setProperty('--dy', `${Math.sin(angle) * (30 + stage.index * 7)}px`);
    spark.style.setProperty('--spark-color', PALETTE[i % PALETTE.length].fill);
    $('stage').append(spark); setTimeout(() => spark.remove(), 700);
  }
}
function begin(result: FlowResult): void {
  hints = []; seenReaction = 0; animation = new FlowAnimation(result, performance.now());
  scoreTarget = game.stats.score - result.score;
  if (result.kind === 'breeze') toast('呼——换个位置，继续连。');
  updateHUD();
  if (reduced.matches) finish();
}
function finish(): void {
  const result = animation?.result; animation = null;
  scoreTarget = game.stats.score; displayScore = game.stats.score;
  save(); updateHUD();
  if (result?.feverStarted) banner('彩虹时刻！', '接下来 5 次合成 · 双倍得分', true);
  else if (result?.supply.breeze && result.kind !== 'breeze') toast('微风送来新气球，接着连。');
}
function commit(ids: number[]): void {
  const result = game.commit(ids);
  if (result) begin(result);
  else { if (ids.length) toast('至少连 3 颗顺号或同号气球。'); updatePreview(); }
}
function frame(now: number): void {
  const dt = Math.min(60, now - lastFrame || 16); lastFrame = now;
  let balls = game.balls;
  if (animation) {
    const sample = animation.sample(now);
    if (sample) {
      balls = sample;
      const reaction = animation.reaction;
      if (reaction && reaction.index > seenReaction) {
        for (const event of animation.result.stages.filter(s => s.index > seenReaction && s.index <= reaction.index)) { scoreTarget += event.points; feedback(event); }
        seenReaction = reaction.index;
      }
    } else finish();
  }
  displayScore += (scoreTarget - displayScore) * (1 - Math.exp(-dt / 95));
  if (Math.abs(displayScore - scoreTarget) < 1) displayScore = scoreTarget;
  const score = format(displayScore); if ($('score').textContent !== score) $('score').textContent = score;
  if (now > hintUntil) hints = [];
  const t = transform;
  ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setTransform(t.dpr * t.scale, 0, 0, t.dpr * t.scale, t.dpr * t.x, t.dpr * t.y);
  paint(ctx, drawBoard({ balls, chain: animation ? animation.activePath : gesture.chain, hint: animation ? [] : hints, time: now / 1000, fever: game.fever, reducedMotion: reduced.matches }));
  requestAnimationFrame(frame);
}
function undo(): void {
  if (animation) return; cancel();
  if (game.undo()) { hints = []; displayScore = scoreTarget = game.stats.score; previewKey = ''; updateHUD(); toast('已撤回，补球和彩虹能量一起还原。'); }
}
function newRound(): void {
  cancel(); animation = null; clearTimeout(bannerTimer); clearTimeout(toastTimer);
  $('stage').querySelectorAll('.spark,.score-pop').forEach(el => el.remove()); $('combo-banner').classList.remove('show'); $('toast').classList.remove('show');
  game = new FlowGame(Date.now() >>> 0); gesture = new Gesture(() => game.balls, canFlowAppend);
  hints = game.hint(); hintUntil = performance.now() + 4500; displayScore = scoreTarget = 0; previewKey = '';
  closeSheet(); updateHUD();
}
function openSheet(html: string): void {
  cancel(); if (animation) finish();
  if (modal.hidden) previousFocus = document.activeElement as HTMLElement;
  sheet.innerHTML = html; modal.hidden = false; $('app').inert = true; sheet.focus();
}
function closeSheet(): void { modal.hidden = true; $('app').inert = false; previousFocus?.focus(); previousFocus = null; }
const closeButton = `<button class="icon-button close" data-action="close" aria-label="关闭面板">${icon('close')}</button>`;
function showHelp(): void {
  openSheet(`<div class="sheet-head"><div><span class="eyebrow">A LITTLE POP, A LOT OF JOY</span><h2 id="sheet-title">一划，就连起来</h2></div>${closeButton}</div><div class="help-chain">${[1, 2, 3, 4].map((n, i) => `${i ? `<span>${i === 3 ? '→' : '·'}</span>` : ''}<span class="help-ball" style="background:${PALETTE[n - 1].fill}">${n}</span>`).join('')}</div><div class="help-rule"><span>1</span><p><b>顺号连，同号也能连。</b><br>连接至少 3 颗相邻气球：1→2→3、3→2→1，或 2→2→2。顺号和同号不能混在一条里。</p></div><div class="help-rule"><span>2</span><p><b>松手变大，自动接着合成。</b><br>新数字是最大数 +1，留在连线末端。周围或新掉落的气球能接上，就自动连消，最多 3 连！</p></div><div class="help-rule"><span>3</span><p><b>攒满彩虹，双倍快乐。</b><br>长链和连消积攒能量，满 10 格后，接下来 5 次合成双倍得分，最多 4 连消。没有倒计时。</p></div><div class="help-rule"><span>4</span><p><b>合成 10，让它飞向天空。</b><br>10 号气球自动放飞，奖励 10,000 分，腾出空间继续玩。没有关卡和步数限制，提示、撤销、吹口气都免费。</p></div><button class="primary" data-action="close">知道了，接着连 ${icon('arrow')}</button>`,);
}
function showRecords(restart = false): void {
  save();
  openSheet(`<div class="sheet-head"><div><span class="eyebrow">YOUR BALLOON SKY</span><h2 id="sheet-title">${restart ? '这一局，飞得不错' : '你的放飞记录'}</h2></div>${closeButton}</div><div class="record-hero"><strong>${format(game.stats.score)}</strong><span>本局得分 · 最佳 ${format(record.bestScore)}</span></div><div class="record-grid"><div><strong>${game.stats.bestCombo}</strong><span>本局最高连消</span></div><div><strong>${game.stats.reactions}</strong><span>已完成合成</span></div><div><strong>${game.stats.flown}</strong><span>已放飞气球</span></div></div><div class="sky-collection">${[4, 6, 8, 10].map(n => `<div class="sky-item ${record.bestNumber >= n ? 'earned' : ''}"><span class="help-ball" style="background:${PALETTE[n - 1].fill}">${n}</span><span>${record.bestNumber >= n ? '已点亮' : '等你来连'}</span></div>`).join('')}</div><p class="small-note">最高 ${record.bestCombo} 连消 · 单局最多放飞 ${record.bestFlown} 颗<br>想继续就继续，想重来就换一片天空。</p><button class="primary" data-action="${restart ? 'new' : 'close'}">${restart ? '开始新一局' : '回去接着连'} ${icon('arrow')}</button><button class="secondary" data-action="${restart ? 'close' : 'new'}">${restart ? '继续这一局' : '换一片天空 · 新一局'}</button>${saveAvailable ? '' : '<p class="save-note">浏览器未允许保存，记录暂存本次会话。</p>'}`);
}
canvas.addEventListener('pointerdown', e => {
  if (e.button !== 0 || !e.isPrimary || pointer !== null || animation || !modal.hidden) return;
  e.preventDefault(); sound.unlock(); pointer = e.pointerId; canvas.setPointerCapture(pointer); hints = [];
  gesture.down(coordinates(e)); updatePreview();
  if (gesture.chain.length) sound.note(game.balls.find(b => b.id === gesture.chain[0])!.n);
});
canvas.addEventListener('pointermove', e => {
  if (e.pointerId !== pointer || animation) return;
  const old = gesture.chain.join(','); gesture.move(coordinates(e));
  if (old !== gesture.chain.join(',')) { const n = game.balls.find(b => b.id === gesture.chain[gesture.chain.length - 1])?.n; if (n) sound.note(n); updatePreview(); }
});
canvas.addEventListener('pointerup', e => {
  if (e.pointerId !== pointer) return; gesture.move(coordinates(e)); const ids = gesture.up(); pointer = null;
  if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId); commit(ids);
});
canvas.addEventListener('pointercancel', e => { if (e.pointerId === pointer) cancel(); });
canvas.addEventListener('lostpointercapture', e => { if (e.pointerId === pointer) cancel(); });
window.addEventListener('blur', cancel); window.addEventListener('resize', () => { cancel(); resize(); });
document.addEventListener('visibilitychange', () => { if (document.hidden) cancel(); });
new ResizeObserver(resize).observe($('stage'));
$('sound').addEventListener('click', () => { sound.enabled = !sound.enabled; record.sound = sound.enabled; sound.unlock(); updateSound(); save(); });
$('help').addEventListener('click', showHelp); $('records').addEventListener('click', () => showRecords());
$('undo').addEventListener('click', undo); $('restart').addEventListener('click', () => showRecords(true));
$('shuffle').addEventListener('click', () => { if (!animation) { cancel(); begin(game.shuffle()); } });
$('hint').addEventListener('click', () => { if (animation) return; cancel(); hints = game.hint(); hintUntil = performance.now() + 7000; if (hints.length) toast('沿白色标记连起来，松手看它自动接力。'); else toast('吹口气，换个位置试试。'); });
modal.addEventListener('click', e => { if (e.target === modal) closeSheet(); });
sheet.addEventListener('click', e => { const action = (e.target as HTMLElement).closest<HTMLButtonElement>('button')?.dataset.action; if (action === 'close') closeSheet(); if (action === 'new') newRound(); });
document.addEventListener('keydown', e => {
  if (!modal.hidden) {
    if (e.key === 'Escape') { e.preventDefault(); closeSheet(); }
    if (e.key === 'Tab') { const buttons = [...sheet.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')], first = buttons[0], last = buttons[buttons.length - 1];
      if (e.shiftKey && (document.activeElement === first || document.activeElement === sheet)) { e.preventDefault(); last?.focus(); }
      else if (!e.shiftKey && (document.activeElement === last || document.activeElement === sheet)) { e.preventDefault(); first?.focus(); } }
  } else if (!e.ctrlKey && !e.metaKey && !e.altKey) {
    if (e.key.toLowerCase() === 'z') undo(); if (e.key.toLowerCase() === 'h') $('hint').click(); if (e.key === 'Escape') cancel();
  }
});
updateSound(); updateHUD(); resize(); requestAnimationFrame(frame);
if (__DEV__) Object.assign(window, { __balloons: { snapshot: () => game.snapshot(), hint: () => game.hint(), transform: () => ({ ...transform }), animating: () => !!animation } });