app.js

let PLAYERS = [];

const STAT_CONFIG = {
  passing_yards: { label: "Passing Yards", target: 50000, desc: "Count down from 50,000 passing yards" },
  passing_tds: { label: "Passing TDs", target: 300, desc: "Count down from 300 passing touchdowns" },
  rushing_yards: { label: "Rushing Yards", target: 10000, desc: "Count down from 10,000 rushing yards" },
  rushing_tds: { label: "Rushing TDs", target: 100, desc: "Count down from 100 rushing touchdowns" },
  receptions: { label: "Receptions", target: 1000, desc: "Count down from 1,000 receptions" },
  receiving_yards: { label: "Receiving Yards", target: 10000, desc: "Count down from 10,000 receiving yards" },
  tackles: { label: "Tackles", target: 1000, desc: "Count down from 1,000 tackles" },
  sacks: { label: "Sacks", target: 100, desc: "Count down from 100 sacks" },
  interceptions: { label: "Interceptions", target: 50, desc: "Count down from 50 interceptions" }
};

let state = {
  mode: 'daily',
  category: 'passing_yards',
  target: 50000,
  remaining: 50000,
  lives: 3,
  picks: [],
  usedIds: new Set(),
  rule: null,
  ruleApplied: false,
  gameOver: false,
  won: false,
  par: 0,
  seed: 0,
};


const TEAM_COLORS = {
  'NE': '#002244', 'TB': '#d50a0a', 'SD': '#0080C6', 'NO': '#d3bc8d', 'IND': '#002C5F', 'DEN': '#FB4F14',
  'ATL': '#a71930', 'GB': '#203731', 'NYJ': '#125740', 'MIN': '#4F2683', 'LAC': '#0080C6', 'MIA': '#008E97',
  'PIT': '#FFB612', 'NYG': '#0B2265', 'DET': '#0076b6', 'LAR': '#003594', 'SEA': '#002244', 'KC': '#E31837',
  'SF': '#AA0000', 'OAK': '#000000', 'TEN': '#4B92DB', 'PHI': '#004C54', 'DAL': '#003594', 'BUF': '#00338D',
  'CIN': '#FB4F14', 'ARI': '#97233F', 'CHI': '#0B162A', 'CAR': '#0085CA', 'WAS': '#5A1414', 'BAL': '#241773',
  'LV': '#000000', 'HOU': '#03202f', 'JAX': '#006778', 'CLE': '#311D00'
};

let playClockInterval = null;
let playClockTime = 40;

function resetPlayClock() {
  clearInterval(playClockInterval);
  if (state.gameOver || state.mode === 'free') {
    document.getElementById('play-clock-container').classList.add('hidden');
    return;
  }
  document.getElementById('play-clock-container').classList.remove('hidden');
  playClockTime = 40;
  document.getElementById('play-clock').textContent = playClockTime;
  document.getElementById('play-clock').classList.remove('danger');
  
  playClockInterval = setInterval(() => {
    playClockTime--;
    document.getElementById('play-clock').textContent = playClockTime;
    if (playClockTime <= 10) {
      document.getElementById('play-clock').classList.add('danger');
    }
    
    if (playClockTime <= 0) {
      clearInterval(playClockInterval);
      state.lives--;
      triggerBust();
  playBuzzer();
      playBuzzer();
      showToast('DELAY OF GAME! -1 timeout', true);
      if (state.lives <= 0) {
        state.gameOver = true;
        setTimeout(() => showLoss(), 600);
      }
      updateUI();
      if (!state.gameOver) resetPlayClock();
    }
  }, 1000);
}

let selectedPlayer = null;
let acIndex = -1;

