// Minimal app logic for math training
const state = {
  ops: new Set(),
  mode: null, // 'timed' or 'training'
  score: 0,
  currentProblem: null,
  answerBuffer: '',
  timerId: null,
  timeLeft: 60,
  sessionSolved: 0,
  sessionTarget: 20,
  settings: {
    timedSeconds: 60,
    maxResult: 40,
    maxOperand: 20,
    sessionProblems: 20,
    allowNegative: false,
    allowFraction: false,
  }
}

// elements
const menuScreen = document.getElementById('menu-screen')
const playScreen = document.getElementById('play-screen')
const opsContainer = document.getElementById('ops')
const modeButtons = document.querySelectorAll('.mode-btn')
const opButtons = document.querySelectorAll('.op-btn')
const backBtn = document.getElementById('back-btn')
const problemEl = document.getElementById('problem')
const answerEl = document.getElementById('answer')
const feedbackEl = document.getElementById('feedback')
const timerEl = document.getElementById('timer')
const scoreEl = document.getElementById('score')
const keypad = document.querySelectorAll('.key')
const submitBtn = document.getElementById('submit')
const clearBtn = document.getElementById('clear')
const backspaceBtn = document.getElementById('backspace')
const historyPanel = document.getElementById('history-panel')
const settingTimed = document.getElementById('setting-timed')
const settingMaxResult = document.getElementById('setting-max-result')
const settingMaxOperand = document.getElementById('setting-max-operand')
const settingSessionProblems = document.getElementById('setting-session-problems')
const settingAllowNegative = document.getElementById('setting-allow-negative')
const settingAllowFraction = document.getElementById('setting-allow-fraction')
const saveSettingsBtn = document.getElementById('save-settings')
const resetSettingsBtn = document.getElementById('reset-settings')
const progressInner = document.getElementById('progress_inner')
const dotBtn = document.getElementById('dot')
const negateBtn = document.getElementById('negate')
const summaryOverlay = document.getElementById('summary-overlay')
const summaryText = document.getElementById('summary-text')
const summaryBack = document.getElementById('summary-back')
const statusEl = document.getElementById('status');

// load settings from localStorage
function loadSettings(){
  try{
    const raw = localStorage.getItem('matma:settings')
    if (raw) {
      const s = JSON.parse(raw)
      state.settings = Object.assign(state.settings, s)
    }
  }catch(e){ console.warn('settings load failed', e) }
  // reflect to inputs
  settingTimed.value = state.settings.timedSeconds
  settingMaxResult.value = state.settings.maxResult
  settingMaxOperand.value = state.settings.maxOperand
  settingSessionProblems.value = state.settings.sessionProblems
  settingAllowNegative.checked = !!state.settings.allowNegative
  settingAllowFraction.checked = !!state.settings.allowFraction
}

function saveSettings(){
  state.settings.timedSeconds = Math.max(5, Math.min(600, parseInt(settingTimed.value,10) || 60))
  state.settings.maxResult = Math.max(1, Math.min(999, parseInt(settingMaxResult.value,10) || 40))
  state.settings.maxOperand = Math.max(1, Math.min(999, parseInt(settingMaxOperand.value,10) || 20))
  state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || 20))
  state.settings.allowNegative = !!settingAllowNegative.checked
  state.settings.allowFraction = !!settingAllowFraction.checked
  try{ localStorage.setItem('matma:settings', JSON.stringify(state.settings)) }catch(e){console.warn('save failed',e)}

  // visual feedback
  const parent = saveSettingsBtn.parentElement;
  const feedback = document.createElement('span');
  feedback.textContent = 'Zapisano!';
  feedback.style.color = '#16a34a';
  feedback.style.marginLeft = '12px';
  parent.appendChild(feedback);
  setTimeout(()=> parent.removeChild(feedback), 2000);
}

function resetSettings(){
  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20, allowNegative: false, allowFraction: false};
  saveSettings();
  loadSettings();
}

