{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<h1>Dashboard</h1>

<div class="grid">
  <article>
    <header>Display Status</header>
    <div id="display-status">
      <p><strong>Simulation:</strong> <span id="status-simulate">—</span></p>
      <p><strong>Resolution:</strong> <span id="status-resolution">—</span></p>
      <p><strong>Last image:</strong> <span id="status-image">—</span></p>
      <p><strong>Shown at:</strong> <span id="status-timestamp">—</span></p>
      <p><strong>Pending action:</strong> <span id="status-trigger">—</span></p>
    </div>
  </article>

  <article>
    <header>Quick Actions</header>
    <button
      hx-post="/api/display/refresh"
      hx-target="#action-result"
      hx-swap="innerHTML"
    >
      Refresh from Unsplash
    </button>
    <button
      class="secondary"
      hx-post="/api/display/clear"
      hx-target="#action-result"
      hx-swap="innerHTML"
    >
      Clear Display
    </button>
    <div id="action-result"></div>
  </article>
</div>

<div class="grid">
  <article>
    <header>Schedule</header>
    <p><strong>Interval:</strong> <span id="schedule-interval">—</span></p>
    <p><strong>Random delay:</strong> <span id="schedule-delay">—</span></p>
    <p><small><a href="/settings">Edit in Settings</a></small></p>
  </article>

  <article>
    <header>Image Library</header>
    <p><strong>Total images:</strong> <span id="lib-count">—</span></p>
    <p><strong>In rotation:</strong> <span id="rotation-count">—</span></p>
    <p><small><a href="/gallery">Open Gallery</a> · <a href="/upload">Upload</a></small></p>
  </article>
</div>

<script>
  async function refreshStatus() {
    try {
      const resp = await fetch('/api/display/status');
      const data = await resp.json();
      document.getElementById('status-simulate').textContent = data.simulate ? 'Yes' : 'No';
      document.getElementById('status-resolution').textContent = data.resolution.width + '×' + data.resolution.height;
      document.getElementById('status-trigger').textContent = data.pending_trigger
        ? (data.pending_trigger.action || 'Unknown')
        : 'None';
      if (data.last_shown && data.last_shown.image) {
        document.getElementById('status-image').textContent = data.last_shown.image.title || data.last_shown.image.filename;
        document.getElementById('status-timestamp').textContent = data.last_shown.timestamp || '—';
      }
    } catch { /* will retry */ }
  }

  async function refreshSchedule() {
    try {
      const resp = await fetch('/api/config/schedule');
      const data = await resp.json();
      document.getElementById('schedule-interval').textContent = data.interval_hours + ' hour(s)';
      document.getElementById('schedule-delay').textContent = data.random_delay_seconds + 's';
    } catch { /* will retry */ }
  }

  async function refreshLibrary() {
    try {
      const resp = await fetch('/api/images');
      const data = await resp.json();
      document.getElementById('lib-count').textContent = data.total;
    } catch { /* will retry */ }
    try {
      const resp = await fetch('/api/rotation');
      const data = await resp.json();
      document.getElementById('rotation-count').textContent = data.entries.length;
    } catch { /* will retry */ }
  }

  refreshStatus();
  refreshSchedule();
  refreshLibrary();
  setInterval(refreshStatus, 10000);
  setInterval(refreshLibrary, 30000);
</script>
{% endblock %}