const RULES = [
  { text: 'First player must be a <strong>Quarterback (QB)</strong>', fn: p => p.positions && p.positions.includes('QB') },
  { text: 'First player must be a <strong>Wide Receiver (WR)</strong>', fn: p => p.positions && p.positions.includes('WR') },
  { text: 'First player must be a <strong>Running Back (RB)</strong>', fn: p => p.positions && p.positions.includes('RB') },
  { text: 'First player must be a <strong>Defensive Player</strong> (DE, DT, LB, CB, S)', fn: p => p.positions && p.positions.some(pos => ['DE','DT','LB','CB','S'].includes(pos)) },
  { text: 'First player must have played for the <strong>Dallas Cowboys</strong>', fn: p => p.teams && p.teams.includes('DAL') },
  { text: 'First player must have played for the <strong>Green Bay Packers</strong>', fn: p => p.teams && p.teams.includes('GB') },
  { text: 'First player must have played for the <strong>San Francisco 49ers</strong>', fn: p => p.teams && p.teams.includes('SF') },
  { text: 'First player must be an <strong>Active Player</strong>', fn: p => p.active === true },
  { text: 'First player must be a <strong>Retired Player</strong>', fn: p => p.active === false }
];

function seededRand(seed) {
  let s = seed;
  return function() {
    s = (s * 1664525 + 1013904223) & 0xffffffff;
    return (s >>> 0) / 0xffffffff;
  };
}

function getDailySeed() {
  const d = new Date();
  return d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate();
}

function getPlayerStat(p, category) {
  if (!p.stats || p.stats[category] === undefined) return 0;
  return p.stats[category];
}

function computePar(target, players, category) {
  const sorted = [...players].filter(p => getPlayerStat(p, category) > 0 && getPlayerStat(p, category) <= target)
                             .sort((a, b) => getPlayerStat(b, category) - getPlayerStat(a, category));
  let rem = target;
  let picks = 0;
  const used = new Set();

  while (rem > 0 && picks < 50) {
    const p = sorted.find(x => getPlayerStat(x, category) <= rem && !used.has(x.name));
    if (!p) break;
    used.add(p.name);
    rem -= getPlayerStat(p, category);
    picks++;
  }
  return rem === 0 ? picks : Math.ceil(target / (sorted[0] ? getPlayerStat(sorted[0], category) : target/10));
}

async function loadPlayers() {
  try {
    const res = await fetch('players.json');
    PLAYERS = await res.json();
  } catch(e) {
    PLAYERS = [];
    showToast('Could not load player data', true);
  }
}

async function init() {
  await loadPlayers();
  setMode('daily');
}


// Audio & Haptics System
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

function announce(text) {
  if ('speechSynthesis' in window) {
    const msg = new SpeechSynthesisUtterance(text);
    msg.pitch = 0.8;
    msg.rate = 1.2;
    window.speechSynthesis.speak(msg);
  }
}

function playWhistle() {
  try {
    if(audioCtx.state === 'suspended') audioCtx.resume();
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'triangle';
    osc.frequency.setValueAtTime(2500, audioCtx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(3000, audioCtx.currentTime + 0.3);
    gain.gain.setValueAtTime(0, audioCtx.currentTime);
    gain.gain.linearRampToValueAtTime(0.5, audioCtx.currentTime + 0.1);
    gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.5);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.5);
  } catch(e) {}
}

function playBuzzer() {
  try {
    if(audioCtx.state === 'suspended') audioCtx.resume();
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sawtooth';
    osc.frequency.setValueAtTime(100, audioCtx.currentTime);
    gain.gain.setValueAtTime(0.5, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 1);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 1);
    if(navigator.vibrate) navigator.vibrate([100, 50, 100, 50, 100]);
  } catch(e) {}
}

