<div class="page active" id="page-overview">
  <div class="ph">
    <div><div class="pt" id="ov-title"><?= $isAdmin?'Super Cerebro':htmlspecialchars($clients[0]['name']??'Mi cuenta') ?></div><div class="ps" id="ov-sub">Panel general · <?= date('F Y') ?></div></div>
    <div class="dbs" id="ov-period-btns" style="<?= $isAdmin?'display:none':'' ?>">
      <button class="db" data-click="loadOverviewMetrics|__client|7d">7D</button>
      <button class="db active" data-click="loadOverviewMetrics|__client|30d">30D</button>
      <button class="db" data-click="loadOverviewMetrics|__client|90d">90D</button>
    </div>
  </div>

  <?php if($isAdmin && count($clients)===0): ?>
  <!-- ESTADO VACÍO: sin clientes registrados -->
  <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px;text-align:center;gap:14px">
    <div style="font-size:52px">🚀</div>
    <div style="font-family:var(--fh);font-size:22px;font-weight:700">¡Bienvenido a SuperCerebro!</div>
    <div style="font-size:14px;color:var(--m);max-width:400px;line-height:1.7">Registra tu primer cliente para conectar sus campañas de Meta Ads y Google Ads, keywords SEO y sitio web — todo en un solo panel en tiempo real.</div>
    <a href="clients.php" style="text-decoration:none;margin-top:6px"><button style="padding:13px 28px;border-radius:9px;background:var(--red);border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fh);letter-spacing:.3px">+ Registrar primer cliente</button></a>
  </div>
  <?php else: ?>

  <?php if($isAdmin): ?>
  <!-- BANNER: Selecciona cliente (solo admin, se oculta al elegir uno) -->
  <div id="ov-select-banner" style="background:linear-gradient(120deg,rgba(232,39,42,.07) 0%,rgba(74,158,248,.06) 100%);border:1px solid var(--br2);border-radius:13px;padding:22px 24px;display:flex;align-items:center;gap:18px">
    <div style="font-size:36px;flex-shrink:0">👆</div>
    <div style="flex:1">
      <div style="font-family:var(--fh);font-size:16px;font-weight:700;margin-bottom:4px">Elige un cliente para ver sus métricas en tiempo real</div>
      <div style="font-size:13px;color:var(--m)">Selecciona uno de tus <strong style="color:var(--t)"><?= count($clients) ?> cliente<?= count($clients)!==1?'s':'' ?></strong> en la lista de abajo o desde la barra superior.</div>
    </div>
    <div style="display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap">
      <a href="clients.php" style="text-decoration:none"><button style="padding:9px 18px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:12px;cursor:pointer;font-family:var(--fb)">+ Nuevo cliente</button></a>
      <button data-click="_scObOpenCurrentClient" style="padding:9px 18px;border-radius:7px;background:rgba(74,158,248,.1);border:1px solid rgba(74,158,248,.25);color:var(--b);font-size:12px;cursor:pointer;font-family:var(--fb)">⚙ Configurar cliente</button>
    </div>
  </div>

  <!-- Panel de alertas proactivas AVI -->
  <div id="ov-proactive-alerts" style="display:none;margin-bottom:12px"></div>

  <!-- LISTA DE CLIENTES -->
  <div id="all-sec">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 2px;flex-wrap:wrap;gap:6px">
      <div style="display:flex;gap:5px;align-items:center;flex-wrap:wrap">
        <button data-click="filterSemaforo|all" id="sf-btn-all" class="sf-btn sf-active" style="padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--fb);border:1px solid var(--br2);background:var(--bg3);color:var(--t);transition:all .15s">Todos</button>
        <button data-click="filterSemaforo|meta" id="sf-btn-meta" class="sf-btn" style="padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--fb);border:1px solid transparent;background:rgba(74,158,248,.1);color:var(--b);transition:all .15s">Meta</button>
        <button data-click="filterSemaforo|google" id="sf-btn-google" class="sf-btn" style="padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--fb);border:1px solid transparent;background:rgba(232,39,42,.08);color:var(--red);transition:all .15s">Google</button>
        <button data-click="filterSemaforo|seo" id="sf-btn-seo" class="sf-btn" style="padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--fb);border:1px solid transparent;background:rgba(34,201,122,.1);color:var(--g);transition:all .15s">SEO</button>
      </div>
      <div style="display:flex;align-items:center;gap:8px">
        <span id="semaforo-ts" style="font-size:10px;color:var(--m)"></span>
        <button id="avi-killswitch-btn" data-click="toggleAutomations|__el" title="Pausar/activar todas las automatizaciones AVI" style="padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--fb);border:1px solid var(--br2);background:var(--bg3);color:var(--m)">▶ AVI Activo</button>
        <button data-click="exportSemaforoCSV" title="Exportar CSV" style="padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--fb);border:1px solid var(--br2);background:var(--bg3);color:var(--m)">⬇ CSV</button>
      </div>
    </div>
    <div class="clist" id="clist">
      <?php foreach($clients as $c): $svcs=array_filter(explode(',',$c['services'])); $cid=(int)$c['id']; ?>
      <div class="crow" id="crow-<?= $cid ?>" data-click="selectClient|<?= $cid ?>" style="cursor:pointer">
        <div class="crav" style="background:<?= htmlspecialchars($c['color']) ?>18;color:<?= htmlspecialchars($c['color']) ?>"><?= strtoupper(substr($c['name'],0,2)) ?></div>
        <div class="crinfo">
          <div class="crname"><?= htmlspecialchars($c['name']) ?></div>
          <div class="crdetail"><?= htmlspecialchars($c['industry']) ?> · <?= htmlspecialchars($c['url']) ?></div>
        </div>
        <div class="crtags"><?php foreach($svcs as $s) echo '<span class="ctag t'.$s[0].'">'.strtoupper($s).'</span>'; ?></div>
        <div style="display:flex;align-items:center;gap:14px">
          <div id="semaforo-<?= $cid ?>" style="display:flex;gap:5px;align-items:center">
            <span style="font-size:10px;color:var(--m)">…</span>
          </div>
          <span style="color:var(--m);font-size:18px">›</span>
        </div>
      </div>
      <?php endforeach ?>
    </div>
  </div>
  <?php endif ?>

  <!-- VISTA CLIENTE SELECCIONADO -->
  <div id="single-sec" style="<?= $isAdmin?'display:none':'' ?>"><div id="chc-wrap"></div></div>

  <!-- MÉTRICAS + GRÁFICAS (ocultas para admin hasta elegir cliente) -->
  <div id="ov-data-wrap" style="display:<?= $isAdmin?'none':'flex' ?>;flex-direction:column;gap:16px">
    <!-- SNAPSHOT por canal (Meta / Google / SEO) -->
    <div class="card" id="ov-snapshot-card" style="display:none">
      <div class="chd">
        <div class="ctit">📊 <span data-i18n="dash.active_campaigns">Campañas activas</span></div>
        <button data-click="renderOvSnapshot" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)" data-i18n="btn.update">↺ Actualizar</button>
      </div>
      <div id="ov-snap-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-top:4px"></div>
    </div>
    <div class="metrics" id="met-row">
      <div class="metric" data-click="showPage|meta" style="cursor:pointer">
        <div class="ml" data-tip="Gasto total Meta Ads en el período seleccionado"><div class="md" style="background:var(--b)"></div><span data-i18n="metric.meta_spend">Meta Ads — Inversión</span></div>
        <div class="mv" id="ov-spend">—</div>
        <div class="mdelta" id="ov-spend-d" style="color:var(--m)"></div>
      </div>
      <div class="metric" data-click="showPage|google" style="cursor:pointer">
        <div class="ml" data-tip="Inversión total en Google Ads en el período seleccionado"><div class="md" style="background:var(--g)"></div><span data-i18n="metric.google_spend">Google Ads — Inversión</span></div>
        <div class="mv" id="ov-roas">—</div>
        <div class="mdelta" id="ov-roas-d" style="color:var(--m)"></div>
      </div>
      <div class="metric" data-click="showPage|seo" style="cursor:pointer">
        <div class="ml" data-tip="Clics orgánicos desde Google Search en el período (sin pagar publicidad)"><div class="md" style="background:var(--y)"></div><span data-i18n="metric.seo_clicks">SEO — Clics orgánicos</span></div>
        <div class="mv" id="ov-organic">—</div>
        <div class="mdelta" id="ov-organic-d" style="color:var(--m)"></div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="<?= $isAdmin?'Clientes activos gestionados en la plataforma':'Keywords posicionadas en el TOP 3 de Google — máxima visibilidad orgánica' ?>"><div class="md" style="background:var(--red)"></div><span data-i18n="<?= $isAdmin?'metric.active_clients':'metric.top3_kw' ?>"><?= $isAdmin?'Clientes activos':'TOP 3 keywords' ?></span></div>
        <div class="mv" id="ov-count"><?= $isAdmin?count($clients):'—' ?></div>
        <div class="mdelta" id="ov-count-d" style="color:var(--m)"></div>
      </div>
    </div>
    <div class="g3">
      <div class="card"><div class="chd"><div class="ctit">📈 Inversión Meta Ads</div></div><div class="cw"><canvas id="chartMain"></canvas></div></div>
      <div class="card"><div class="chd"><div class="ctit"><span data-i18n="dash.active_campaigns">Campañas activas</span></div></div>
        <div id="ov-camps-table" style="font-size:12px;color:var(--m);padding:8px 0;text-align:center" data-i18n="status.select_client">Selecciona un cliente</div>
      </div>
    </div>
    <div class="g2">
      <div class="avi">
        <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name" data-i18n="avi.name">AVI · Asistente DIMARK</div><div class="avi-sub" id="avi-ctx">Análisis inteligente</div></div></div>
        <div id="avi-ins"></div>
        <div class="avi-row">
          <input class="avi-in" id="avi-q" placeholder="Pregúntale algo a AVI..." data-i18n="avi.placeholder" data-i18n-attr="placeholder" onkeydown="if(event.key==='Enter')askAVI('main')">
          <button class="avi-send" data-click="askAVI|main" data-i18n="avi.send">Enviar</button>
        </div>
        <div class="avi-resp" id="avi-resp-main"></div>
      </div>
      <!-- Reporte mensual -->
      <div class="card" id="card-monthly-report">
        <div class="chd">
          <div class="ctit">📋 <span data-i18n="dash.monthly_report">Reporte mensual</span></div>
          <button data-click="generateMonthlyReport" id="btn-monthly-report" style="padding:5px 14px;border-radius:6px;font-size:12px;background:rgba(155,127,244,.15);border:1px solid rgba(155,127,244,.3);color:var(--p);cursor:pointer;font-family:var(--fb);font-weight:600" data-i18n="avi.generate">Generar con AVI →</button>
        </div>
        <div style="font-size:12px;color:var(--m);margin-bottom:10px">Resumen ejecutivo del período: Meta Ads, Google Ads, SEO, sitios web y propuestas activas.</div>
        <div id="monthly-report-result" style="display:none">
          <div id="monthly-report-content" style="font-size:13px;color:var(--t);line-height:1.7;padding:14px;background:var(--bg3);border-radius:8px;max-height:420px;overflow-y:auto"></div>
          <div style="display:flex;gap:6px;margin-top:10px">
            <button data-click="copyMonthlyReport" style="padding:5px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)" data-i18n="avi.copy">Copiar</button>
            <button data-click="generateMonthlyReport" style="padding:5px 12px;border-radius:6px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)" data-i18n="avi.regenerate">↺ Regenerar</button>
          </div>
        </div>
        <div id="monthly-report-status" style="font-size:12px;color:var(--m);text-align:center;padding:4px 0"></div>
      </div>
      <!-- Actividad reciente -->
      <div class="card" id="card-activity">
        <div class="chd">
          <div class="ctit">⚡ <span data-i18n="dash.recent_activity">Actividad reciente</span></div>
          <span id="activity-last-seen" style="font-size:11px;color:var(--m)"></span>
        </div>
        <div id="activity-list" style="font-size:12px;color:var(--m);text-align:center;padding:8px" data-i18n="status.select_client">Selecciona un cliente</div>
      </div>
      <div class="card">
        <div class="chd"><div class="ctit"><span data-i18n="dash.google_campaigns">Google Ads — Campañas</span></div><button class="cact" data-click="showPage|google" data-i18n="btn.see_all">Ver todo →</button></div>
        <div id="ov-google-camps" style="font-size:12px;color:var(--m);text-align:center;padding:8px 0">—</div>
      </div>
    </div>
  </div>
  <?php endif ?>

</div>

<!-- ===== META ADS ===== -->