saveSettingsBtn.addEventListener('click', saveSettings)
resetSettingsBtn.addEventListener('click', resetSettings)

loadSettings()

// initial wiring
opButtons.forEach(b => {
  b.addEventListener('click', () => {
    const op = b.dataset.op
    if (state.ops.has(op)) { state.ops.delete(op); b.classList.remove('active') }
    else { state.ops.add(op); b.classList.add('active') }
  })
})

modeButtons.forEach(b => b.addEventListener('click', () => {
  if (state.ops.size === 0) {
    const hint = document.querySelector('.hint-text');
    hint.style.color = '#dc2626';
    hint.style.fontWeight = '600';
    setTimeout(() => {
        hint.style.color = '';
        hint.style.fontWeight = '';
    }, 2000);
    return;
  }
  modeButtons.forEach(x=>x.classList.remove('active'))
  b.classList.add('active')
  state.mode = b.dataset.mode
  startPlay()
}))

backBtn.addEventListener('click', ()=>{
  stopTimer()
  playScreen.classList.add('hidden')
  menuScreen.classList.remove('hidden')
  feedbackEl.textContent = ''
})

function startPlay(){
  menuScreen.classList.add('hidden')
  playScreen.classList.remove('hidden')
  state.score = 0
  scoreEl.textContent = state.score
  state.answerBuffer = ''
  answerEl.textContent = ''
  feedbackEl.textContent = ''
  state.currentProblem = generateProblem()
  renderProblem()

  if (state.mode === 'timed'){
    progressInner.style.width = '0%'
    startTimer(state.settings.timedSeconds)
    statusEl.textContent = 'Na czas';
    timerEl.classList.remove('hidden');
  } else {
    progressInner.style.width = '0%'
    state.sessionSolved = 0
    state.sessionTarget = Math.max(1, state.settings.sessionProblems)
    updateProgress()
    timerEl.classList.add('hidden');
  }
}

function generateProblem(){
  const ops = Array.from(state.ops)
  const op = ops[Math.floor(Math.random()*ops.length)]
  const maxOp = Math.max(1, state.settings.maxOperand)
  const maxRes = Math.max(1, state.settings.maxResult)
  let a = 0, b = 0
  for (let i=0;i<200;i++){
    if (op === 'div'){
      b = randInt(1, maxOp)
      if (!state.settings.allowFraction){
        const maxQByOp = Math.floor(maxOp / b)
        const maxQ = Math.min(maxRes, maxQByOp)
        if (maxQ < 0) continue
        const q = randInt(0, maxQ)
        a = q * b
        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
        return {a,b,op}
      } else {
        const maxResultNByOp = Math.floor((10 * maxOp) / b)
        const maxResultN = Math.min(maxRes * 10, maxResultNByOp)
        if (maxResultN < 0) continue
        const result_n = randInt(0, maxResultN)
        if ((result_n * b) % 10 !== 0) continue
        a = (result_n * b) / 10
        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
        return {a,b,op}
      }
    } else if (op === 'mul'){
      a = randInt(0, maxOp)
      b = randInt(0, maxOp)
      if (a * b <= maxRes) return {a,b,op}
    } else if (op === 'add'){
      a = randInt(0, maxOp)
      b = randInt(0, maxOp)
      if (a + b <= maxRes) return {a,b,op}
    } else if (op === 'sub'){
      a = randInt(0, maxOp)
      b = randInt(0, maxOp)
      if (!state.settings.allowNegative){
        if (a < b) [a,b] = [b,a]
        if (a - b <= maxRes) return {a,b,op}
      } else {
        if (Math.abs(a - b) <= maxRes) return {a,b,op}
      }
    }
  }
  a = Math.min(maxOp, Math.floor(maxRes/2))
  b = Math.min(maxOp, 1)
  return {a,b,op}
}

