{% 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/herman-dashboard.css?v=13" />
{% endblock %}
{% block content %}
<div x-data="marketingHub()" x-init="init()">
<header class="page-header">
  <div>
    <h1>Marketing Command <span class="live-badge">Live</span></h1>
    <p class="subtitle">RSS trends · halal markt · weer · actie · CRM koppeling</p>
  </div>
  <div class="retail-actions">
    <button class="btn btn-sm btn-pulse" @click="refreshAll()" :disabled="busy">↻ Alles verversen</button>
    <a class="btn btn-sm btn-pulse-green" href="/retail">Retail 360 →</a>
    <a class="btn btn-sm" href="/projects">Projecten →</a>
  </div>
</header>

<div id="viz-toolbar" class="viz-toolbar"></div>

<div class="hm-dash-two-col" style="margin-bottom:1rem">
  <div class="hm-chart-panel page-viz-panel viz-mode-chart">
    <div class="hm-chart-head"><h4>Marketing data</h4><small>RSS · trends · kansen</small></div>
    <div class="page-viz-body">
      <div class="hm-chart-wrap page-viz-canvas"><canvas id="chart-marketing"></canvas></div>
      <div id="viz-marketing-alt" class="viz-alt"></div>
    </div>
  </div>
  <div class="hm-chart-panel page-viz-panel viz-mode-chart">
    <div class="hm-chart-head"><h4>Publish jobs</h4><small>status verdeling</small></div>
    <div class="page-viz-body">
      <div class="hm-chart-wrap page-viz-canvas"><canvas id="chart-marketing-publish"></canvas></div>
      <div id="viz-marketing-publish-alt" class="viz-alt"></div>
    </div>
  </div>
</div>

<div class="live-feed-bar" x-show="dashboard.rss?.length">
  <div class="ticker-track">
    <template x-for="r in dashboard.rss" :key="r.id">
      <a class="ticker-link" :href="r.link" target="_blank" rel="noopener" x-text="'📰 '+r.feed_name+': '+r.title"></a>
    </template>
  </div>
</div>

<div class="kpi-row">
  <div class="kpi-card kpi-pulse"><span>RSS items</span><strong x-text="dashboard.rss?.length||0"></strong></div>
  <div class="kpi-card"><span>Markt trends</span><strong x-text="dashboard.trends?.length||0"></strong></div>
  <div class="kpi-card kpi-green"><span>Top kansen</span><strong x-text="dashboard.top_opportunities?.length||0"></strong></div>
  <div class="kpi-card"><span>Mentions</span><strong>{{ analytics.mention_count }}</strong></div>
</div>

<div class="vtabs-layout" style="--vt-color:#ff6b9d" x-ref="vtabsWrap">
  <nav class="vtabs-nav" x-ref="vtabsNav" :style="'--vt-indicator-top:'+tabIndicatorTop+'px;--vt-indicator-h:'+tabIndicatorH+'px'">
    <div class="vtabs-nav-header"><strong>Marketing</strong></div>
    <button type="button" class="vtab-btn" :class="tab==='live'?'active':''" @click="setTab('live', $event.currentTarget)" data-vtab="live"><span class="vtab-icon">📡</span><span>Live Feed</span></button>
    <button type="button" class="vtab-btn" :class="tab==='reclame'?'active':''" @click="setTab('reclame', $event.currentTarget)" data-vtab="reclame"><span class="vtab-icon">📁</span><span>Reclame folders</span></button>
    <button type="button" class="vtab-btn" :class="tab==='publish'?'active':''" @click="setTab('publish', $event.currentTarget)" data-vtab="publish"><span class="vtab-icon">🚀</span><span>Automatisering</span></button>
    <button type="button" class="vtab-btn" :class="tab==='actie'?'active':''" @click="setTab('actie', $event.currentTarget)" data-vtab="actie"><span class="vtab-icon">⚡</span><span>Actie</span></button>
    <button type="button" class="vtab-btn" :class="tab==='intel'?'active':''" @click="setTab('intel', $event.currentTarget)" data-vtab="intel"><span class="vtab-icon">🎯</span><span>Marktscan</span></button>
    <button type="button" class="vtab-btn" :class="tab==='regelgeving'?'active':''" @click="setTab('regelgeving', $event.currentTarget)" data-vtab="regelgeving"><span class="vtab-icon">⚖️</span><span>Regelgeving</span></button>
    <button type="button" class="vtab-btn" :class="tab==='bookmarks'?'active':''" @click="setTab('bookmarks', $event.currentTarget)" data-vtab="bookmarks"><span class="vtab-icon">★</span><span>Opgeslagen RSS</span></button>
    <button type="button" class="vtab-btn" :class="tab==='social'?'active':''" @click="setTab('social', $event.currentTarget)" data-vtab="social"><span class="vtab-icon">💬</span><span>Social</span></button>
    <button type="button" class="vtab-btn" :class="tab==='studio'?'active':''" @click="setTab('studio', $event.currentTarget)" data-vtab="studio"><span class="vtab-icon">🎨</span><span>Studio</span></button>
  </nav>
  <div class="vtabs-content">
<section x-show="tab==='live'" class="panel">
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
    <div>
      <h2>Kant-en-klaar & supermarkt RSS <span class="live-badge">Gefilterd</span></h2>
      <p class="hint">Alleen kant-en-klaar maaltijden, retail en supermarkten — geen algemeen nieuws.</p>
      <button class="btn btn-sm btn-pulse" @click="refreshRss()" :disabled="busy">RSS ophalen</button>
      <template x-for="r in dashboard.rss" :key="r.id">
        <div class="feed-card">
          <div class="source" x-text="r.feed_name+' · '+r.category"></div>
          <a :href="r.link" target="_blank" rel="noopener"><strong x-text="r.title"></strong></a>
          <p x-text="(r.summary||'').substring(0,140)+'…'"></p>
          <small x-text="r.published_at||r.fetched_at"></small>
          <div class="feed-actions">
            <a class="btn-source" :href="r.link" target="_blank" rel="noopener">Artikel lezen →</a>
            <a class="btn-source" :href="r.feed_url" target="_blank" rel="noopener">Bron feed →</a>
            <button type="button" class="btn-source btn-bookmark" :class="isBookmarked(r.id)?'saved':''" @click="toggleBookmark(r)" x-text="isBookmarked(r.id)?'★ Opgeslagen':'☆ Bewaren'"></button>
          </div>
        </div>
      </template>
      <p x-show="!dashboard.rss?.length" class="muted">Geen items — klik RSS ophalen.</p>
    </div>
    <div>
      <h2>Markt trends <span class="live-badge">Live</span></h2>
      <template x-for="t in dashboard.trends" :key="t.id">
        <div class="feed-card">
          <strong x-text="t.trend_name"></strong>
          <p x-text="t.description||t.trend_category"></p>
          <span class="ticker-item" x-text="'Kans: '+Math.round((t.opportunity_score||0)*100)+'%'"></span>
        </div>
      </template>
      <h3 style="margin-top:1.5rem">Top halal kansen</h3>
      <template x-for="o in dashboard.top_opportunities" :key="o.name">
        <div class="feed-card clickable-row" @click="window.location='/retail'">
          <strong x-text="o.chain+' · '+o.name"></strong>
          <p x-text="o.city+' · score '+Math.round(o.halal_opportunity_score||0)"></p>
        </div>
      </template>
    </div>
  </div>
</section>

<!-- ACTIE -->
<section x-show="tab==='actie'" class="panel">
  <h2>Snelle acties <span class="live-badge">Pulse</span></h2>
  <div style="display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem">
    <a class="btn btn-pulse" href="/retail">Open Retail 360</a>
    <a class="btn btn-pulse-green" href="/clients">CRM Clients</a>
    <a class="btn btn-pulse-purple" href="/deals">CRM Deals</a>
    <button class="btn btn-pulse" @click="refreshAll()">Trends verversen</button>
  </div>
  <h3>Herman Recommendations</h3>
  <div id="reco-list"><p class="muted">Laden…</p></div>
  <h3 style="margin-top:1.5rem">Geplande posts</h3>
  <table class="data-table"><thead><tr><th>Account</th><th>Content</th><th>Tijd</th><th>Status</th><th></th></tr></thead>
  <tbody>{% for p in scheduled_posts %}<tr>
    <td>{{ p.platform }} @{{ p.username }}</td><td>{{ p.content[:60] }}</td><td>{{ p.scheduled_time }}</td><td>{{ p.status }}</td>
    <td><button class="btn btn-sm btn-approve" @click="postStatus({{ p.id }}, 'approved')">✓</button>
    <button class="btn btn-sm btn-primary" @click="postStatus({{ p.id }}, 'posted')">Post</button></td></tr>{% endfor %}</tbody></table>
</section>

<!-- RECLAME FOLDERS -->
<section x-show="tab==='reclame'" class="panel">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
    <div>
      <h2>Supermarkt reclame folders <span class="live-badge">Acties</span></h2>
      <p class="hint">Live folders van <a href="https://www.reclamefolder.nl/categorieen/supermarkt/" target="_blank" rel="noopener">Reclamefolder.nl</a> — klik om de folder te openen.</p>
    </div>
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
      <button class="btn btn-sm btn-pulse-green" @click="refreshReclamefolders()" :disabled="busy">↻ Ophalen van Reclamefolder.nl</button>
      <a class="btn btn-sm" href="https://www.reclamefolder.nl/categorieen/supermarkt/" target="_blank" rel="noopener">Bron site →</a>
    </div>
  </div>
  <div class="reclame-kpi-row kpi-row" style="margin-bottom:1rem">
    <div class="kpi-card"><span>Ketens</span><strong x-text="reclameStats.chains||0"></strong></div>
    <div class="kpi-card kpi-green"><span>Folders</span><strong x-text="filteredPromos.length"></strong></div>
    <div class="kpi-card"><span>Totaal geladen</span><strong x-text="promos.length"></strong></div>
  </div>
  <div class="form-grid reclame-filters" style="margin-bottom:1rem">
    <select class="form-input" x-model="reclameFilter.chain" @change="loadPromos()">
      <option value="">Alle ketens</option>
      <template x-for="c in reclameChains" :key="c">
        <option :value="c" x-text="c"></option>
      </template>
    </select>
    <select class="form-input" x-model="reclameFilter.folder_type" @change="loadPromos()">
      <option value="">Alle types</option>
      <option value="folder">Folder</option>
      <option value="actie">Actie</option>
      <option value="bonus">Bonus</option>
    </select>
    <select class="form-input" x-model="reclameFilter.valid_days" @change="loadPromos()">
      <option value="">Alle geldigheid</option>
      <option value="7">Nog 7 dagen geldig</option>
      <option value="14">Nog 14 dagen geldig</option>
      <option value="30">Nog 30 dagen geldig</option>
    </select>
    <input class="form-input" x-model="reclameFilter.q" @input.debounce.400ms="loadPromos()" placeholder="Zoek op titel, keten…" />
  </div>
  <div class="promo-grid">
    <template x-for="p in filteredPromos" :key="p.id || p.folder_path">
      <a class="feed-card promo-card promo-card-link" :href="promoUrl(p)" target="_blank" rel="noopener">
        <img x-show="p.image_url" class="promo-cover" :src="p.image_url" :alt="p.title" loading="lazy" />
        <span class="ticker-item" x-text="p.chain||'Retail'"></span>
        <strong x-text="p.title"></strong>
        <p x-text="p.description||p.folder_label||''"></p>
        <small x-text="(p.valid_from||'?')+' → '+(p.valid_to||'?')"></small>
        <div class="feed-actions">
          <span class="btn-source">📁 Folder openen op Reclamefolder.nl →</span>
        </div>
      </a>
    </template>
  </div>
  <p x-show="!filteredPromos.length && !busy" class="muted">Geen folders — pas filters aan of klik «Ophalen van Reclamefolder.nl».</p>
  <h3 style="margin-top:1.5rem">Nieuwe folder registreren</h3>
  <form class="form-grid" @submit.prevent="addPromo">
    <input class="form-input" x-model="promoForm.chain" placeholder="Keten (AH, Jumbo…)" />
    <input class="form-input" x-model="promoForm.title" placeholder="Titel actie" required />
    <input class="form-input" x-model="promoForm.folder_path" placeholder="Pad /nas/marketing/reclame/…" />
    <input class="form-input" x-model="promoForm.description" placeholder="Beschrijving / context" />
    <button class="btn btn-primary btn-pulse" type="submit">Folder toevoegen</button>
  </form>
</section>

<!-- AUTOMATISERING / SOCIAL PUBLISH -->
<section x-show="tab==='publish'" class="panel">
  <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem">
    <div>
      <h2>Social automatisering <span class="live-badge">202 Async</span></h2>
      <p class="hint">Publiceer naar alle kanalen tegelijk. Zonder API-keys worden kanalen overgeslagen.</p>
    </div>
    <a class="btn btn-sm btn-pulse-purple" href="/settings?tab=social">⚙️ Social API's instellen</a>
  </div>

  <div class="publish-channels" style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem">
    <template x-for="ch in publishChannels" :key="ch.platform">
      <label class="ticker-item publish-channel" :class="ch.configured ? 'channel-ready' : 'channel-skip'">
        <input type="checkbox" :value="ch.platform" x-model="publishForm.channels" />
        <span x-text="ch.label + (ch.configured ? ' ✓' : ' (skip)')"></span>
      </label>
    </template>
  </div>

  <div class="emoji-bar" style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.5rem">
    <template x-for="em in emojis" :key="em">
      <button type="button" class="btn btn-sm" @click="insertEmoji(em)" x-text="em"></button>
    </template>
  </div>

  <textarea class="form-input" rows="5" x-model="publishForm.text" placeholder="Post tekst — UTF-8 emoji ondersteund 🥘✨" style="width:100%;margin-bottom:0.75rem"></textarea>

  <div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem">
    <select class="form-input" x-model="publishForm.project_id" style="max-width:220px">
      <option value="">Opslaan in agent-project (auto)</option>
      <template x-for="p in cockpitProjects" :key="p.id">
        <option :value="p.id" x-text="p.name"></option>
      </template>
    </select>
    <label class="btn btn-secondary btn-sm">
      📷 Foto uploaden
      <input type="file" accept="image/*" @change="uploadImage($event)" style="display:none" />
    </label>
    <img x-show="publishForm.image_url" :src="publishForm.image_url" alt="Preview" style="max-height:80px;border-radius:8px" />
    <button type="button" class="btn btn-primary btn-pulse" @click="submitPublish()" :disabled="publishBusy || !publishForm.text.trim()">
      🚀 Publiceren (achtergrond)
    </button>
    <span x-show="publishJobId" class="muted">Job #<span x-text="publishJobId"></span> · <span x-text="publishJobStatus"></span></span>
  </div>

  <h3>Publicatie historie</h3>
  <table class="data-table">
    <thead><tr><th>#</th><th>Tijd</th><th>Kanalen</th><th>Status</th><th>Resultaat</th></tr></thead>
    <tbody>
      <template x-for="j in publishHistory" :key="j.id">
        <tr>
          <td x-text="j.id"></td>
          <td x-text="(j.created_at||'').substring(0,19).replace('T',' ')"></td>
          <td x-text="(j.channels||[]).join(', ')"></td>
          <td x-text="j.status"></td>
          <td><small x-text="publishResultSummary(j)"></small></td>
        </tr>
      </template>
    </tbody>
  </table>
  <p x-show="!publishHistory.length" class="muted">Nog geen publicaties.</p>
</section>

<!-- OPGESLAGEN RSS -->
<section x-show="tab==='bookmarks'" class="panel">
  <h2>Opgeslagen RSS artikelen <span class="live-badge">★</span></h2>
  <template x-for="b in bookmarks" :key="b.id">
    <div class="feed-card saved-rss">
      <div class="source" x-text="(b.feed_name||'RSS')+' · '+((b.created_at||'').substring(0,10))"></div>
      <a :href="b.link" target="_blank" rel="noopener"><strong x-text="b.title"></strong></a>
      <div class="feed-actions">
        <a class="btn-source" :href="b.link" target="_blank">Artikel →</a>
        <button type="button" class="btn-source btn-bookmark saved" @click="removeBookmark(b.rss_item_id)">Verwijder ★</button>
      </div>
    </div>
  </template>
  <p x-show="!bookmarks.length" class="muted">Nog geen opgeslagen artikelen — klik ☆ Bewaren in Live Feed.</p>
</section>

<!-- REGELGEVING & CBS -->
<section x-show="tab==='regelgeving'" class="panel">
  <div class="regs-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
    <div>
      <h2>Regelgeving · CBS · Food markt <span class="live-badge">Live RSS</span></h2>
      <p class="hint">NVWA, EU food law, CBS statistiek en retail M&A — apart van kant-en-klaar nieuws.</p>
    </div>
    <button class="btn btn-sm btn-pulse" @click="refreshRegulations()" :disabled="busy">↻ Feeds ophalen</button>
  </div>
  <div class="regs-columns" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem">
    <div>
      <h3 style="font-size:0.9rem;color:#a855f7;margin:0 0 0.75rem">⚖️ Regelgeving & NVWA</h3>
      <template x-for="r in regRows.regelgeving" :key="'reg'+r.id">
        <div class="feed-card">
          <span class="ticker-item" style="background:rgba(168,85,247,0.15);color:#a855f7;border-color:rgba(168,85,247,0.3)">REG</span>
          <a :href="r.link" target="_blank" rel="noopener"><strong x-text="r.title"></strong></a>
          <small x-text="r.feed_name"></small>
          <div class="feed-actions">
            <a class="btn-source" :href="r.link" target="_blank">Artikel →</a>
            <a class="btn-source" :href="r.feed_url" target="_blank">Bron →</a>
          </div>
        </div>
      </template>
      <p x-show="!regRows.regelgeving?.length" class="muted">Geen items — klik Feeds ophalen.</p>
    </div>
    <div>
      <h3 style="font-size:0.9rem;color:#38bdf8;margin:0 0 0.75rem">📊 CBS statistiek</h3>
      <template x-for="r in regRows.cbs" :key="'cbs'+r.id">
        <div class="feed-card">
          <span class="ticker-item" style="background:rgba(56,189,248,0.15);color:#38bdf8">CBS</span>
          <a :href="r.link" target="_blank" rel="noopener"><strong x-text="r.title"></strong></a>
          <small x-text="r.feed_name"></small>
          <div class="feed-actions">
            <a class="btn-source" :href="r.link" target="_blank">Artikel →</a>
            <a class="btn-source" :href="r.feed_url" target="_blank">Bron →</a>
          </div>
        </div>
      </template>
      <p x-show="!regRows.cbs?.length" class="muted">Geen CBS feeds — refresh RSS.</p>
    </div>
    <div>
      <h3 style="font-size:0.9rem;color:#ff9f43;margin:0 0 0.75rem">🏪 Food markt & M&A</h3>
      <template x-for="r in regRows.markt" :key="'mkt'+r.id">
        <div class="feed-card">
          <span class="ticker-item" style="background:rgba(255,159,67,0.15);color:#ff9f43">MKT</span>
          <a :href="r.link" target="_blank" rel="noopener"><strong x-text="r.title"></strong></a>
          <small x-text="r.feed_name"></small>
          <div class="feed-actions">
            <a class="btn-source" :href="r.link" target="_blank">Artikel →</a>
            <a class="btn-source" :href="r.feed_url" target="_blank">Bron →</a>
          </div>
        </div>
      </template>
      <p x-show="!regRows.markt?.length" class="muted">Geen markt news.</p>
    </div>
  </div>
</section>

<!-- INTEL -->
<section x-show="tab==='intel'" class="panel">
  <h2>Marketing strategie · halal kant-en-klaar</h2>
  <div class="feed-card">
    <strong>🎯 Focus: halal-gap filialen</strong>
    <p>Filialen zonder halal certificering in buurten met hoge demografische vraag — direct benaderen via CRM koppeling in Retail 360.</p>
    <a class="btn btn-sm btn-pulse" href="/retail">Bekijk kansen →</a>
  </div>
  <div class="feed-card">
    <strong>📊 Data bronnen actief</strong>
    <p>CBS demografie · PDOK geocoding · Open-Meteo weer · RSS feeds (Foodlog, RetailDetail, VMT, Nu.nl) · OSM groothandels</p>
  </div>
  <div class="feed-card">
    <strong>🌤️ Weer & seizoen</strong>
    <p>Gebruik weer voorspelling per filiaal in Retail 360 om promoties te timen (warme dagen = kant-en-klaar salades, kou = stoofgerechten).</p>
  </div>
  <button class="btn btn-secondary" @click="loadSocialAnalytics()">Social analytics laden</button>
  <pre x-text="socialAnalytics" style="margin-top:1rem;font-size:0.8rem"></pre>
</section>

<!-- SOCIAL (bestaande functionaliteit) -->
<section x-show="tab==='social'" class="panel">
  <h2>Mentions</h2>
  <form class="form-grid" @submit.prevent="addMention">
    <select x-model="mentionForm.platform" class="form-input"><option>Instagram</option><option>TikTok</option><option>Facebook</option><option>LinkedIn</option></select>
    <input class="form-input" placeholder="Mention text" x-model="mentionForm.text" required />
    <button class="btn btn-primary btn-pulse" type="submit">Add mention</button>
  </form>
  <table class="data-table"><thead><tr><th>Platform</th><th>Text</th><th>Sentiment</th><th></th></tr></thead>
  <tbody>{% for m in social_mentions %}
  <tr><td>{{ m.platform }}</td><td>{{ m.text[:80] }}</td><td>{{ m.sentiment_score }}</td>
  <td><button class="btn btn-reject btn-sm" @click="deleteMention({{ m.id }})">Delete</button></td></tr>{% endfor %}</tbody></table>
  <h3 style="margin-top:1.5rem">Accounts</h3>
  <form class="form-grid" @submit.prevent="addAccount">
    <input class="form-input" placeholder="Platform" x-model="accountForm.platform" />
    <input class="form-input" placeholder="Username" x-model="accountForm.username" />
    <button class="btn btn-primary" type="submit">Add</button>
  </form>
  <table class="data-table"><thead><tr><th>Platform</th><th>Username</th><th>Active</th></tr></thead>
  <tbody>{% for a in accounts %}<tr><td>{{ a.platform }}</td><td>{{ a.username }}</td><td>{{ a.is_active }}</td></tr>{% endfor %}</tbody></table>
</section>

<!-- STUDIO -->
<section x-show="tab==='studio'" class="panel">
  <h2>AI Studio</h2>
  <form @submit.prevent="generateAI">
    <input class="form-input" x-model="aiForm.topic" placeholder="Topic — bijv. halal kant-en-klaar Jumbo Amsterdam" />
    <input class="form-input" x-model="aiForm.platform" placeholder="Platform" />
    <button class="btn btn-primary btn-pulse-purple" type="submit">Generate content</button>
  </form>
  <pre class="ai-output" x-text="aiOutput"></pre>
  <h3 style="margin-top:1.5rem">Agent rules</h3>
  <form class="form-grid" @submit.prevent="addRule">
    <input class="form-input" x-model="ruleForm.name" placeholder="Rule name" />
    <select x-model="ruleForm.condition_type" class="form-input"><option value="sentiment_below">sentiment_below</option><option value="mention_spike">mention_spike</option></select>
    <button class="btn btn-primary" type="submit">Add rule</button>
  </form>
  <table class="data-table"><thead><tr><th>Name</th><th>Condition</th><th>Active</th></tr></thead>
  <tbody>{% for r in agent_rules %}<tr><td>{{ r.name }}</td><td>{{ r.condition_type }}</td><td>{{ r.is_active }}</td></tr>{% endfor %}</tbody></table>
</section>
  </div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/dashboard-layout.js?v=2"></script>
<script src="/static/js/page-viz.js?v=1"></script>
<script>
function marketingHub() {
  return {
    tab: new URLSearchParams(location.search).get('tab') || 'live',
    tabIndicatorTop: 0, tabIndicatorH: 44,
    busy: false, dashboard: {}, socialAnalytics: '',
    regRows: { regelgeving: [], cbs: [], markt: [] },
    promos: [], bookmarks: [], bookmarkIds: {},
    reclameChains: [], reclameFilter: { chain: '', q: '', folder_type: '', valid_days: '' },
    reclameStats: { chains: 0 },
    publishChannels: [], publishForm: { text: '', image_url: '', media_ids: [], channels: [], project_id: '' },
    publishHistory: [], publishJobId: null, publishJobStatus: '', publishBusy: false,
    cockpitProjects: [],
    emojis: ['🥘','✨','🔥','📢','🛒','🌿','☪️','🇳🇱','👨‍🍳','💚','📁','🎯'],
    promoForm: { chain: '', title: '', folder_path: '', description: '' },
    _pollStop: null,
    mentionForm: { platform: 'Instagram', text: '' },
    accountForm: { platform: 'Instagram', username: '' },
    ruleForm: { name: '', condition_type: 'sentiment_below', threshold: 2 },
    aiForm: { topic: '', platform: 'Instagram', tone: 'vriendelijk' },
    aiOutput: '',
    get filteredPromos() {
      return this.promos;
    },
    async init() {
      await this.loadDashboard();
      await this.loadBookmarks();
      await this.loadPublishHistory();
      fetch('/api/projects?limit=50').then(r=>r.json()).then(d=>{ this.cockpitProjects = d.items || []; }).catch(()=>{});
      if (this.tab === 'regelgeving') await this.loadRegulations();
      if (this.tab === 'reclame') { await this.loadReclameChains(); await this.loadPromos(); }
      if (this.tab === 'publish') { await this.loadPublishChannels(); await this.loadPublishHistory(); }
      this._pollStop = CockpitLive.startPolling(() => this.refreshAll(false), 30000);
      this.$nextTick(() => this.updateTabIndicator());
      if (window.PageViz) {
        window.PageViz.init('marketing', (mode) => this.renderViz(mode));
      }
      fetch('/api/admin/recommendations/pending').then(r=>r.json()).then(d=>{
        const el=document.getElementById('reco-list');
        if(!el) return;
        el.innerHTML=(d.items||[]).map(i=>`<div class="feed-card"><strong>${i.title}</strong><p>${i.description||''}</p>
          <button class="btn btn-sm btn-approve" onclick="fetch('/api/admin/recommendations/${i.id}/approve',{method:'POST'}).then(()=>location.reload())">Approve</button>
          <button class="btn btn-sm btn-reject" onclick="fetch('/api/admin/recommendations/${i.id}/dismiss',{method:'POST'}).then(()=>location.reload())">Dismiss</button></div>`).join('')||'<p class="muted">Geen open recommendations</p>';
      });
    },
    setTab(name) {
      this.tab = name;
      const u = new URL(location.href);
      if (name === 'live') u.searchParams.delete('tab');
      else u.searchParams.set('tab', name);
      history.replaceState({}, '', u);
      if (name === 'reclame') { this.loadReclameChains(); this.loadPromos(); }
      if (name === 'bookmarks') this.loadBookmarks();
      if (name === 'regelgeving') this.loadRegulations();
      if (name === 'publish') { this.loadPublishChannels(); this.loadPublishHistory(); }
      this.$nextTick(() => this.updateTabIndicator());
    },
    updateTabIndicator() {
      const nav = this.$refs.vtabsNav;
      if (!nav) return;
      const btn = nav.querySelector('[data-vtab="'+this.tab+'"]');
      if (!btn) return;
      this.tabIndicatorTop = btn.offsetTop - nav.scrollTop;
      this.tabIndicatorH = btn.offsetHeight;
    },
    async loadReclameChains() {
      try {
        const d = await fetch('/api/retail/reclamefolder/chains').then(r => r.json());
        this.reclameChains = d.chains || [];
        this.reclameStats.chains = d.count || this.reclameChains.length;
      } catch (e) { this.reclameChains = []; }
    },
    async loadPromos() {
      try {
        const params = new URLSearchParams({ status: 'active', limit: '200' });
        if (this.reclameFilter.chain) params.set('chain', this.reclameFilter.chain);
        if (this.reclameFilter.q) params.set('q', this.reclameFilter.q);
        if (this.reclameFilter.folder_type) params.set('folder_type', this.reclameFilter.folder_type);
        if (this.reclameFilter.valid_days) params.set('valid_days', this.reclameFilter.valid_days);
        let items = (await fetch('/api/retail/promo-campaigns?' + params).then(r => r.json())).items || [];
        items = items.filter(p => p.source === 'reclamefolder.nl' || (p.folder_path || '').startsWith('http') || (p.metadata && (typeof p.metadata === 'object' ? p.metadata.edition_id : String(p.metadata).includes('edition_id'))));
        this.promos = items;
        if (!items.length && !this.reclameFilter.q && !this.reclameFilter.chain) await this.refreshReclamefolders(false);
      } catch (e) { this.promos = []; }
    },
    promoUrl(p) {
      const path = p.folder_path || '';
      if (path.startsWith('http')) return path;
      let meta = p.metadata || {};
      if (typeof meta === 'string') { try { meta = JSON.parse(meta); } catch (e) { meta = {}; } }
      const editionId = meta.edition_id;
      if (editionId) return 'https://www.reclamefolder.nl/f/folders/' + editionId + '/';
      const slug = meta.retailer_permaname || '';
      if (slug) return 'https://www.reclamefolder.nl/winkels/' + slug + '/';
      return 'https://www.reclamefolder.nl/categorieen/supermarkt/';
    },
    async refreshReclamefolders(toast = true) {
      this.busy = true;
      try {
        const d = await fetch('/api/retail/reclamefolder/refresh', { method: 'POST' }).then(r => r.json());
        await this.loadPromos();
        await this.loadReclameChains();
        if (toast) Cockpit.toast((d.synced || 0) + ' folders opgehaald van Reclamefolder.nl', 'success');
      } catch (e) {
        if (toast) Cockpit.toast('Reclamefolder ophalen mislukt', 'error');
      } finally { this.busy = false; }
    },
    async addPromo() {
      await fetch('/api/retail/promo-campaigns', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.promoForm) });
      this.promoForm = { chain: '', title: '', folder_path: '', description: '' };
      await this.loadPromos();
      Cockpit.toast('Folder geregistreerd', 'success');
    },
    async loadBookmarks() {
      try {
        const d = await fetch('/api/retail/rss/bookmarks?limit=100').then(r => r.json());
        this.bookmarks = d.items || [];
        this.bookmarkIds = {};
        this.bookmarks.forEach(b => { this.bookmarkIds[b.rss_item_id] = true; });
      } catch (e) { this.bookmarks = []; }
    },
    isBookmarked(id) { return !!this.bookmarkIds[id]; },
    async toggleBookmark(r) {
      if (this.isBookmarked(r.id)) {
        await this.removeBookmark(r.id);
      } else {
        await fetch('/api/retail/rss/bookmarks', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ rss_item_id: r.id, title: r.title, link: r.link, feed_name: r.feed_name }),
        });
        await this.loadBookmarks();
      }
    },
    async removeBookmark(id) {
      await fetch('/api/retail/rss/bookmarks/' + id, { method: 'DELETE' });
      await this.loadBookmarks();
    },
    async loadRegulations() {
      try {
        const d = await fetch('/api/retail/regulations?limit=25').then(r => r.json());
        this.regRows = { regelgeving: d.regelgeving || [], cbs: d.cbs || [], markt: d.markt || [] };
      } catch (e) { this.regRows = { regelgeving: [], cbs: [], markt: [] }; }
    },
    async refreshRegulations() {
      this.busy = true;
      try { await fetch('/api/retail/rss/refresh', { method: 'POST' }); await this.loadRegulations(); }
      finally { this.busy = false; }
    },
    async loadDashboard() {
      try { this.dashboard = await fetch('/api/retail/live-dashboard').then(r=>r.json()); } catch(e) { this.dashboard={}; }
    },
    async refreshRss() { this.busy=true; try{ await fetch('/api/retail/rss/refresh',{method:'POST'}); await this.loadDashboard(); }finally{ this.busy=false; } },
    async refreshAll(toast) {
      this.busy = true;
      try {
        await fetch('/api/retail/rss/refresh', { method: 'POST' });
        await this.loadDashboard();
        this.renderViz(window.__vizMode || 'neo-bars');
        if (toast !== false) Cockpit.toast('Marketing data bijgewerkt', 'success');
      } finally { this.busy = false; }
    },
    async addMention() { await Cockpit.api('/mentions',{method:'POST',body:JSON.stringify(this.mentionForm)}); location.reload(); },
    async deleteMention(id) { if(!Cockpit.confirmDelete()) return; await Cockpit.api('/mentions/'+id,{method:'DELETE'}); location.reload(); },
    async addAccount() { await Cockpit.api('/accounts',{method:'POST',body:JSON.stringify(this.accountForm)}); location.reload(); },
    async postStatus(id, status) { await Cockpit.api('/scheduled-posts/'+id+'/status',{method:'PATCH',body:JSON.stringify({status})}); location.reload(); },
    async addRule() { await Cockpit.api('/agent-rules',{method:'POST',body:JSON.stringify({...this.ruleForm,threshold:parseFloat(this.ruleForm.threshold),action:'notify',is_active:true})}); location.reload(); },
    async generateAI() { const r=await Cockpit.api('/api/ai/generate-content',{method:'POST',body:JSON.stringify(this.aiForm)}); this.aiOutput=r.content; },
    async loadSocialAnalytics() { const r=await Cockpit.api('/analytics/social'); this.socialAnalytics=JSON.stringify(r,null,2); },

    insertEmoji(em) {
      this.publishForm.text = (this.publishForm.text || '') + em;
    },
    async loadPublishChannels() {
      try {
        const r = await fetch('/api/marketing/channels').then(res => res.json());
        const labels = { twitter: 'X', linkedin: 'LinkedIn', instagram: 'Instagram', facebook: 'Facebook', tiktok: 'TikTok', pinterest: 'Pinterest' };
        this.publishChannels = (r.items || []).map(c => ({
          ...c, label: labels[c.platform] || c.platform,
        }));
        if (!this.publishForm.channels.length) {
          this.publishForm.channels = (r.platforms || []).slice();
        }
      } catch (e) { this.publishChannels = []; }
    },
    async loadPublishHistory() {
      try {
        const r = await fetch('/api/marketing/publish/history?limit=30').then(res => res.json());
        this.publishHistory = r.items || [];
        if (window.__marketingRenderViz) window.__marketingRenderViz(window.__vizMode || 'neo-bars');
      } catch (e) { this.publishHistory = []; }
    },
    renderViz(mode) {
      window.__vizMode = mode;
      window.__marketingRenderViz = (m) => this.renderViz(m);
      if (!window.VizEngine) return;
      const d = this.dashboard || {};
      VizEngine.renderFromRows(mode,
        document.getElementById('chart-marketing'),
        document.getElementById('viz-marketing-alt'),
        'marketing-main', 'Marketing KPIs',
        [
          { label: 'RSS', value: (d.rss || []).length, raw: (d.rss || []).length },
          { label: 'Trends', value: (d.trends || []).length, raw: (d.trends || []).length },
          { label: 'Kansen', value: (d.top_opportunities || []).length, raw: (d.top_opportunities || []).length },
          { label: 'Promo', value: this.promos.length, raw: this.promos.length },
        ],
        'hm-eq-purple', VizEngine.MODES ? null : null
      );
      const statusMap = {};
      (this.publishHistory || []).forEach(j => {
        const s = j.status || 'unknown';
        statusMap[s] = (statusMap[s] || 0) + 1;
      });
      const labels = Object.keys(statusMap);
      const values = labels.map(k => statusMap[k]);
      if (!labels.length) { labels.push('geen'); values.push(0); }
      VizEngine.renderFromRows(mode,
        document.getElementById('chart-marketing-publish'),
        document.getElementById('viz-marketing-publish-alt'),
        'marketing-publish', 'Publish status',
        labels.map((l, i) => ({ label: l, value: values[i], raw: values[i] })),
        'hm-eq-cyan'
      );
    },
    publishResultSummary(j) {
      const res = j.result || {};
      if (typeof res === 'string') { try { return JSON.stringify(JSON.parse(res)); } catch (e) { return res; } }
      const parts = [];
      Object.entries(res).forEach(([k, v]) => {
        if (v && typeof v === 'object') parts.push(k + ': ' + (v.status || v.ok || JSON.stringify(v)));
        else parts.push(k + ': ' + v);
      });
      return parts.join(' · ') || '—';
    },
    async uploadImage(ev) {
      const file = ev.target.files && ev.target.files[0];
      if (!file) return;
      const fd = new FormData();
      fd.append('file', file);
      try {
        const r = await fetch('/api/marketing/upload', { method: 'POST', body: fd }).then(res => res.json());
        this.publishForm.image_url = r.url;
        if (r.media_id) this.publishForm.media_ids = [r.media_id];
        Cockpit.toast('Afbeelding geüpload', 'success');
      } catch (e) { Cockpit.toast('Upload mislukt', 'error'); }
      ev.target.value = '';
    },
    async submitPublish() {
      this.publishBusy = true;
      try {
        const body = {
          text: this.publishForm.text,
          image_url: this.publishForm.image_url || null,
          media_ids: this.publishForm.media_ids || [],
          channels: this.publishForm.channels,
          project_id: this.publishForm.project_id ? parseInt(this.publishForm.project_id, 10) : null,
        };
        const r = await fetch('/api/marketing/publish', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        }).then(res => res.json());
        this.publishJobId = r.job_id;
        this.publishJobStatus = r.status || 'queued';
        Cockpit.toast('Publicatie gestart (job #' + r.job_id + ')', 'success');
        this.pollPublishJob(r.job_id);
        await this.loadPublishHistory();
      } catch (e) {
        Cockpit.toast('Publicatie mislukt', 'error');
      } finally { this.publishBusy = false; }
    },
    pollPublishJob(jobId) {
      let attempts = 0;
      const tick = async () => {
        attempts++;
        try {
          const r = await fetch('/api/marketing/publish/' + jobId).then(res => res.json());
          const job = r.job || {};
          this.publishJobStatus = job.status || '';
          if (job.status === 'completed' || job.status === 'failed' || attempts > 30) {
            await this.loadPublishHistory();
            Cockpit.toast('Job #' + jobId + ': ' + job.status, job.status === 'completed' ? 'success' : 'info');
            return;
          }
        } catch (e) { return; }
        setTimeout(tick, 2000);
      };
      setTimeout(tick, 1500);
    },
  };
}
</script>
{% endblock %}