function playThud() {
  try {
    if(audioCtx.state === 'suspended') audioCtx.resume();
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(150, audioCtx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
    gain.gain.setValueAtTime(1, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.3);
    if(navigator.vibrate) navigator.vibrate(100);
  } catch(e) {}
}


function setMode(mode) {
  state.mode = mode;
  document.getElementById('tab-daily').classList.toggle('active', mode === 'daily');
  document.getElementById('tab-free').classList.toggle('active', mode === 'free');
  
  if (mode === 'daily') {
    document.getElementById('free-play-controls').classList.remove('visible');
    
    // Pick daily category
    const dailySeed = getDailySeed();
    const r = seededRand(dailySeed);
    const catKeys = Object.keys(STAT_CONFIG);
    state.category = catKeys[Math.floor(r() * catKeys.length)];
  } else {
    document.getElementById('free-play-controls').classList.add('visible');
    state.category = document.getElementById('stat-selector').value;
  }

  startGame(mode);
}

function changeStatCategory() {
  if (state.mode === 'free') {
    state.category = document.getElementById('stat-selector').value;
    startGame('free');
  }
}

function startGame(mode) {
  let rand;
  if (mode === 'daily') {
    state.seed = getDailySeed();
  } else {
    state.seed = Math.floor(Math.random() * 999999);
  }
  rand = seededRand(state.seed);

  const ruleIdx = Math.floor(rand() * RULES.length);
  state.rule = RULES[ruleIdx];

  const config = STAT_CONFIG[state.category];
  state.target = config.target;
  state.remaining = config.target;
  state.lives = 3;
  state.picks = [];
  state.usedIds = new Set();
  state.ruleApplied = false;
  state.gameOver = false;
  state.won = false;
  state.par = computePar(state.target, PLAYERS, state.category);
  playWhistle();

  document.getElementById('header-desc').textContent = config.desc;
  document.getElementById('target-label').textContent = config.label.toUpperCase() + " REMAINING";

  updateUI();
  document.getElementById('end-screen').classList.remove('visible');
  document.getElementById('search-input').value = '';
  document.getElementById('search-input').disabled = false;
  document.getElementById('submit-btn').disabled = true;
  document.getElementById('picks-list').innerHTML = '';
  document.getElementById('picks-label').style.display = 'none';
  selectedPlayer = null;
  hideAutocomplete();
  resetPlayClock();
  document.getElementById('par-display').textContent = state.par;
}

function startFreePlay() {
  document.getElementById('end-screen').classList.remove('visible');
  setMode('free');
}

function updateUI() {

  if (state.lives === 1 && state.picks.length > 0) {
    document.getElementById('hail-mary-btn').classList.remove('hidden');
  } else {
    document.getElementById('hail-mary-btn').classList.add('hidden');
  }

  const rem = state.remaining;
  const el = document.getElementById('remaining');
  // Format number with commas
  el.textContent = rem.toLocaleString();
  
  const pct = rem / state.target;
  el.className = 'score-number ' + (rem === 0 ? 'zero' : pct > 0.5 ? 'good' : pct > 0.2 ? 'warning' : 'danger');

  document.getElementById('pick-count').textContent = state.picks.length;

  if (state.target > 0 && rem > 0 && rem <= state.target * 0.2) {
    document.body.classList.add('red-zone');
  } else {
    document.body.classList.remove('red-zone');
  }


  const lifeEls = document.querySelectorAll('.life-icon');
  lifeEls.forEach((el, i) => {
    el.classList.toggle('lost', i >= state.lives);
  });

  const ruleEl = document.getElementById('rule-text');
  if (!state.ruleApplied) {
    ruleEl.innerHTML = 'FLAG ON PLAY: ' + state.rule.text;
    document.getElementById('rule-card').style.opacity = '1';
  } else {
    ruleEl.innerHTML = '✅ <em style="opacity:0.6">Rule satisfied</em>';
    document.getElementById('rule-card').style.opacity = '0.5';
  }
}

function renderPicks() {
  const list = document.getElementById('picks-list');
  list.innerHTML = '';
  document.getElementById('picks-label').classList.toggle('hidden', state.picks.length === 0);

  let running = state.target;
  state.picks.forEach((p, i) => {
    const statVal = getPlayerStat(p, state.category);
    running -= statVal;
    
    // Format stat val
    const formattedStat = Number.isInteger(statVal) ? statVal.toLocaleString() : statVal.toFixed(1);
    const formattedRun = Number.isInteger(running) ? running.toLocaleString() : running.toFixed(1);
    
    const item = document.createElement('div');
    item.className = 'pick-item';

    const team = p.teams && p.teams[0] ? p.teams[0] : '';
    const color = TEAM_COLORS[team] || '#333';
    item.style.borderLeftColor = color;
    item.style.borderLeftWidth = '8px';

    item.innerHTML = `
      <span class="pick-num">#${i+1}</span>
      <span class="pick-name">${p.name}</span>
      <span class="pick-stat">-${formattedStat}</span>
      <span class="pick-remaining">${formattedRun}</span>
    `;
    list.appendChild(item);
  });
}

function stripAccents(s) {
  return s.normalize('NFD').replace(/[̀-ͯ]/g, '');
}

document.getElementById('search-input').addEventListener('input', function() {
  const q = stripAccents(this.value.trim().toLowerCase());
  selectedPlayer = null;
  document.getElementById('submit-btn').disabled = true;

  if (q.length < 2) { hideAutocomplete();
  resetPlayClock(); return; }

  const matches = PLAYERS
    .filter(p => {
      if (state.usedIds.has(p.name)) return false;
      const statVal = getPlayerStat(p, state.category);
      if (statVal <= 0) return false; // Must have the stat!
      const norm = stripAccents(p.name.toLowerCase());
      if (!norm.includes(q)) return false;
      if (q.length / p.name.length <= 0.5) return false;
      return true;
    })
    .sort((a, b) => {
      const aNorm = stripAccents(a.name.toLowerCase());
      const bNorm = stripAccents(b.name.toLowerCase());
      const aStart = aNorm.startsWith(q);
      const bStart = bNorm.startsWith(q);
      if (aStart && !bStart) return -1;
      if (!aStart && bStart) return 1;
      return getPlayerStat(b, state.category) - getPlayerStat(a, state.category);
    })
    .slice(0, 10);

  if (!matches.length) { hideAutocomplete();
  resetPlayClock(); return; }

  const list = document.getElementById('autocomplete-list');
  list.style.display = 'block';
  list.innerHTML = '';
  acIndex = -1;

  matches.forEach(p => {
    const isFirstPick = state.picks.length === 0 && !state.ruleApplied;
    const violatesRule = isFirstPick && !state.rule.fn(p);
    const statVal = getPlayerStat(p, state.category);
    const tooBig = statVal > state.remaining;

    const item = document.createElement('div');
    item.className = 'autocomplete-item' + (violatesRule ? ' invalid-rule' : '') + (tooBig ? ' too-big-item' : '');

    const norm = stripAccents(p.name);
    const normLower = norm.toLowerCase();
    const idx = normLower.indexOf(q);
    let highlighted = p.name;
    if (idx !== -1) {
      const before = p.name.substring(0, idx);
      const match = p.name.substring(idx, idx + q.length);
      const after = p.name.substring(idx + q.length);
      highlighted = before + '<em>' + match + '</em>' + after;
    }

    item.innerHTML = `<span>${highlighted}</span>`;
    item.addEventListener('click', () => selectPlayer(p));
    
    if (violatesRule) item.title = 'Warning: violates opening rule - costs a timeout!';
    if (tooBig) item.title = 'Warning: stat is too big, you will bust!';

    list.appendChild(item);
  });
});

document.getElementById('search-input').addEventListener('keydown', function(e) {
  const list = document.getElementById('autocomplete-list');
  const items = list.querySelectorAll('.autocomplete-item');
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    acIndex = Math.min(acIndex + 1, items.length - 1);
    items.forEach((it, i) => it.classList.toggle('selected', i === acIndex));
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    acIndex = Math.max(acIndex - 1, 0);
    items.forEach((it, i) => it.classList.toggle('selected', i === acIndex));
  } else if (e.key === 'Enter') {
    e.preventDefault();
    if (acIndex >= 0 && items[acIndex]) {
      items[acIndex].click();
    } else if (selectedPlayer) {
      submitPick();
    }
  } else if (e.key === 'Escape') {
    hideAutocomplete();
  resetPlayClock();
  }
});

