import { DAYS, DAY_LENGTH, RECIPES } from './recipes';
import type { Game } from './game';

const hud = (): HTMLElement => document.getElementById('hud')!;
const overlay = (): HTMLElement => document.getElementById('overlay')!;

export function updateHud(game: Game): void {
  const el = hud();
  if (game.phase !== 'playing') {
    el.classList.add('hidden');
    return;
  }
  el.classList.remove('hidden');
  const sec = Math.ceil(game.timeLeft);
  document.getElementById('hud-day')!.textContent = `Day ${game.day}`;
  document.getElementById('hud-time')!.textContent =
    `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, '0')}`;
  document.getElementById('hud-stars')!.textContent =
    '★'.repeat(game.stars) + '☆'.repeat(5 - game.stars);
  document.getElementById('hud-coins')!.textContent = `🪙 ${game.coins}/${game.cfg().target}`;
}

export function showTitle(game: Game, onStart: () => void): void {
  const best =
    game.bestDay >= 4
      ? '★ all 3 days cleared! ★'
      : game.bestDay > 1
        ? `best so far: day ${game.bestDay}`
        : 'a tiny diner game';
  overlay().innerHTML = `
    <div class="screen">
      <div class="menu-emoji">🥞🍳🍔</div>
      <h1>SHORT<br>STACK</h1>
      <div class="sub">${best}</div>
      <button class="bigbtn" data-testid="start">OPEN THE DINER</button>
      <div class="sub" style="font-size:12px">tap orders · cook 'em golden · get paid</div>
    </div>`;
  overlay().querySelector('[data-testid="start"]')!.addEventListener('click', onStart);
}

export function showDayIntro(game: Game, onStart: () => void): void {
  const cfg = DAYS[Math.min(game.day, DAYS.length) - 1];
  const menu = cfg.recipes.map((i) => RECIPES[i].emoji).join(' ');
  overlay().innerHTML = `
    <div class="screen dim-bg">
      <h2>Day ${game.day}</h2>
      <div class="sub">today's menu</div>
      <div class="menu-emoji">${menu}</div>
      <div class="statrow"><span>earnings target</span><b>🪙 ${cfg.target}</b></div>
      <div class="statrow"><span>shift length</span><b>${DAY_LENGTH}s</b></div>
      <button class="bigbtn teal" data-testid="startday">START SHIFT</button>
    </div>`;
  overlay().querySelector('[data-testid="startday"]')!.addEventListener('click', onStart);
}

export function showRecap(game: Game, onNext: () => void): void {
  const met = game.targetMet();
  const last = game.day >= DAYS.length;
  const title = met ? (last ? 'Last shift done!' : `Day ${game.day} done!`) : 'Shift over...';
  const btn = met ? (last ? 'SEE RESULTS ▶' : `DAY ${game.day + 1} ▶`) : `RETRY DAY ${game.day}`;
  overlay().innerHTML = `
    <div class="screen dim-bg">
      <h2>${title}</h2>
      <div class="statrow"><span>earned</span><b>🪙 ${game.coins} / ${game.cfg().target}</b></div>
      <div class="statrow"><span>guests served</span><b>${game.stats.served}</b></div>
      <div class="statrow"><span>guests lost</span><b>${game.stats.lost}</b></div>
      <div class="statrow"><span>rating</span><b>${'★'.repeat(game.stars)}${'☆'.repeat(5 - game.stars)}</b></div>
      <div class="sub">${met ? 'target met — nice cooking! 🎉' : 'missed the target. one more try!'}</div>
      <button class="bigbtn" data-testid="nextday">${btn}</button>
    </div>`;
  overlay().querySelector('[data-testid="nextday"]')!.addEventListener('click', onNext);
}

export function showWin(game: Game, onRestart: () => void): void {
  overlay().innerHTML = `
    <div class="screen dim-bg">
      <div class="menu-emoji">🎉🥞🎉</div>
      <h2>You did it!</h2>
      <div class="sub">three full days at the griddle</div>
      <div class="statrow"><span>total earned</span><b>🪙 ${game.totalEarned}</b></div>
      <button class="bigbtn" data-testid="restart">PLAY AGAIN</button>
    </div>`;
  overlay().querySelector('[data-testid="restart"]')!.addEventListener('click', onRestart);
}

export function clearOverlay(): void {
  overlay().innerHTML = '';
}

let toastTimer = 0;
export function toast(msg: string): void {
  const el = document.getElementById('toast')!;
  el.textContent = msg;
  el.classList.remove('hidden');
  window.clearTimeout(toastTimer);
  toastTimer = window.setTimeout(() => el.classList.add('hidden'), 1600);
}
