/* Turbo Race - client: netwerk, input, rendering, HUD */
(function () {
  'use strict';
  const painter = window.TurboPainter;
  const ROAD_W = 420;
  const K = 0.32; // zelfde schaal als render.js

  const $ = (id) => document.getElementById(id);
  const clamp = (n, lo, hi) => (n < lo ? lo : n > hi ? hi : n);

  /* ---------- state ---------- */
  let ws = null;
  const me = { id: null, host: false, name: '', color: '#ff3fa4' };
  let phase = 'lobby';
  let snap = null;         // laatste snapshot
  let track = null;        // {obstacles, powerups}
  const rp = {};           // render-state per speler {rx, rd, ...}
  const input = { steer: 0 };
  let visSteer = 0;        // visuele stuursmoothing (alleen voor rendering)
  let fx = [];
  let shake = 0;
  let lastSent = 0;

  const canvas = $('game');
  const ctx = canvas.getContext('2d');
  const mm = $('minimap');
  const mmCtx = mm.getContext('2d');
  let W = 0, H = 0, DPR = 1;

  function resize() {
    DPR = Math.min(window.devicePixelRatio || 1, 2);
    W = window.innerWidth; H = window.innerHeight;
    canvas.width = Math.round(W * DPR);
    canvas.height = Math.round(H * DPR);
    canvas.style.width = W + 'px';
    canvas.style.height = H + 'px';
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
    mm.width = Math.round(mm.clientWidth * DPR);
    mm.height = Math.round(mm.clientHeight * DPR);
    mmCtx.setTransform(DPR, 0, 0, DPR, 0, 0);
  }
  window.addEventListener('resize', resize);
  window.addEventListener('orientationchange', () => setTimeout(resize, 200));

  /* ---------- kleurenpalet ---------- */
  const PALETTE = ['#ff3fa4', '#00f0ff', '#ffd93d', '#3dff88', '#ff7a1a', '#8f5bff', '#ff4d6d', '#4dffd6', '#ff9ff3', '#b3ff4d'];
  let chosenColor = PALETTE[0];
  (function initColors() {
    const box = $('colors');
    PALETTE.forEach((c) => {
      const s = document.createElement('button');
      s.type = 'button';
      s.className = 'swatch' + (c === chosenColor ? ' on' : '');
      s.style.background = c;
      s.onclick = () => {
        chosenColor = c;
        box.querySelectorAll('.swatch').forEach((el) => el.classList.remove('on'));
        s.classList.add('on');
      };
      box.appendChild(s);
    });
  })();

  /* ---------- verbinding ---------- */
  function hostToken() {
    try { return new URLSearchParams(location.search).get('host') || ''; } catch { return ''; }
  }

  function connect() {
    const proto = location.protocol === 'https:' ? 'wss://' : 'ws://';
    ws = new WebSocket(proto + location.host + '/ws');
    ws.onopen = () => {
      ws.send(JSON.stringify({
        type: 'join', name: $('nameInput').value, color: chosenColor, hostToken: hostToken(),
      }));
    };
    ws.onmessage = (ev) => {
      let m; try { m = JSON.parse(ev.data); } catch { return; }
      handle(m);
    };
    ws.onclose = () => { if (phase !== 'results') $('dead').classList.remove('hidden'); };
    ws.onerror = () => {};
  }

  $('joinBtn').onclick = () => connect();
  $('nameInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') connect(); });

  /* ---------- message-handling ---------- */
  function handle(m) {
    switch (m.type) {
      case 'joined':
        me.id = m.id; me.host = !!m.host;
        me.name = m.self.name; me.color = m.self.color;
        snap = m.snapshot; track = m.track;
        applySnapshot(m.snapshot);
        $('join').classList.add('hidden');
        $('room').classList.remove('hidden');
        break;
      case 'snapshot':
        applySnapshot(m);
        break;
      case 'track':
        track = m.track;
        break;
      case 'fx':
        onFx(m.id, m.kind);
        break;
      case 'announce':
        toast(m.text, 'gold');
        break;
      case 'error':
        showJoinError(m.msg);
        break;
      case 'phase': // bevestiging; snapshot volgt zo
        break;
    }
  }

  /* ---------- snapshot & interpolatie ---------- */
  let prevPhase = 'lobby';
  function applySnapshot(s) {
    snap = s;
    const newPhase = s.phase;
    const hard = (prevPhase !== newPhase) && (newPhase === 'race' || newPhase === 'lobby');
    const seen = new Set();
    for (const p of s.players) {
      seen.add(p.id);
      if (!rp[p.id]) {
        rp[p.id] = { rx: p.x, rd: p.d, name: p.name, color: p.color, boost: false, shield: false, slip: false, finished: false, rank: 0, speed: 0 };
      }
      if (hard) { rp[p.id].rx = p.x; rp[p.id].rd = p.d; }
    }
    for (const key in rp) if (!seen.has(key)) delete rp[key];
    prevPhase = newPhase;
    phase = newPhase;

    if (phase === 'countdown') $('countdown').classList.remove('hidden');
    if (phase === 'race') { $('countdown').classList.add('hidden'); $('results').classList.add('hidden'); }
    if (phase === 'results') { $('countdown').classList.add('hidden'); buildResults(s); }
    if (phase === 'lobby') { $('results').classList.add('hidden'); $('countdown').classList.add('hidden'); }
  }

  /* ---------- render-loop ---------- */
  let raf = 0, lastT = performance.now(), accHud = 0, accMinimap = 0;
  function frame(ts) {
    const dt = Math.min(0.05, (ts - lastT) / 1000);
    lastT = ts;
    accHud += dt; accMinimap += dt;

    if (snap) {
      for (const p of snap.players) {
        const r = rp[p.id];
        if (!r) continue;
        const k = (p.id === me.id) ? (1 - Math.exp(-dt * 18)) : (1 - Math.exp(-dt * 7));
        r.rx += (p.x - r.rx) * k;
        r.rd += (p.d - r.rd) * k;
        r.name = p.name; r.color = p.color;
        r.boost = p.boost; r.shield = p.shield; r.slip = p.slip;
        r.finished = p.finished; r.speed = p.speed; r.rank = p.rank;
      }
    }

    visSteer += (input.steer - visSteer) * Math.min(1, dt * 12);
    draw(ts);
    advanceFx(dt);
    shake = Math.max(0, shake - dt * 40);

    if (accHud > 0.1) { accHud = 0; updateHud(); }
    if (accMinimap > 0.22) { accMinimap = 0; drawMinimap(); }

    raf = requestAnimationFrame(frame);
  }

  function draw(t) {
    const meSnap = snap ? snap.players.find((p) => p.id === me.id) : null;
    if (!meSnap) {
      painter.render(ctx, { W, H, t, me: { d: 0 }, trackLength: snap ? snap.trackLength : 23000, track, cars: [], fx: [], speedFactor: 0, shake: 0 });
      return;
    }
    const r = rp[me.id];
    const selfD = r ? r.rd : meSnap.d;
    const cars = [];
    for (const key in rp) {
      const o = rp[key];
      cars.push({
        x: o.rx, d: o.rd, name: o.name, color: o.color,
        boost: o.boost, shield: o.shield, slip: o.slip, finished: o.finished,
        isMe: key === me.id,
        steer: key === me.id ? visSteer : 0,
      });
    }
    painter.render(ctx, {
      W, H, t, me: { d: selfD },
      trackLength: snap.trackLength, track, cars, fx,
      speedFactor: (meSnap.speed || 0) / 300,
      shake,
    });
  }

  function showJoinError(msg) {
    const el = $('joinMsg');
    el.textContent = msg || 'Kon niet aanmelden';
    el.className = 'msg err';
  }


  /* ---------- HUD & lijsten ---------- */
  let lastBoardSig = '';
  function updateHud() {
    if (!snap) return;
    const now = Date.now();
    const meSnap = snap.players.find((p) => p.id === me.id);

    if (phase === 'countdown') {
      const rem = Math.max(0, Math.ceil((snap.countdownEndsAt - now) / 1000));
      $('cdNum').textContent = rem;
      updateBoard(rem);
      return;
    }

    if (phase === 'race' && meSnap) {
      const rem = Math.max(0, snap.raceEndsAt - now);
      const tot = Math.ceil(rem / 1000);
      const min = Math.floor(tot / 60), sec = tot % 60;
      const tEl = $('hudTimer');
      const txt = `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
      if (tEl.textContent !== txt) tEl.textContent = txt;
      tEl.classList.toggle('danger', tot <= 10);
      $('hudSpeed').textContent = Math.round((meSnap.speed || 0) * 0.36) + ' km/u';
      $('hudPos').textContent = '#' + meSnap.rank + ' / ' + snap.players.length;
      $('hudDist').textContent = meSnap.d + ' m';
    }

    updateBoard(0);
    updateLead();
  }

  function updateBoard(remaining) {
    if (!snap) return;
    const inRace = phase === 'race' || phase === 'results';
    const head = inRace ? '🏁 WEDSTRIJD' : `👥 AANMELDERS (${snap.players.length}/${snap.maxPlayers})`;
    const sig = head + '|' + snap.players.map((p) => `${p.id}:${p.rank}:${p.d}`).join(',') + '|host' + me.host;
    if (sig === lastBoardSig) return;
    lastBoardSig = sig;
    $('boardHead').textContent = head;

    const ol = $('boardList');
    ol.innerHTML = '';
    const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
    for (const p of sorted) {
      const li = document.createElement('li');
      const cls = [];
      if (p.id === me.id) cls.push('me');
      if (inRace && p.rank === 1) cls.push('top');
      if (cls.length) li.className = cls.join(' ');
      if (inRace) {
        li.innerHTML = `<span class="rk">${p.rank}</span><span class="dot" style="background:${p.color};color:${p.color}"></span><span class="nm">${esc(p.name)}</span><span class="st">${p.finished ? fmtTime(p.finishTime) : Math.round(p.d) + ' m'}</span>`;
      } else {
        li.innerHTML = `<span class="rk">${p.rank}</span><span class="dot" style="background:${p.color};color:${p.color}"></span><span class="nm">${esc(p.name)}</span>`;
      }
      ol.appendChild(li);
    }
    if (me.host && !inRace) {
      const li = document.createElement('li');
      li.className = 'st';
      li.innerHTML = `<span class="nm" style="color:var(--gold)">👑 Jij bent host — druk op <b>S</b>${remaining != null ? ' (nog ' + remaining + 's voor start)' : ''}</span>`;
      ol.appendChild(li);
    }
  }

  let lastLead = '';
  function updateLead() {
    if (!snap || phase !== 'race' || snap.players.length === 0) {
      if (lastLead !== '') { lastLead = ''; $('lead').classList.add('hidden'); }
      return;
    }
    const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
    const top = sorted[0];
    const key = top.id + top.d;
    if (key === lastLead) return;
    lastLead = key;
    $('leadText').innerHTML = `<span class="crown">👑</span> ${esc(top.name)} ligt AAN KOP`;
    $('lead').classList.remove('hidden');
  }

  function drawMinimap() {
    if (!snap || !track) return;
    const w = mm.clientWidth, h = mm.clientHeight;
    mmCtx.clearRect(0, 0, w, h);
    const total = snap.trackLength || 23000;
    const yFor = (d) => h - 3 - (d / total) * (h - 8);
    // finishlijn
    mmCtx.fillStyle = 'rgba(255,217,61,0.85)';
    mmCtx.fillRect(1, 2, w - 2, 2);
    for (const p of snap.players) {
      const yy = yFor(p.d);
      const isMe = p.id === me.id;
      const isTop = p.rank === 1;
      mmCtx.beginPath();
      mmCtx.arc(w / 2, yy, isTop ? 3 : 2.2, 0, 7);
      mmCtx.fillStyle = p.color;
      mmCtx.fill();
      if (isMe) {
        mmCtx.strokeStyle = '#fff';
        mmCtx.lineWidth = 1;
        mmCtx.beginPath(); mmCtx.arc(w / 2, yy, 4.2, 0, 7); mmCtx.stroke();
      }
    }
  }

  function fmtTime(ms) {
    const s = ms / 1000;
    const m = Math.floor(s / 60);
    const ss = Math.floor(s % 60);
    return `${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
  }
  function esc(str) {
    return String(str).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
  }


  /* ---------- in-/uitvoer ---------- */
  const touchesLeft = new Map();
  const touchesRight = new Map();

  canvas.addEventListener('pointerdown', (e) => {
    canvas.setPointerCapture(e.pointerId);
    const side = e.clientX < W / 2 ? 'L' : 'R';
    (side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
    updateSteerFromTouches();
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!touchesLeft.has(e.pointerId) && !touchesRight.has(e.pointerId)) return;
    touchesLeft.delete(e.pointerId);
    touchesRight.delete(e.pointerId);
    const side = e.clientX < W / 2 ? 'L' : 'R';
    (side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
    updateSteerFromTouches();
  });
  const endTouch = (e) => { touchesLeft.delete(e.pointerId); touchesRight.delete(e.pointerId); updateSteerFromTouches(); };
  canvas.addEventListener('pointerup', endTouch);
  canvas.addEventListener('pointercancel', endTouch);

  function updateSteerFromTouches() {
    if (touchesRight.size > 0 && touchesLeft.size === 0) input.steer = 1;
    else if (touchesLeft.size > 0 && touchesRight.size === 0) input.steer = -1;
    else input.steer = 0;
  }

  window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') input.steer = -1;
    if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') input.steer = 1;
    if (e.key.toLowerCase() === 's' && me.host && (phase === 'lobby' || phase === 'results')
        && document.activeElement !== $('nameInput')) {
      sendHostStart();
    }
  });
  window.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A' ||
        e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
      if (touchesLeft.size === 0 && touchesRight.size === 0) input.steer = 0;
    }
  });
  window.addEventListener('blur', () => { input.steer = 0; });

  function sendHostStart() {
    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'host_start' }));
  }

  // input naar server
  setInterval(() => {
    if (ws && ws.readyState === 1 && me.id) {
      ws.send(JSON.stringify({ type: 'input', steer: input.steer }));
    }
  }, 33);

  /* ---------- fx & toasts ---------- */
  function onFx(id, kind) {
    const r = rp[id];
    if (!r) return;
    const meSnap = snap && snap.players.find((p) => p.id === me.id);
    const selfD = meSnap ? rp[me.id] ? rp[me.id].rd : meSnap.d : 0;
    const roadW = Math.min(W * 0.88, 460);
    const scaleX = roadW / ROAD_W;
    const carY = Math.min(H * 0.62, H - 140);
    const sx = (W - roadW) / 2 + r.rx * scaleX;
    const sy = carY - (r.rd - selfD) * K;
    const col = kind.indexOf('boost') >= 0 ? '#00f0ff' : kind.indexOf('shield') >= 0 ? '#3dff88'
      : kind.indexOf('pylon') >= 0 ? '#ffd93d' : '#ff4d6d';

    if (kind.indexOf('hit') === 0) {
      burst(sx, sy, col, 14);
      burst(sx, sy, '#fff', 6);
    } else {
      pulseFx(sx, sy, col);
      burst(sx, sy, col, 12);
    }

    if (id === me.id) {
      if (kind === 'hit:pylon') toast('💥 Je raakt een pylon!', '');
      else if (kind === 'hit:oil') toast('🌀 Olie! Je glijdt weg…', '');
      else if (kind === 'pickup:boost') toast('⚡ BOOST!', 'gold');
      else if (kind === 'pickup:shield') toast('🛡 Schild actief!', 'gold');
      if (kind.indexOf('hit') === 0) shake = 14;
    }
  }

  function burst(sx, sy, color, n) {
    for (let i = 0; i < n; i++) {
      const a = Math.random() * Math.PI * 2;
      const sp = 40 + Math.random() * 160;
      fx.push({
        kind: 'dot', sx, sy,
        vx: Math.cos(a) * sp, vy: Math.sin(a) * sp,
        size: 2 + Math.random() * 4,
        color, life: 0, maxLife: 0.4 + Math.random() * 0.4,
      });
    }
  }
  function pulseFx(sx, sy, color) {
    fx.push({ kind: 'pulse', sx, sy, vx: 0, vy: 0, size: 14, color, life: 0, maxLife: 0.5 });
  }
  function advanceFx(dt) {
    for (let i = fx.length - 1; i >= 0; i--) {
      const f = fx[i];
      f.life += dt;
      if (f.life >= f.maxLife) { fx.splice(i, 1); continue; }
      if (f.kind === 'dot') { f.sx += f.vx * dt; f.sy += f.vy * dt; f.vx *= 0.94; f.vy *= 0.94; }
    }
  }

  function toast(text, cls) {
    const box = $('toasts');
    const el = document.createElement('div');
    el.className = 'toast' + (cls ? ' ' + cls : '');
    el.textContent = text;
    box.appendChild(el);
    setTimeout(() => el.remove(), 2600);
    while (box.children.length > 3) box.firstChild.remove();
  }

  /* ---------- uitslag ---------- */
  function buildResults(s) {
    $('results').classList.remove('hidden');
    const sorted = s.players.slice().sort((a, b) => a.rank - b.rank);
    const podium = $('podium');
    podium.innerHTML = '';
    const medals = { 1: '🥇', 2: '🥈', 3: '🥉' };
    for (const p of sorted.slice(0, 3)) {
      const d = document.createElement('div');
      d.className = 'pod g' + p.rank;
      d.innerHTML = `<span class="medal">${medals[p.rank]}</span><div class="pname">${esc(p.name)}</div>`;
      podium.appendChild(d);
    }
    const ol = $('resultsList');
    ol.innerHTML = '';
    sorted.forEach((p) => {
      const li = document.createElement('li');
      if (p.id === me.id) li.className = 'me';
      li.innerHTML = `<span class="rk">${p.rank}</span><span class="nm">${esc(p.name)}</span><span class="tm">${p.finished ? fmtTime(p.finishTime) : 'niet gefinisht · ' + Math.round(p.d) + ' m'}</span>`;
      ol.appendChild(li);
    });
    $('resSub').textContent = me.host
      ? 'Druk op S om een nieuwe race te starten (of gebruik de knop).'
      : 'De host kan een nieuwe race starten.';
  }

  $('againBtn').onclick = () => {
    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'ready_again' }));
  };

  /* ---------- start ---------- */
  resize();
  requestAnimationFrame(frame);
})();