document.addEventListener('click', (e) => {
  if (!e.target.closest('.search-area')) hideAutocomplete();
  resetPlayClock();
});

function hideAutocomplete() {
  document.getElementById('autocomplete-list').classList.add('hidden');
}

function selectPlayer(p) {
  selectedPlayer = p;
  document.getElementById('search-input').value = p.name;
  document.getElementById('submit-btn').disabled = false;
  hideAutocomplete();
  resetPlayClock();
}

function submitPick() {
  if (!selectedPlayer || state.gameOver) return;

  const p = selectedPlayer;
  const statVal = getPlayerStat(p, state.category);

  if (state.usedIds.has(p.name)) {
    showToast('Already drafted ' + p.name + '!', true);
    return;
  }

  if (state.picks.length === 0 && !state.ruleApplied) {
    if (!state.rule.fn(p)) {
      state.lives--;
      triggerBust();
  playBuzzer();
      showToast(`Penalty! ${p.name} violates rule. -1 timeout`, true);

      if (state.lives <= 0) {
        state.gameOver = true;
        setTimeout(() => showLoss(), 600);
      }
      updateUI();
      document.getElementById('search-input').value = '';
      selectedPlayer = null;
      document.getElementById('submit-btn').disabled = true;
      return;
    }
  }

  if (statVal > state.remaining) {
    loseLife(p, statVal);
    return;
  }

  state.usedIds.add(p.name);
  state.picks.push(p);
  if (state.picks.length === 1) state.ruleApplied = true;
  state.remaining -= statVal;
  playThud();
  if(state.remaining > 0) announce('First Down');

  renderPicks();
  updateUI();

  document.getElementById('search-input').value = '';
  selectedPlayer = null;
  document.getElementById('submit-btn').disabled = true;
  document.getElementById('search-input').focus();

  if (state.remaining === 0) {
    setTimeout(() => showWin(), 400);
  }
}


