{% extends "base.html" %}
{% block title %}Today – Nutrition Tracker{% endblock %}
{% block content %}
<div style="display:flex;align-items:baseline;gap:0.75rem;margin-bottom:1rem;">
  <h1>Today</h1>
  <span style="color:var(--text-dim);font-size:1rem;">{{ today_date }}</span>
</div>

<div class="card">
  <h2>📊 Nutrition Summary</h2>
  {% if intake | length > 0 %}
  <div class="stats-grid" id="stats-grid">
    {% for p in intake %}
    <div class="stat-card">
      <div class="stat-value">{{ p.value.amount | fmt_num }}{% if p.value.unit %} {{ p.value.unit }}{% endif %}</div>
      <div class="stat-label">{{ p.name }}</div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="empty-state" id="stats-empty">No food logged yet today.</p>
  {% endif %}
  <div id="stats-grid-dynamic" style="display:none;"></div>
</div>

<div class="card">
  <h2>🍽 Log Food</h2>
  <form id="log-food-form">
    <div class="form-row">
      <div style="flex:2;min-width:160px;">
        <label for="food-alias">Food / Recipe name</label>
        <input type="text" id="food-alias" placeholder="e.g. chickpeas" autocomplete="off" required>
      </div>
      <div style="flex:1;min-width:110px;">
        <label for="food-qty">Quantity</label>
        <input type="text" id="food-qty" placeholder="e.g. 200g" required>
      </div>
      <div style="display:flex;align-items:flex-end;">
        <button type="submit">Log</button>
      </div>
    </div>
    <div id="food-msg"></div>
  </form>
</div>

<div class="card">
  <h2>🏃 Log Exercise</h2>
  <form id="log-exercise-form">
    <div class="form-row">
      <div style="flex:2;min-width:160px;">
        <label for="exercise-alias">Exercise name</label>
        <input type="text" id="exercise-alias" placeholder="e.g. running" autocomplete="off" required>
      </div>
      <div style="flex:1;min-width:110px;">
        <label for="exercise-qty">Duration / Quantity</label>
        <input type="text" id="exercise-qty" placeholder="e.g. 30 min" required>
      </div>
      <div style="display:flex;align-items:flex-end;">
        <button type="submit">Log</button>
      </div>
    </div>
    <div id="exercise-msg"></div>
  </form>
</div>

<div class="card">
  <h2>📋 Today's Log</h2>
  <div id="today-log">
    {% if items | length > 0 %}
    <ul class="log-list">
      {% for item in items %}
        {% if item.type == "meal" %}
        <li class="log-item" style="padding:0.3rem 0;">
          <span class="badge badge-meal">{{ item.label }}</span>
        </li>
        {% elif item.type == "ate" %}
        <li class="log-item">
          <span class="badge badge-ate">ate</span>
          <span class="alias">{{ item.alias }}</span>
          <span class="qty">{{ item.quantity.amount | fmt_num }}{% if item.quantity.unit %} {{ item.quantity.unit }}{% endif %}</span>
        </li>
        {% elif item.type == "exercised" %}
        <li class="log-item">
          <span class="badge badge-exercised">exercised</span>
          <span class="alias">{{ item.alias }}</span>
          <span class="qty">{{ item.quantity.amount | fmt_num }}{% if item.quantity.unit %} {{ item.quantity.unit }}{% endif %}</span>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    {% else %}
    <p class="empty-state">Nothing logged yet.</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const todayDate = '{{ today_date }}';

function showMsg(id, msg, isError) {
  const el = document.getElementById(id);
  el.innerHTML = `<div class="alert ${isError ? 'alert-error' : 'alert-success'}">${msg}</div>`;
  setTimeout(() => el.innerHTML = '', 3000);
}

async function refreshDay() {
  const res = await fetch(`/api/days/${todayDate}`);
  const data = await res.json();

  const priority = ['calories','protein','fat','carbohydrates','carbs','fiber','sugar'];
  const intake = data.report && data.report.intake ? data.report.intake : [];
  const sorted = [...intake].sort((a,b) => {
    const ai = priority.indexOf(a.name), bi = priority.indexOf(b.name);
    if (ai>=0 && bi>=0) return ai-bi;
    if (ai>=0) return -1; if (bi>=0) return 1;
    return a.name.localeCompare(b.name);
  });

  // Replace static SSR stats with fresh data
  const existing = document.getElementById('stats-grid');
  const dynamic  = document.getElementById('stats-grid-dynamic');
  const empty    = document.getElementById('stats-empty');
  if (sorted.length > 0) {
    const html = `<div class="stats-grid">${sorted.map(p =>
      `<div class="stat-card"><div class="stat-value">${fmt(p.value.amount, p.value.unit)}</div><div class="stat-label">${p.name}</div></div>`
    ).join('')}</div>`;
    if (existing) existing.outerHTML = html;
    else { dynamic.innerHTML = html; dynamic.style.display = ''; }
    if (empty) empty.style.display = 'none';
  }

  const logEl = document.getElementById('today-log');
  const items = data.items || [];
  if (items.length === 0) {
    logEl.innerHTML = '<p class="empty-state">Nothing logged yet.</p>';
  } else {
    logEl.innerHTML = `<ul class="log-list">${items.map(item => {
      if (item.type === 'ate')
        return `<li class="log-item"><span class="badge badge-ate">ate</span><span class="alias">${item.alias}</span><span class="qty">${fmt(item.quantity.amount, item.quantity.unit)}</span></li>`;
      if (item.type === 'exercised')
        return `<li class="log-item"><span class="badge badge-exercised">exercised</span><span class="alias">${item.alias}</span><span class="qty">${fmt(item.quantity.amount, item.quantity.unit)}</span></li>`;
      return `<li class="log-item" style="padding:0.3rem 0;"><span class="badge badge-meal">${item.label}</span></li>`;
    }).join('')}</ul>`;
  }
}

document.getElementById('log-food-form').addEventListener('submit', async e => {
  e.preventDefault();
  const alias = document.getElementById('food-alias').value.trim();
  const qty   = document.getElementById('food-qty').value.trim();
  const res = await fetch(`/api/days/${todayDate}/ate`, {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ alias, quantity: qty })
  });
  if (res.ok) {
    showMsg('food-msg', `Logged ${alias} (${qty})`, false);
    document.getElementById('food-alias').value = '';
    document.getElementById('food-qty').value = '';
    await refreshDay();
  } else {
    const err = await res.json();
    showMsg('food-msg', err.error || 'Error logging food', true);
  }
});

document.getElementById('log-exercise-form').addEventListener('submit', async e => {
  e.preventDefault();
  const alias = document.getElementById('exercise-alias').value.trim();
  const qty   = document.getElementById('exercise-qty').value.trim();
  const res = await fetch(`/api/days/${todayDate}/exercised`, {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ alias, quantity: qty })
  });
  if (res.ok) {
    showMsg('exercise-msg', `Logged ${alias} (${qty})`, false);
    document.getElementById('exercise-alias').value = '';
    document.getElementById('exercise-qty').value = '';
    await refreshDay();
  } else {
    const err = await res.json();
    showMsg('exercise-msg', err.error || 'Error logging exercise', true);
  }
});
</script>
{% endblock %}