{% extends "base.html" %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="/static/css/hermes.css" />
<link rel="stylesheet" href="/static/css/herman-dashboard.css?v=8" />
{% endblock %}
{% block content %}
<div class="herman-shell hm-neo">

<div class="herman-hero">
  <h1>Herman · Command Center <span class="live-badge">Live</span></h1>
  <p class="hero-sub">CEO overzicht · klanten · briefing · retail · alles op een rij</p>
</div>

<section class="panel herman-briefing" x-data="dashboardBriefing()" x-init="init()">
  <div class="briefing-loading-overlay" x-show="loading" x-cloak>
    <div class="loading-dots"><span></span><span></span><span></span></div>
    <p x-text="loadingMsg"></p>
  </div>

  <header class="herman-briefing-header">
    <div>
      <h2>Dagelijkse briefing</h2>
      <div class="briefing-meta" id="briefing-meta"></div>
    </div>
    <div class="herman-briefing-actions">
      <button type="button" class="btn btn-pulse" @click="refreshLive()" :disabled="loading">↻ Live data</button>
      <button type="button" class="btn btn-pulse-green" @click="generate()" :disabled="loading">✨ Genereer dagrapport</button>
      <a href="/clients" class="btn btn-pulse-green">CRM Clients</a>
      <a href="/marketing?tab=reclame" class="btn btn-pulse-purple">Reclame folders</a>
      <a href="/analytics" class="btn">Analytics</a>
    </div>
  </header>

  <div id="briefing-dashboard" class="hm-dash-layout">

    <section class="hm-dash-section hm-dash-full">
      <h3 class="hm-section-title"><span class="hm-live-dot"></span> CEO KPI's</h3>
      <div id="briefing-kpis" class="hm-neo-kpi-row"></div>
    </section>

    <section class="hm-dash-section hm-dash-full">
      <h3 class="hm-section-title"><span class="hm-live-dot"></span> Alles op een rij</h3>
      <div class="hm-chart-panel">
        <div class="hm-chart-head"><h4>Executive samenvatting</h4><small>live database · geen RSS — zie Marketing Hub</small></div>
        <div id="briefing-executive-summary"></div>
      </div>
      <div id="briefing-clients-mini" class="beurs-mini-row" style="margin-top:0.75rem"></div>
    </section>

    <section class="hm-dash-section hm-dash-full">
      <h3 class="hm-section-title">Herman briefing</h3>
      <div class="briefing-summary-grid">
        <div class="briefing-card summary">
          <h4>Samenvatting</h4>
          <p id="briefing-summary-text" class="briefing-typewriter"></p>
        </div>
        <div class="briefing-horizon-col">
          <div class="horizon-card short">
            <h4>⚡ Korte termijn</h4>
            <ul id="briefing-actions-list"></ul>
          </div>
          <div class="horizon-card long">
            <h4>🎯 Lange termijn</h4>
            <ul id="briefing-longterm-list"></ul>
          </div>
        </div>
      </div>
    </section>

    <section class="hm-dash-section">
      <h3 class="hm-section-title">Retail operatie</h3>
      <div class="hm-dash-two-col">
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>Top retail kansen</h4><small><a href="/retail">Retail 360 →</a></small></div>
          <div id="briefing-retail"></div>
        </div>
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>Sales milestones</h4><small>live DB</small></div>
          <div id="briefing-milestones"></div>
        </div>
      </div>
      <div class="hm-chart-panel hm-dash-trends-only" style="margin-top:1rem">
        <div class="hm-chart-head"><h4>Markt highlights</h4><small>M&A · retail</small></div>
        <div id="briefing-food-highlights" class="hm-highlight-scroll"></div>
      </div>
    </section>

    <section class="hm-dash-section hm-dash-full">
      <h3 class="hm-section-title">Data & analytics</h3>
      <div class="hm-neo-charts">
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>Pipeline</h4><small>live deals</small></div>
          <div class="hm-chart-wrap"><canvas id="chart-pipeline"></canvas></div>
        </div>
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>NAS sentiment</h4><small>documenten</small></div>
          <div class="hm-chart-wrap"><canvas id="chart-sentiment"></canvas></div>
        </div>
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>NAS top woorden</h4><small>corpus</small></div>
          <div class="hm-chart-wrap"><canvas id="chart-words"></canvas></div>
        </div>
        <div class="hm-chart-panel">
          <div class="hm-chart-head"><h4>Agent activiteit</h4><small>laatste events</small></div>
          <div class="hm-chart-wrap"><canvas id="chart-agents"></canvas></div>
        </div>
      </div>
    </section>

  </div>
</section>

<div class="hub-grid hm-dash-feed">
  <section class="panel">
    <h2>Agent feed <span class="live-badge" id="agent-feed-badge">Live</span></h2>
    <div id="agent-feed-live">
    {% for ev in agent_feed[:12] %}
    <div class="hub-feed-item">
      <span>{{ ev.created_at[11:16] if ev.created_at else '' }}</span>
      <span class="badge badge-agent-{{ ev.agent_name|lower }}">{{ ev.agent_name }}</span>
      {{ ev.title or ev.event_type }}
    </div>
    {% else %}<p class="empty-state">Nog geen events.</p>{% endfor %}
    </div>
  </section>
  <section class="panel">
    <h2>Wacht op OK</h2>
    {% for item in approvals[:8] %}
    <div class="approval-item"><span class="badge">{{ item.agent_name }}</span> {{ item.title or item.event_type }}</div>
    {% else %}<p class="empty-state">Geen goedkeuringen 🎉</p>{% endfor %}
  </section>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/briefing-charts.js?v=8"></script>
<script>
const INITIAL_BRIEFING = {{ briefing_payload | tojson }};
function dashboardBriefing() {
  return {
    loading: false, loadingMsg: 'Herman werkt…',
    content: INITIAL_BRIEFING.content || '', createdAt: INITIAL_BRIEFING.created_at || '',
    _pollStop: null, _wsStop: null,
    async init() {
      await this.refreshLive(false);
      if (this.content) BriefingCharts.renderText(document.getElementById('briefing-dashboard'), this.content, this.createdAt);
      window._refreshBriefingLive = (t) => this.refreshLive(t);
      this._pollStop = CockpitLive.startPolling(() => this.refreshLive(false), 30000);
      this._wsStop = CockpitLive.connectFeed((data) => {
        if (data.events) CockpitLive.renderAgentFeed(document.getElementById('agent-feed-live'), data.events);
        CockpitLive.updateLiveBadge(document.getElementById('agent-feed-badge'), new Date().toLocaleTimeString('nl-NL', {hour:'2-digit',minute:'2-digit', timeZone:'Europe/Amsterdam'}));
      });
    },
    renderClientsMini(stats) {
      const el = document.getElementById('briefing-clients-mini');
      if (!el) return;
      const active = stats.clients_active || 0, total = stats.clients_total || stats.clients || 0;
      el.innerHTML = '<a href="/clients" class="beurs-mini-chip up"><strong>' + active + '</strong> actief</a>' +
        '<a href="/clients" class="beurs-mini-chip"><strong>' + total + '</strong> totaal klanten</a>' +
        '<a href="/retail" class="beurs-mini-chip"><strong>' + (stats.crm_partnerships||0) + '</strong> partnerships</a>' +
        '<a href="/marketing?tab=reclame" class="beurs-mini-chip"><strong>' + (stats.promo_campaigns||0) + '</strong> promo\'s</a>';
    },
    async refreshLive(toast) {
      if (toast !== false) Cockpit.toast('Live data ophalen…', 'info');
      try {
        const r = await fetch('/api/herman/briefing/stats').then(x => x.json());
        if (r.stats) {
          BriefingCharts.renderLive(document.getElementById('briefing-dashboard'), r.stats);
          this.renderClientsMini(r.stats);
          document.getElementById('briefing-meta').textContent = 'Live sync: ' + (r.at || '').substring(0, 19).replace('T', ' ') + ' UTC';
        }
        if (toast !== false) Cockpit.toast('Live data bijgewerkt', 'success');
      } catch (e) { if (toast !== false) Cockpit.toast(e.message, 'error'); }
    },
    async generate() {
      this.loading = true;
      this.loadingMsg = 'Live data laden…';
      await this.refreshLive(false);
      this.loadingMsg = 'Herman schrijft dagrapport…';
      try {
        const r = await Cockpit.api('/api/herman/briefing', { method: 'POST' });
        this.content = r.content || '';
        this.createdAt = r.generated_at || new Date().toISOString();
        BriefingCharts.render(document.getElementById('briefing-dashboard'), r.stats, r.content, this.createdAt);
        this.renderClientsMini(r.stats || {});
        Cockpit.toast('Dagrapport klaar!', 'success');
      } catch (e) { Cockpit.toast(e.message, 'error'); }
      this.loading = false;
    }
  };
}
</script>
{% endblock %}