function randInt(min,max){
  return Math.floor(Math.random()*(max-min+1))+min
}

function renderProblem(){
  const p = state.currentProblem
  const map = {add: '+', sub: '−', mul: '×', div: '÷'}
  const symbol = map[p.op] || '?'
  problemEl.textContent = `${p.a} ${symbol} ${p.b}`
}

function submitAnswer(){
  const buf = state.answerBuffer.trim()
  if (buf.length === 0) return
  const given = parseFloat(buf)
  const p = state.currentProblem
  let correct = null
  if (p.op === 'add') correct = p.a + p.b
  else if (p.op === 'sub') correct = p.a - p.b
  else if (p.op === 'mul') correct = p.a * p.b
  else if (p.op === 'div') correct = (p.b === 0) ? null : (p.a / p.b)
  const eps = state.settings.allowFraction ? 1e-6 : 1e-9
  const isCorrect = (correct !== null) && (Math.abs(given - correct) < eps)

  feedbackEl.style.opacity = 1;
  if (isCorrect) {
    state.score += 1
    feedbackEl.textContent = 'Dobrze!'
    feedbackEl.classList.add('correct');
    feedbackEl.classList.remove('incorrect');
  } else {
    const correctAnswer = Number.isFinite(correct) ? parseFloat(correct.toFixed(2)) : '—';
    feedbackEl.textContent = `Poprawna odpowiedź: ${correctAnswer}`
    feedbackEl.classList.add('incorrect');
    feedbackEl.classList.remove('correct');
  }
  scoreEl.textContent = state.score
  state.answerBuffer = ''
  answerEl.textContent = ''

  if (state.mode === 'training'){
    state.sessionSolved++
    updateProgress()
    if (state.sessionSolved >= state.sessionTarget){
      saveSessionToHistory()
      setTimeout(showSummary, 1200);
      return
    }
  }

  setTimeout(() => {
    feedbackEl.style.opacity = 0;
    setTimeout(() => {
        state.currentProblem = generateProblem()
        renderProblem()
    }, 200);
  }, 1200);
}

submitBtn.addEventListener('click', submitAnswer)

keypad.forEach(k => {
  k.addEventListener('click', ()=>{
    const v = k.textContent.trim()
    if (!/^[0-9]$/.test(v)) return
    if (state.answerBuffer.length >= 12) return
    state.answerBuffer += v
    answerEl.textContent = state.answerBuffer
  })
})

if (dotBtn){
  dotBtn.addEventListener('click', ()=>{
    if (!state.settings.allowFraction) return
    if (state.answerBuffer.includes('.')) return
    if (state.answerBuffer.length === 0) state.answerBuffer = '0'
    state.answerBuffer += '.'
    answerEl.textContent = state.answerBuffer
  })
}

if (negateBtn){
  negateBtn.addEventListener('click', ()=>{
    if (!state.settings.allowNegative) return
    if (state.answerBuffer.startsWith('-')) state.answerBuffer = state.answerBuffer.slice(1)
    else state.answerBuffer = '-' + state.answerBuffer
    answerEl.textContent = state.answerBuffer
  })
}

clearBtn.addEventListener('click', ()=>{
  state.answerBuffer = ''
  answerEl.textContent = ''
})

backspaceBtn.addEventListener('click', ()=>{
  state.answerBuffer = state.answerBuffer.slice(0,-1)
  answerEl.textContent = state.answerBuffer
})

function startTimer(seconds){
  state.timeLeft = seconds
  timerEl.textContent = state.timeLeft

  stopTimer();
  state.timerId = setInterval(()=>{
    state.timeLeft -= 1
    timerEl.textContent = state.timeLeft
    const pct = Math.max(0, (state.timeLeft / seconds) * 100)
    progressInner.style.width = pct + '%'
    if (state.timeLeft <= 0) {
      stopTimer()
      endSession()
    }
  },1000)
}

