app.js

(function () {
  'use strict';

  const $ = (sel, el = document) => el.querySelector(sel);
  const $$ = (sel, el = document) => [...el.querySelectorAll(sel)];
  const t = (k) => window.i18n.t(k);
  const todayKey = () => new Date().toISOString().slice(0, 10);

  // --- Toast ---
  let toastTimer;
  function toast(msg) {
    const el = $('#toast');
    el.textContent = msg;
    el.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => el.classList.remove('show'), 2000);
  }

  // --- Streak & helpers ---
  function computeStreak() {
    const sessions = db.get('sessions');
    const tasks = db.get('tasks');
    const days = new Set();
    sessions.forEach((s) => days.add(s.date));
    tasks.forEach((t) => { if (t.done && t.doneDate) days.add(t.doneDate); });
    let streak = 0;
    let d = new Date();
    while (true) {
      const k = d.toISOString().slice(0, 10);
      if (days.has(k)) { streak++; d.setDate(d.getDate() - 1); }
      else if (streak === 0 && k === todayKey()) { d.setDate(d.getDate() - 1); }
      else break;
    }
    return streak;
  }

  function greeting() {
    const h = new Date().getHours();
    if (h < 11) return t('home.greetMorning');
    if (h < 18) return t('home.greetDay');
    return t('home.greetEvening');
  }

  // --- Views ---
  const views = {};

  // HOME
  views['/'] = function () {
    const goals = db.get('goals');
    const tasks = db.get('tasks');
    const today = todayKey();
    const todayTasks = tasks.filter((x) => !x.done).slice(0, 6);
    const doneToday = tasks.filter((x) => x.done && x.doneDate === today).length;
    const streak = computeStreak();
    const whisper = coach.dailyWhisper({ totalTasks: tasks.length, doneTasks: doneToday, streak }, i18n.lang);

    const el = document.createElement('div');
    el.innerHTML = `
      <section class="hero">
        <span class="streak">🔥 ${streak} ${t('home.streak')}</span>
        <h1>${greeting()} 👋</h1>
        <p style="color:var(--ink);max-width:520px;">${t('home.subtitle')}</p>
        <a href="#/odak" class="btn btn-primary">${t('home.quickStart')} →</a>
      </section>

      <div class="grid grid-2">
        <div class="card">
          <h2>${t('home.todayTasks')}</h2>
          <div id="homeTasks"></div>
        </div>
        <div class="card" style="background:linear-gradient(135deg,var(--mint) 0%,var(--cream) 100%);">
          <h3>💬 ${t('home.coachWhisper')}</h3>
          <p style="color:var(--ink);font-size:16px;">${whisper}</p>
          <a href="#/koc" class="btn btn-sm">${t('nav.coach')} →</a>
        </div>
      </div>

      <div class="card" style="margin-top:16px;">
        <h2>${t('home.activeGoals')}</h2>
        <div id="homeGoals"></div>
      </div>
    `;

    // Render tasks
    const tasksWrap = el.querySelector('#homeTasks');
    if (todayTasks.length === 0) {
      tasksWrap.innerHTML = `<div class="empty"><div class="empty-emoji">🌱</div>${t('home.noTasks')}</div>`;
    } else {
      todayTasks.forEach((task) => tasksWrap.appendChild(renderTask(task)));
    }

    // Render goals
    const gWrap = el.querySelector('#homeGoals');
    const activeGoals = goals.filter((g) => !g.archived);
    if (activeGoals.length === 0) {
      gWrap.innerHTML = `<div class="empty">${t('goals.empty')}</div>`;
    } else {
      activeGoals.slice(0, 3).forEach((g) => gWrap.appendChild(renderGoalCard(g)));
    }

    return el;
  };

  function renderTask(task) {
    const div = document.createElement('div');
    div.className = 'task' + (task.done ? ' done' : '');
    div.innerHTML = `
      <input type="checkbox" ${task.done ? 'checked' : ''} aria-label="toggle">
      <span class="task-text"></span>
      ${task.goalTitle ? `<span class="task-badge"></span>` : ''}
    `;
    div.querySelector('.task-text').textContent = task.text;
    if (task.goalTitle) div.querySelector('.task-badge').textContent = task.goalTitle;
    div.querySelector('input').addEventListener('change', (e) => {
      toggleTask(task.id, e.target.checked);
    });
    return div;
  }

  function renderGoalCard(g) {
    const div = document.createElement('div');
    div.className = 'goal-card';
    const tasks = db.get('tasks').filter((t) => t.goalId === g.id);
    const done = tasks.filter((t) => t.done).length;
    const pct = tasks.length ? Math.round((done / tasks.length) * 100) : 0;
    div.innerHTML = `
      <h3></h3>
      <div class="goal-progress"><div class="goal-progress-bar" style="width:${pct}%"></div></div>
      <small style="color:var(--ink-soft);font-weight:600;">${done}/${tasks.length} — ${pct}%</small>
    `;
    div.querySelector('h3').textContent = g.title;
    return div;
  }

  function toggleTask(id, done) {
    db.update('tasks', (tasks) => {
      return tasks.map((x) => {
        if (x.id !== id) return x;
        return { ...x, done, doneDate: done ? todayKey() : null };
      });
    });
    const remaining = db.get('tasks').filter((x) => !x.done).length;
    if (done && remaining === 0) toast(t('toast.allDone'));
    render();
  }

  // GOALS
  views['/hedefler'] = function () {
    const goals = db.get('goals');
    const el = document.createElement('div');
    el.innerHTML = `
      <h1>${t('goals.title')}</h1>
      <p class="lead">${t('goals.lead')}</p>
      <button class="btn btn-primary" id="addGoalBtn">＋ ${t('goals.addBtn')}</button>
      <div id="goalsList" style="margin-top:20px;"></div>
    `;
    const list = el.querySelector('#goalsList');
    if (goals.length === 0) {
      list.innerHTML = `<div class="card empty"><div class="empty-emoji">🎯</div>${t('goals.empty')}</div>`;
    } else {
      goals.forEach((g) => list.appendChild(renderGoalDetail(g)));
    }
    el.querySelector('#addGoalBtn').addEventListener('click', openGoalModal);
    return el;
  };

  function renderGoalDetail(g) {
    const card = document.createElement('div');
    card.className = 'card';
    const tasks = db.get('tasks').filter((x) => x.goalId === g.id);
    const done = tasks.filter((x) => x.done).length;
    const pct = tasks.length ? Math.round((done / tasks.length) * 100) : 0;
    card.innerHTML = `
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;">
        <div style="flex:1;min-width:200px;">
          <h2></h2>
          <div class="goal-progress"><div class="goal-progress-bar" style="width:${pct}%"></div></div>
          <small style="color:var(--ink-soft);font-weight:600;">${done}/${tasks.length} — ${pct}%</small>
        </div>
        <button class="btn btn-sm btn-ghost" data-del>${t('goals.delete')}</button>
      </div>
      <h3 style="margin-top:16px;">${t('goals.subtasks')}</h3>
      <div data-tasks></div>
    `;
    card.querySelector('h2').textContent = g.title;
    const wrap = card.querySelector('[data-tasks]');
    tasks.forEach((task) => wrap.appendChild(renderTask(task)));
    card.querySelector('[data-del]').addEventListener('click', () => {
      if (confirm(t('goals.deleteConfirm'))) {
        db.set('goals', db.get('goals').filter((x) => x.id !== g.id));
        db.set('tasks', db.get('tasks').filter((x) => x.goalId !== g.id));
        toast(t('toast.deleted'));
        render();
      }
    });
    return card;
  }

  function openGoalModal() {
    const back = document.createElement('div');
    back.className = 'modal-backdrop';
    back.innerHTML = `
      <div class="modal" role="dialog" aria-modal="true">
        <h2>${t('goals.modalTitle')}</h2>
        <p>${t('goals.modalDesc')}</p>
        <label for="goalInput">${t('goals.title')}</label>
        <input id="goalInput" type="text" placeholder="${t('goals.placeholder')}" autofocus />
        <div class="modal-actions">
          <button class="btn btn-ghost" data-cancel>${t('goals.cancel')}</button>
          <button class="btn btn-primary" data-save>${t('goals.create')}</button>
        </div>
      </div>
    `;
    document.body.appendChild(back);
    const close = () => back.remove();
    back.addEventListener('click', (e) => { if (e.target === back) close(); });
    back.querySelector('[data-cancel]').addEventListener('click', close);
    document.addEventListener('keydown', function esc(e) {
      if (e.key === 'Escape') { close(); document.removeEventListener('keydown', esc); }
    });
    const input = back.querySelector('#goalInput');
    input.focus();
    back.querySelector('[data-save]').addEventListener('click', () => {
      const title = input.value.trim();
      if (!title) return;
      const id = db.uid();
      const steps = coach.breakDownGoal(title, i18n.lang);
      const goal = { id, title, createdAt: Date.now(), archived: false };
      db.set('goals', [goal, ...db.get('goals')]);
      const newTasks = steps.map((s, i) => ({
        id: db.uid(),
        text: s,
        goalId: id,
        goalTitle: title,
        done: false,
        order: i,
        createdAt: Date.now(),
      }));
      db.set('tasks', [...newTasks, ...db.get('tasks')]);
      toast(t('toast.added'));
      close();
      render();
    });
    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') back.querySelector('[data-save]').click(); });
  }

  // FOCUS
  const timer = {
    mode: 'focus', // 'focus' | 'break'
    running: false,
    startAt: null,
    remaining: 0, // ms
    pausedRemaining: null,
    taskId: null,
    interval: null,
  };

  views['/odak'] = function () {
    const settings = db.get('settings');
    const focusMin = settings.pomodoro.focus;
    const breakMin = settings.pomodoro.break;
    const tasks = db.get('tasks').filter((x) => !x.done);

    const el = document.createElement('div');
    el.innerHTML = `
      <h1>${t('focus.title')}</h1>
      <p class="lead">${t('focus.lead')}</p>

      <div class="card">
        <div class="timer-label" id="timerLabel"></div>
        <div class="timer-ring" id="timerRing">
          <div class="timer-ring-inner">
            <div class="timer-display" id="timerDisplay">25:00</div>
            <div style="color:var(--ink-soft);font-weight:600;font-size:13px;" id="timerTask">${t('focus.noTask')}</div>
          </div>
        </div>

        <div style="margin-top:20px;">
          <label for="taskSelect">${t('focus.selectTask')}</label>
          <select id="taskSelect">
            <option value="">— ${t('focus.noTask')} —</option>
            ${tasks.map((tk) => `<option value="${tk.id}">${escape(tk.text)}</option>`).join('')}
          </select>
        </div>

        <div class="timer-controls">
          <button class="btn btn-primary" id="btnStart">${t('focus.start')}</button>
          <button class="btn btn-ghost" id="btnPause" style="display:none;">${t('focus.pause')}</button>
          <button class="btn btn-ghost" id="btnReset">${t('focus.reset')}</button>
        </div>
      </div>

      <div class="card">
        <h3>${t('focus.settings')}</h3>
        <div class="grid grid-2">
          <div>
            <label>${t('focus.focusMin')}</label>
            <input type="number" id="focusMin" min="5" max="120" value="${focusMin}">
          </div>
          <div>
            <label>${t('focus.breakMin')}</label>
            <input type="number" id="breakMin" min="1" max="60" value="${breakMin}">
          </div>
        </div>
      </div>

      <div class="card">
        <h3>${t('focus.logTitle')}</h3>
        <div id="sessionLog"></div>
      </div>
    `;

    // Setup handlers
    const display = el.querySelector('#timerDisplay');
    const ring = el.querySelector('#timerRing');
    const label = el.querySelector('#timerLabel');
    const taskLabel = el.querySelector('#timerTask');
    const btnStart = el.querySelector('#btnStart');
    const btnPause = el.querySelector('#btnPause');
    const btnReset = el.querySelector('#btnReset');
    const taskSelect = el.querySelector('#taskSelect');

    const initMs = (timer.mode === 'focus' ? focusMin : breakMin) * 60 * 1000;

    function updateUI() {
      let ms;
      if (timer.running) ms = Math.max(0, timer.remaining - (Date.now() - timer.startAt));
      else if (timer.pausedRemaining != null) ms = timer.pausedRemaining;
      else ms = initMs;
      const total = initMs;
      const pct = Math.min(100, ((total - ms) / total) * 100);
      ring.style.setProperty('--progress', pct.toFixed(1));
      const s = Math.ceil(ms / 1000);
      const mm = String(Math.floor(s / 60)).padStart(2, '0');
      const ss = String(s % 60).padStart(2, '0');
      display.textContent = `${mm}:${ss}`;
      label.textContent = timer.mode === 'focus' ? t('focus.focusLabel') : t('focus.breakLabel');
      const task = db.get('tasks').find((x) => x.id === timer.taskId);
      taskLabel.textContent = task ? task.text : t('focus.noTask');

      if (timer.running && ms <= 0) {
        finishSession();
      }
    }

    function start() {
      const dur = (timer.mode === 'focus' ? (+el.querySelector('#focusMin').value || focusMin) : (+el.querySelector('#breakMin').value || breakMin)) * 60 * 1000;
      timer.remaining = timer.pausedRemaining != null ? timer.pausedRemaining : dur;
      timer.startAt = Date.now();
      timer.pausedRemaining = null;
      timer.running = true;
      timer.taskId = taskSelect.value || null;
      btnStart.style.display = 'none';
      btnPause.style.display = 'inline-flex';
      timer.interval = setInterval(updateUI, 250);
      updateUI();
    }
    function pause() {
      if (!timer.running) return;
      timer.pausedRemaining = Math.max(0, timer.remaining - (Date.now() - timer.startAt));
      timer.running = false;
      clearInterval(timer.interval);
      btnStart.textContent = t('focus.resume');
      btnStart.style.display = 'inline-flex';
      btnPause.style.display = 'none';
      updateUI();
    }
    function reset() {
      timer.running = false;
      timer.pausedRemaining = null;
      timer.remaining = 0;
      clearInterval(timer.interval);
      btnStart.textContent = t('focus.start');
      btnStart.style.display = 'inline-flex';
      btnPause.style.display = 'none';
      updateUI();
    }
    function finishSession() {
      clearInterval(timer.interval);
      timer.running = false;
      if (timer.mode === 'focus') {
        const minutes = (+el.querySelector('#focusMin').value || focusMin);
        const session = {
          id: db.uid(),
          taskId: timer.taskId,
          minutes,
          date: todayKey(),
          at: Date.now(),
        };
        db.set('sessions', [session, ...db.get('sessions')]);
        toast(t('focus.done'));
        timer.mode = 'break';
      } else {
        toast(t('focus.breakDone'));
        timer.mode = 'focus';
      }
      timer.pausedRemaining = null;
      timer.remaining = 0;
      btnStart.textContent = t('focus.start');
      btnStart.style.display = 'inline-flex';
      btnPause.style.display = 'none';
      renderLog();
      updateUI();
    }

    btnStart.addEventListener('click', start);
    btnPause.addEventListener('click', pause);
    btnReset.addEventListener('click', reset);

    el.querySelector('#focusMin').addEventListener('change', (e) => {
      const s = db.get('settings');
      s.pomodoro.focus = Math.max(1, +e.target.value || 25);
      db.set('settings', s);
      if (!timer.running) updateUI();
    });
    el.querySelector('#breakMin').addEventListener('change', (e) => {
      const s = db.get('settings');
      s.pomodoro.break = Math.max(1, +e.target.value || 5);
      db.set('settings', s);
    });

    function renderLog() {
      const wrap = el.querySelector('#sessionLog');
      const today = todayKey();
      const todays = db.get('sessions').filter((s) => s.date === today);
      if (todays.length === 0) {
        wrap.innerHTML = `<div class="empty">${t('focus.logEmpty')}</div>`;
        return;
      }
      wrap.innerHTML = todays.map((s) => {
        const task = db.get('tasks').find((x) => x.id === s.taskId);
        const ts = new Date(s.at).toLocaleTimeString(i18n.lang === 'en' ? 'en' : 'tr', { hour: '2-digit', minute: '2-digit' });
        return `<div class="task"><span class="task-text">${escape(task ? task.text : '—')}</span><span class="task-badge">${s.minutes} dk · ${ts}</span></div>`;
      }).join('');
    }

    renderLog();
    updateUI();
    return el;
  };

  // CHECK-IN
  views['/checkin'] = function () {
    const checkins = db.get('checkins');
    const today = todayKey();
    const todayMorning = checkins.find((c) => c.date === today && c.type === 'morning');
    const todayEvening = checkins.find((c) => c.date === today && c.type === 'evening');

    const el = document.createElement('div');
    el.innerHTML = `
      <h1>${t('checkin.title')}</h1>
      <p class="lead">${t('checkin.lead')}</p>
      <div class="grid grid-2">
        <div class="card" id="morningCard">
          <h2>🌅 ${t('checkin.morning')}</h2>
          <label>${t('checkin.energy')}</label>
          <div class="mood-row" data-group="energy">
            <button class="mood-btn" data-v="1">😴 ${t('checkin.low')}</button>
            <button class="mood-btn" data-v="2">🙂 ${t('checkin.mid')}</button>
            <button class="mood-btn" data-v="3">⚡ ${t('checkin.high')}</button>
          </div>
          <label style="margin-top:12px;">${t('checkin.intent')}</label>
          <textarea id="intentInput" placeholder="${t('checkin.intentPh')}"></textarea>
          <button class="btn btn-primary btn-block" id="saveMorning" style="margin-top:12px;">${t('checkin.save')}</button>
        </div>
        <div class="card" id="eveningCard">
          <h2>🌙 ${t('checkin.evening')}</h2>
          <label>${t('checkin.wins')}</label>
          <textarea id="winsInput" placeholder="${t('checkin.winsPh')}"></textarea>
          <label style="margin-top:12px;">${t('checkin.blocks')}</label>
          <textarea id="blocksInput" placeholder="${t('checkin.blocksPh')}"></textarea>
          <button class="btn btn-primary btn-block" id="saveEvening" style="margin-top:12px;">${t('checkin.save')}</button>
        </div>
      </div>
      <div class="card">
        <h3>${t('checkin.recent')}</h3>
        <div id="recentCheckins"></div>
      </div>
    `;

    let energy = todayMorning?.energy || null;
    const moodBtns = el.querySelectorAll('.mood-btn');
    moodBtns.forEach((btn) => {
      if (+btn.dataset.v === energy) btn.classList.add('selected');
      btn.addEventListener('click', () => {
        moodBtns.forEach((b) => b.classList.remove('selected'));
        btn.classList.add('selected');
        energy = +btn.dataset.v;
      });
    });

    if (todayMorning) el.querySelector('#intentInput').value = todayMorning.intent || '';
    if (todayEvening) {
      el.querySelector('#winsInput').value = todayEvening.wins || '';
      el.querySelector('#blocksInput').value = todayEvening.blocks || '';
    }

    el.querySelector('#saveMorning').addEventListener('click', () => {
      const intent = el.querySelector('#intentInput').value.trim();
      const entry = { id: db.uid(), date: today, type: 'morning', energy, intent, at: Date.now() };
      const filtered = db.get('checkins').filter((c) => !(c.date === today && c.type === 'morning'));
      db.set('checkins', [entry, ...filtered]);
      toast(t('checkin.saved'));
      render();
    });
    el.querySelector('#saveEvening').addEventListener('click', () => {
      const wins = el.querySelector('#winsInput').value.trim();
      const blocks = el.querySelector('#blocksInput').value.trim();
      const entry = { id: db.uid(), date: today, type: 'evening', wins, blocks, at: Date.now() };
      const filtered = db.get('checkins').filter((c) => !(c.date === today && c.type === 'evening'));
      db.set('checkins', [entry, ...filtered]);
      toast(t('checkin.saved'));
      render();
    });

    const recent = el.querySelector('#recentCheckins');
    const list = db.get('checkins').slice(0, 6);
    if (list.length === 0) {
      recent.innerHTML = `<div class="empty">—</div>`;
    } else {
      recent.innerHTML = list.map((c) => {
        const icon = c.type === 'morning' ? '🌅' : '🌙';
        const body = c.type === 'morning'
          ? `<strong>${escape(c.intent || '—')}</strong> <small style="color:var(--muted)">· enerji ${c.energy || '—'}/3</small>`
          : `<strong>${escape(c.wins || '—')}</strong>${c.blocks ? ` <small style="color:var(--muted)">· ${escape(c.blocks)}</small>` : ''}`;
        return `<div class="task"><span>${icon}</span><span class="task-text">${body}</span><span class="task-badge">${c.date}</span></div>`;
      }).join('');
    }
    return el;
  };

  // COACH CHAT
  views['/koc'] = function () {
    const el = document.createElement('div');
    el.innerHTML = `
      <h1>${t('coach.title')}</h1>
      <p class="lead">${t('coach.lead')}</p>
      <div class="card">
        <div class="chat-window" id="chatWin"></div>
        <div class="chat-input">
          <input type="text" id="chatInput" placeholder="${t('coach.placeholder')}" aria-label="message">
          <button class="btn btn-primary" id="chatSend">${t('coach.send')}</button>
        </div>
        <div style="margin-top:10px;text-align:right;">
          <button class="btn btn-sm btn-ghost" id="chatClear">${t('coach.clear')}</button>
        </div>
      </div>
    `;
    const win = el.querySelector('#chatWin');
    const input = el.querySelector('#chatInput');

    let history = db.get('chatHistory');
    if (history.length === 0) {
      history = [{ role: 'coach', text: t('coach.welcome'), at: Date.now() }];
      db.set('chatHistory', history);
    }

    function drawHistory() {
      win.innerHTML = '';
      history.forEach((m) => {
        const div = document.createElement('div');
        div.className = `msg ${m.role}`;
        div.textContent = m.text;
        win.appendChild(div);
      });
      win.scrollTop = win.scrollHeight;
    }
    drawHistory();

    function send() {
      const text = input.value.trim();
      if (!text) return;
      history.push({ role: 'user', text, at: Date.now() });
      db.set('chatHistory', history);
      input.value = '';
      drawHistory();
      setTimeout(() => {
        const reply = coach.chatReply(text, i18n.lang);
        history.push({ role: 'coach', text: reply, at: Date.now() });
        db.set('chatHistory', history);
        drawHistory();
      }, 500 + Math.random() * 400);
    }
    el.querySelector('#chatSend').addEventListener('click', send);
    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') send(); });
    el.querySelector('#chatClear').addEventListener('click', () => {
      history = [{ role: 'coach', text: t('coach.welcome'), at: Date.now() }];
      db.set('chatHistory', history);
      drawHistory();
    });

    setTimeout(() => input.focus(), 100);
    return el;
  };

  // STATS
  views['/istatistik'] = function () {
    const sessions = db.get('sessions');
    const tasks = db.get('tasks');
    const totalDone = tasks.filter((x) => x.done).length;
    const totalMin = sessions.reduce((a, s) => a + s.minutes, 0);
    const streak = computeStreak();

    const el = document.createElement('div');
    el.innerHTML = `
      <h1>${t('stats.title')}</h1>
      <p class="lead">${t('stats.lead')}</p>

      <div class="grid grid-3">
        <div class="card" style="text-align:center;">
          <div class="stat-number">${totalDone}</div>
          <div class="stat-label">${t('stats.tasksDone')}</div>
        </div>
        <div class="card" style="text-align:center;">
          <div class="stat-number">${totalMin}</div>
          <div class="stat-label">${t('stats.focusMin')}</div>
        </div>
        <div class="card" style="text-align:center;">
          <div class="stat-number">🔥 ${streak}</div>
          <div class="stat-label">${t('stats.streak')}</div>
        </div>
      </div>

      <div class="grid grid-2" style="margin-top:16px;">
        <div class="card">
          <h3>${t('stats.chartTasks')}</h3>
          <canvas id="tasksChart" height="180"></canvas>
        </div>
        <div class="card">
          <h3>${t('stats.chartFocus')}</h3>
          <canvas id="focusChart" height="180"></canvas>
        </div>
      </div>

      <div class="card">
        <h3>${t('stats.heatmap')}</h3>
        <div id="heatmap" class="heatmap"></div>
      </div>
    `;

    setTimeout(() => drawCharts(el), 0);
    return el;
  };

  function drawCharts(el) {
    const days = [];
    for (let i = 6; i >= 0; i--) {
      const d = new Date(); d.setDate(d.getDate() - i);
      days.push(d.toISOString().slice(0, 10));
    }
    const tasks = db.get('tasks');
    const sessions = db.get('sessions');
    const taskCounts = days.map((d) => tasks.filter((x) => x.done && x.doneDate === d).length);
    const focusMin = days.map((d) => sessions.filter((s) => s.date === d).reduce((a, s) => a + s.minutes, 0));
    const labels = days.map((d) => d.slice(5));

    const ctx1 = el.querySelector('#tasksChart');
    const ctx2 = el.querySelector('#focusChart');

    if (window.Chart) {
      new Chart(ctx1, {
        type: 'bar',
        data: { labels, datasets: [{ data: taskCounts, backgroundColor: '#B299F0', borderRadius: 8 }] },
        options: chartOpts(),
      });
      new Chart(ctx2, {
        type: 'line',
        data: { labels, datasets: [{ data: focusMin, borderColor: '#7DD3AE', backgroundColor: 'rgba(125,211,174,0.2)', fill: true, tension: 0.3, pointRadius: 4 }] },
        options: chartOpts(),
      });
    }

    // Heatmap — last 56 days grid
    const hm = el.querySelector('#heatmap');
    const cells = [];
    for (let i = 55; i >= 0; i--) {
      const d = new Date(); d.setDate(d.getDate() - i);
      const key = d.toISOString().slice(0, 10);
      const count = tasks.filter((x) => x.done && x.doneDate === key).length + sessions.filter((s) => s.date === key).length;
      const lv = count === 0 ? 0 : count < 2 ? 1 : count < 4 ? 2 : count < 6 ? 3 : 4;
      cells.push(`<div class="heatmap-cell lv${lv}" title="${key}: ${count}"></div>`);
    }
    hm.innerHTML = cells.join('');
  }

  function chartOpts() {
    return {
      plugins: { legend: { display: false } },
      scales: {
        x: { grid: { display: false }, ticks: { color: '#5A5F72' } },
        y: { beginAtZero: true, ticks: { stepSize: 1, color: '#5A5F72' }, grid: { color: '#F1E6D8' } },
      },
      responsive: true,
      maintainAspectRatio: false,
    };
  }

  function escape(s) {
    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  }

  // --- Router ---
  function route() {
    let path = location.hash.replace(/^#/, '') || '/';
    if (!views[path]) path = '/';
    return path;
  }

  function render() {
    const path = route();
    const app = $('#app');
    app.innerHTML = '';
    app.appendChild(views[path]());
    // active nav
    $$('.nav a').forEach((a) => {
      a.classList.toggle('active', a.getAttribute('data-route') === path);
    });
    i18n.apply();
  }

  function init() {
    i18n.init();
    i18n.apply();
    window.addEventListener('hashchange', render);
    $('#langToggle').addEventListener('click', () => i18n.toggle());
    render();
  }

  window.app = { render };
  document.addEventListener('DOMContentLoaded', init);
})();