function hailMary() {
  if (state.gameOver || state.lives > 1) return;
  // Blind pick a random valid player you haven't used yet who has > 0 in this stat
  const validPlayers = PLAYERS.filter(p => !state.usedIds.has(p.name) && getPlayerStat(p, state.category) > 0);
  if (validPlayers.length === 0) return;
  
  const p = validPlayers[Math.floor(Math.random() * validPlayers.length)];
  const baseStat = getPlayerStat(p, state.category);
  const statVal = baseStat * 2; // 2X Multiplier!
  
  // Create a deep copy to show the modified stat in the UI without permanently changing PLAYERS array
  const pModified = JSON.parse(JSON.stringify(p));
  pModified.name = '🙏 ' + p.name + ' (HAIL MARY)';
  
  if (state.picks.length === 0 && !state.ruleApplied) {
    if (!state.rule.fn(p)) {
      state.lives--;
      triggerBust();
      showToast(`Penalty! ${p.name} violates rule. -1 timeout`, true);
      if (state.lives <= 0) {
        state.gameOver = true;
        setTimeout(() => showLoss(), 600);
      }
      updateUI();
      return;
    }
  }

  if (statVal > state.remaining) {
    loseLife(pModified, statVal);
    return;
  }

  state.usedIds.add(p.name);
  state.picks.push(pModified);
  if (state.picks.length === 1) state.ruleApplied = true;
  state.remaining -= statVal;
  
  // Custom stat tracker for Hail Mary (injects the *2)
  pModified.stats[state.category] = statVal;

  renderPicks();
  updateUI();
  playThud();
  announce('What a catch!');

  if (state.remaining === 0) {
    setTimeout(() => showWin(), 400);
  }
}