function stopTimer(){
  if (state.timerId) clearInterval(state.timerId)
  state.timerId = null
}

function endSession(){
  saveSessionToHistory()
  showSummary();
}

function showSummary(){
  const total = state.mode === 'timed' ? state.score : state.sessionTarget;
  const correct = state.score;
  const pct = total > 0 ? Math.round((correct / total) * 100) : 0;

  if (state.mode === 'timed') {
      summaryText.textContent = `Koniec czasu! Zdobyłeś ${correct} punktów.`;
  } else {
      summaryText.textContent = `Twój wynik: ${correct} / ${total} poprawnie (${pct}%)`;
  }
  summaryOverlay.classList.remove('hidden');
}

summaryBack.addEventListener('click', ()=>{
  summaryOverlay.classList.add('hidden');
  playScreen.classList.add('hidden');
  menuScreen.classList.remove('hidden');
});

function updateProgress(){
  if (state.mode === 'training'){
    const pct = Math.min(100, Math.round((state.sessionSolved/state.sessionTarget)*100))
    progressInner.style.width = pct + '%'
    statusEl.textContent = `${state.sessionSolved}/${state.sessionTarget}`
  }
}

// history persistence
function loadHistory(){
  try{
    const raw = localStorage.getItem('matma:history')
    return raw ? JSON.parse(raw) : []
  }catch(e){ return [] }
}

function saveSessionToHistory(){
  const h = loadHistory()
  const sessionData = {
      ts: Date.now(),
      mode: state.mode,
      score: state.score,
      ops: Array.from(state.ops),
      duration: state.mode === 'timed' ? state.settings.timedSeconds : null,
      problems: state.mode === 'training' ? state.sessionTarget : null
  };
  h.unshift(sessionData);
  while(h.length>50) h.pop()
  try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
}

function renderHistory(){
  const h = loadHistory()
  historyPanel.innerHTML = ''
  if (h.length === 0) {
    historyPanel.innerHTML = '<p class="history-empty">Brak zapisanych sesji.</p>'
    return
  }
  h.forEach(item => {
    const d = new Date(item.ts).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
    const modeText = item.mode === 'timed' ? `Na czas (${item.duration}s)` : `Trening (${item.problems} zadań)`;
    const opsText = item.ops.join(', ').replace('add','+').replace('sub','-').replace('mul','×').replace('div','÷');

    const el = document.createElement('div')
    el.className = 'history-item'
    el.innerHTML = `
        <div class="history-item-main">
            <span class="history-score">Wynik: ${item.score}</span>
            <span class="history-ops">${opsText}</span>
        </div>
        <div class="history-item-meta">
            <span>${modeText}</span>
            <span>${d}</span>
        </div>`
    historyPanel.appendChild(el)
  })
}

// Toggle history panel
const historyDetails = historyPanel.closest('details');
if (historyDetails) {
    historyDetails.addEventListener('toggle', () => {
        if (historyDetails.open) {
            renderHistory();
        }
    });
}

// keyboard support
window.addEventListener('keydown', (e)=>{
  if (playScreen.classList.contains('hidden')) return
  if (/^[0-9]$/.test(e.key)){
    if (state.answerBuffer.length < 12) {
      state.answerBuffer += e.key
      answerEl.textContent = state.answerBuffer
    }
  } else if (e.key === 'Backspace'){
    state.answerBuffer = state.answerBuffer.slice(0,-1)
    answerEl.textContent = state.answerBuffer
  } else if (e.key === 'Enter'){
    submitAnswer()
  } else if (e.key === '.' || e.key === ',') {
    dotBtn.click();
  }
})

// Set default active operations
document.addEventListener('DOMContentLoaded', () => {
    opButtons.forEach(btn => {
        const op = btn.dataset.op;
        if (['add', 'sub'].includes(op)) {
            btn.classList.add('active');
            state.ops.add(op);
        }
    });
});