{# Date Nav - renders below facet bar when app has date_nav enabled #}
{# Both day and app are auto-extracted from URL by context processor #}
{% if day %}
<div class="date-nav">
  <div class="date-nav-left">
    <button class="date-nav-arrow" id="date-nav-prev" title="previous (←)">‹</button>
  </div>
  <button class="date-nav-label" id="date-nav-label" title="open month picker" aria-label="open month picker">{{ day|format_date_short }}</button>
  <div class="date-nav-right">
    <button class="date-nav-today" id="date-nav-today" title="jump to today (t)" aria-label="go to today">T</button>
    <button class="date-nav-arrow" id="date-nav-next" title="next (→)">›</button>
  </div>
  <div class="month-picker"></div>
</div>

<script src="{{ url_for('root.static', filename='month-picker.js') }}"></script>
<script>
(function() {
  const currentDay = '{{ day }}';
  const app = '{{ app }}';
  const baseUrl = `/app/${app}/`;

  function adjustDay(day, delta) {
    const year = parseInt(day.substring(0, 4));
    const month = parseInt(day.substring(4, 6)) - 1;
    const dayNum = parseInt(day.substring(6, 8));
    const date = new Date(year, month, dayNum);
    date.setDate(date.getDate() + delta);
    return date.getFullYear() +
      String(date.getMonth() + 1).padStart(2, '0') +
      String(date.getDate()).padStart(2, '0');
  }

  function navigate(day) {
    window.location.href = `${baseUrl}${day}`;
  }

  // Auto-register provider for current app using convention:
  // Apps with date_nav:true must provide /app/{app}/api/stats/{month}
  // Response format is auto-detected:
  //   - Facet-aware: {day: {facet: count}} - filtered by selected facet
  //   - Simple: {day: count} - returned as-is
  MonthPicker.registerDataProvider(app, async (month, facet) => {
    try {
      const raw = await window.apiJson(`${baseUrl}api/stats/${month}`);

      // Auto-detect format: if first value is an object, it's facet-aware
      const values = Object.values(raw);
      if (values.length > 0 && typeof values[0] === 'object' && values[0] !== null) {
        // Facet-aware: {day: {facet: count}}
        const result = {};
        for (const [day, facetCounts] of Object.entries(raw)) {
          result[day] = facet
            ? (facetCounts[facet] || 0)
            : Object.values(facetCounts).reduce((a, b) => a + b, 0);
        }
        return { data: result, error: null };
      }
      return { data: raw, error: null };
    } catch (err) {
      return { data: null, error: err };
    }
  });

  // Initialize month picker
  MonthPicker.init({
    app: app,
    currentDay: currentDay,
    container: '.month-picker',
    allowFutureDates: {{ app_registry.apps[app].allow_future_dates|tojson }}
  });

  // Toggle today button emphasis based on current day
  const todayBtn = document.getElementById('date-nav-today');
  if (currentDay !== MonthPicker.getToday()) {
    todayBtn.classList.add('is-other-day');
  }

  // Click label to toggle month picker
  document.getElementById('date-nav-label').addEventListener('click', () => {
    MonthPicker.toggle();
  });

  // Arrow buttons: day nav when closed, month nav when open
  document.getElementById('date-nav-prev').addEventListener('click', () => {
    if (MonthPicker.isOpen()) {
      MonthPicker.navigateMonth(-1);
    } else {
      navigate(adjustDay(currentDay, -1));
    }
  });

  document.getElementById('date-nav-next').addEventListener('click', () => {
    if (MonthPicker.isOpen()) {
      MonthPicker.navigateMonth(1);
    } else {
      navigate(adjustDay(currentDay, 1));
    }
  });

  // Today button
  document.getElementById('date-nav-today').addEventListener('click', () => {
    navigate(MonthPicker.getToday());
  });

  // Keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    if (e.target.matches('input, textarea, select')) return;

    if (e.key === 'ArrowLeft') {
      e.preventDefault();
      if (MonthPicker.isOpen()) {
        MonthPicker.navigateMonth(-1);
      } else {
        navigate(adjustDay(currentDay, -1));
      }
    }
    if (e.key === 'ArrowRight') {
      e.preventDefault();
      if (MonthPicker.isOpen()) {
        MonthPicker.navigateMonth(1);
      } else {
        navigate(adjustDay(currentDay, 1));
      }
    }
    if (e.key === 't' || e.key === 'T') {
      e.preventDefault();
      navigate(MonthPicker.getToday());
    }
  });
})();
</script>
{% endif %}