function loseLife(p, val) {
  state.lives--;
  triggerBust();
  playBuzzer();
  showToast(p ? `${p.name} (${val}) is too much! OVER ON DOWNS. -1 timeout` : 'Turnover! -1 timeout', true);

  if (state.lives <= 0) {
    state.gameOver = true;
    setTimeout(() => showLoss(), 600);
  }

  updateUI();
  document.getElementById('search-input').value = '';
  selectedPlayer = null;
  document.getElementById('submit-btn').disabled = true;
  if (!state.gameOver) resetPlayClock();
}

function triggerBust() {
  const flash = document.createElement('div');
  flash.className = 'bust-flash';
  document.body.appendChild(flash);
  setTimeout(() => flash.remove(), 500);

  const sb = document.getElementById('scoreboard');
  sb.classList.add('shake');
  setTimeout(() => sb.classList.remove('shake'), 400);
}

function showWin() {
  announce('Touchdown!');
  state.won = true;
  clearInterval(playClockInterval);
  state.gameOver = true;
  const picks = state.picks.length;
  const par = state.par;
  const diff = picks - par;

  let emoji = '🏆';
  let title = 'TOUCHDOWN!';
  let subtitle = '';

  if (diff <= 0) { emoji = '💍'; title = 'SUPER BOWL MVP!'; subtitle = 'Matched or beat par!'; }
  else if (diff <= 2) { emoji = '🎯'; title = 'FIELD GOAL!'; subtitle = 'Just above par. Great drive!'; }
  else { emoji = '🏈'; title = 'FIRST DOWN!'; subtitle = 'You made it. Try to beat par next time.'; }

  showEndScreen(emoji, title, subtitle);
}

function showLoss() {
  announce('Turnover on downs!');
  const emoji = '❌';
  const title = 'TURNOVER ON DOWNS!';
  clearInterval(playClockInterval);
  const subtitle = `You reached ${state.remaining} left. Out of timeouts!`;
  showEndScreen(emoji, title, subtitle);
}

function showEndScreen(emoji, title, subtitle) {
  document.getElementById('end-emoji').textContent = emoji;
  document.getElementById('end-title').textContent = title;
  document.getElementById('end-subtitle').textContent = subtitle;
  document.getElementById('end-picks').textContent = state.picks.length;
  document.getElementById('end-par').textContent = state.par;
  document.getElementById('end-lives').textContent = state.lives;
  document.getElementById('share-box').textContent = buildShareText();
  document.getElementById('end-screen').classList.add('visible');
}

function buildShareText() {
  const date = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  const mode = state.mode === 'daily' ? `Daily ${date}` : 'Free Play';
  const catLabel = STAT_CONFIG[state.category].label;
  const result = state.won ? `${state.picks.length} plays (par ${state.par})` : `DNF — ${state.remaining} left`;

  const emojiMap = (p, i) => {
    if (!state.won && i >= state.picks.length) return '';
    const pct = getPlayerStat(p, state.category) / state.target;
    if (pct >= 0.5) return '🟩';
    if (pct >= 0.2) return '🟨';
    return '⬜';
  };

  const grid = state.picks.map(emojiMap).join('');

  return `🏈 Gridiron Challenge — ${mode}
Category: ${catLabel}
${result}
${grid}
https://github.com/`;
}

function copyShare() {
  const text = document.getElementById('share-box').textContent;
  navigator.clipboard.writeText(text).then(() => {
    showToast('Copied to clipboard!');
  });
}

function showToast(msg, isError = false) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.className = 'toast' + (isError ? ' error' : '');
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2500);
}

init();

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('./sw.js').then(registration => {
        console.log('SW registered: ', registration);
      }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
    });
  }