{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title">Ops</h1>
        <div class="subtitle">Notifications, devices, and audit trail.</div>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a href="{{ url_for('ls_portal_bp.plans') }}">To-Dos{% if state.blocked_count %} <span class="badge-inline">{{ state.blocked_count }}</span>{% endif %}</a>
          {% if approvals_enabled %}
            <a href="{{ url_for('ls_portal_bp.approvals') }}">Approvals{% if state.approvals_pending_count %} <span class="badge-inline">{{ state.approvals_pending_count }}</span>{% endif %}</a>
          {% endif %}
          <a class="is-active" href="{{ url_for('ls_portal_bp.ops') }}">Ops{% if unread_notification_count %} <span class="badge-inline">{{ unread_notification_count }}</span>{% endif %}</a>
          {% if current_account.can_manage_accounts or current_account.is_superuser %}
            <a href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
          {% endif %}
          {% if current_device %}
            <form method="post" action="{{ url_for('ls_portal_bp.device_logout') }}"><button type="submit">Clear this device</button></form>
          {% else %}
            <a href="{{ url_for('ls_portal_bp.pair_device') }}">Pair device</a>
          {% endif %}
        </nav>
      </details>
    </div>
    <div class="stats">
      <div class="stat"><div class="stat-value">{{ state.active_devices }}</div><div class="stat-label">Devices</div></div>
      <div class="stat"><div class="stat-value">{{ state.pending_count }}</div><div class="stat-label">Queued</div></div>
      <div class="stat"><div class="stat-value">{{ state.running_count }}</div><div class="stat-label">Running</div></div>
      <div class="stat"><div class="stat-value">{{ state.completed_count }}</div><div class="stat-label">Done</div></div>
      <div class="stat"><div class="stat-value">{{ state.failed_count }}</div><div class="stat-label">Failed</div></div>
      <div class="stat"><div class="stat-value">{{ state.approvals_pending_count or 0 }}</div><div class="stat-label">Approvals</div></div>
      <div class="stat"><div class="stat-value">{{ state.todo_open }}</div><div class="stat-label">To-do</div></div>
      <div class="stat"><div class="stat-value">{{ state.work_open }}</div><div class="stat-label">Work</div></div>
      <div class="stat"><div class="stat-value">{{ state.project_open }}</div><div class="stat-label">Projects</div></div>
      <div class="stat"><div class="stat-value">{{ state.blocked_count }}</div><div class="stat-label">Blocked</div></div>
      <div class="stat"><div class="stat-value">{{ state.overdue_count }}</div><div class="stat-label">Overdue</div></div>
    </div>
  </header>

  <section class="thread-pane">
    <section class="chat-thread">
  <section class="panel compact-panel">
    <div class="row-actions" style="margin-top:0;">
      <div class="kicker" style="margin:0;">Notifications</div>
      <button class="secondary" type="button" id="enable-notifications">Enable phone notifications</button>
    </div>
    <div class="activity-list">
      {% for row in notifications %}
        <div class="activity-row" data-notification-id="{{ row.id }}">
          <div style="font-weight:700;">{{ row.title }}</div>
          <div class="muted">{{ row.created_at }} · {{ row.notification_type }} · {{ row.priority }}{% if row.status == 'unread' %} · unread{% endif %}</div>
          {% if row.body %}<div style="margin-top:6px; white-space:pre-wrap;">{{ row.body }}</div>{% endif %}
          {% if row.status == 'unread' %}
            <div class="row-actions">
              <form method="post" action="{{ url_for('ls_portal_bp.mark_notification_read', notification_id=row.id) }}">
                <button class="secondary" type="submit">Mark read</button>
              </form>
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </section>

  <section class="panel compact-panel">
    <div class="kicker">Approved devices</div>
    <div class="device-list">
      {% for device in devices %}
        <div class="device-row">
          <div style="font-weight:700;">{{ device.label }}</div>
          <div class="muted">{{ device.account_display_name or device.account_username }} · last seen {{ device.last_seen_at or device.created_at }}{% if device.last_seen_ip %} · {{ device.last_seen_ip }}{% endif %}</div>
          <div class="row-actions">
            <div>
              {% if current_device and device.id == current_device.id %}<span class="badge">This device</span>{% endif %}
              {% if device.revoked_at %}<span class="badge">Revoked</span>{% endif %}
            </div>
            {% if not device.revoked_at and ((current_account.can_manage_devices or current_account.is_superuser) or (current_device and device.id == current_device.id)) %}
              <form method="post" action="{{ url_for('ls_portal_bp.revoke_device', device_id=device.id) }}">
                <button class="secondary" type="submit">Revoke</button>
              </form>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </section>

  <section class="panel compact-panel">
    <div class="kicker">Activity log</div>
    <div class="activity-list">
      {% for row in activity %}
        <div class="activity-row">
          <div style="font-weight:700;">{{ row.activity_type.replace('_', ' ') }}</div>
          <div class="muted">{{ row.created_at }}{% if row.account_display_name %} · {{ row.account_display_name }}{% endif %}{% if row.device_label %} · {{ row.device_label }}{% endif %}</div>
          {% if row.input_text %}<div style="margin-top:6px; white-space:pre-wrap;">{{ row.input_text }}</div>{% endif %}
          {% if row.output_text %}<div style="margin-top:6px; white-space:pre-wrap;">{{ row.output_text }}</div>{% endif %}
        </div>
      {% endfor %}
    </div>
  </section>
    </section>
  </section>
</section>

<script>
  let lastSig = '';
  async function pollFeed() {
    try {
      const response = await fetch('{{ url_for('ls_portal_bp.api_feed') }}?view=ops', {cache: 'no-store'});
      if (!response.ok) return;
      const payload = await response.json();
      const sig = JSON.stringify([
        payload.state,
        (payload.activity || []).map((a) => [a.id, a.created_at]),
        (payload.notifications || []).map((n) => [n.id, n.status, n.created_at]),
        (payload.devices || []).map((d) => [d.id, d.last_seen_at, d.revoked_at]),
      ]);
      const stored = Number(localStorage.getItem('ls_last_notification_id') || '0');
      let latestId = stored;
      (payload.notifications || []).filter((n) => n.status === 'unread').forEach((n) => {
        const nid = Number(n.id || 0);
        if (nid > latestId) latestId = nid;
        if (nid > stored && 'Notification' in window && Notification.permission === 'granted') {
          const note = new Notification(n.title || 'Operator', { body: n.body || '', tag: `ls-${nid}` });
          note.onclick = () => window.focus();
        }
      });
      if (latestId > stored) localStorage.setItem('ls_last_notification_id', String(latestId));
      if (lastSig && sig !== lastSig && !document.hidden) {
        window.location.reload();
        return;
      }
      lastSig = sig;
    } catch (err) {
      console.warn('ls ops poll failed', err);
    }
  }
  pollFeed();
  setInterval(pollFeed, 15000);
  const notifBtn = document.getElementById('enable-notifications');
  if (notifBtn) {
    notifBtn.addEventListener('click', async () => {
      if (!('Notification' in window)) {
        alert('This browser does not support notifications.');
        return;
      }
      const result = await Notification.requestPermission();
      if (result === 'granted') notifBtn.textContent = 'Notifications enabled';
    });
    if ('Notification' in window && Notification.permission === 'granted') {
      notifBtn.textContent = 'Notifications enabled';
    }
  }
</script>
{% endblock %}