// AdminMore.jsx — kalan admin tab'leri
// Catalog Gaps, Supplier Opportunities, Freshness, Merchandising,
// AI Insights, SEO Opps, Trends, Replays

// =====================================================================
// CATALOG GAPS — pipeline (kanban benzeri)
function AdminCatalogGaps() {
  const stages = {
    detected: {
      label: 'Tespit edildi', color: 'var(--km-bad)',
      items: [
        { term: 'vetus pruva iticisi 65 kgf', demand: 412, gmv: 480_000, comp: '3 rakipte', requestedBy: 28 },
        { term: 'simrad nss evo3 16"', demand: 304, gmv: 920_000, comp: '2 rakipte', requestedBy: 18 },
        { term: 'raymarine st60 hız sensörü', demand: 287, gmv: 84_000, comp: '4 rakipte', requestedBy: 22 },
        { term: 'mercury 4 zamanlı yağ 10w-30', demand: 211, gmv: 38_000, comp: '5 rakipte', requestedBy: 14 },
      ],
    },
    requested: {
      label: 'Tedarikçiden istendi', color: 'var(--km-warn)',
      items: [
        { term: 'quick gypsy 8 mm', demand: 156, gmv: 12_000, comp: '2 rakipte', requestedBy: 9 },
        { term: 'lewmar v3 windlass', demand: 138, gmv: 220_000, comp: '3 rakipte', requestedBy: 11 },
      ],
    },
    mapping: {
      label: 'Eşleştirme bekliyor', color: 'var(--km-deep-2)',
      items: [
        { term: 'garmin gpsmap 8412', demand: 98, gmv: 340_000, comp: '1 rakipte', requestedBy: 7 },
        { term: 'raymarine quantum 2 radar', demand: 87, gmv: 180_000, comp: '2 rakipte', requestedBy: 5 },
      ],
    },
    imported: {
      label: 'Katalogda', color: 'var(--km-good)',
      items: [
        { term: 'yanmar 3ym30 yağ filtresi', demand: 142, gmv: 21_000, comp: '5 rakipte', requestedBy: 12 },
        { term: 'rule 1500 gph pompa', demand: 89, gmv: 8_000, comp: '4 rakipte', requestedBy: 6 },
      ],
    },
  };
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Açık talep</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>14</div><span className="kpi__delta kpi__delta--up">↑ 3 / 7g</span></div>
        <div className="kpi"><div className="kpi__head"><span>Aylık potansiyel GMV</span></div><div className="kpi__val tabular">₺2,3M</div></div>
        <div className="kpi"><div className="kpi__head"><span>30 günde import</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-good)' }}>21</div></div>
        <div className="kpi"><div className="kpi__head"><span>Ort. devir süresi</span></div><div className="kpi__val tabular">8<small style={{ fontSize: 14, color: 'var(--km-ink-500)' }}> gün</small></div></div>
      </div>

      <div className="panel" style={{ padding: 'var(--s-4)' }}>
        <div className="panel__head" style={{ padding: '0 var(--s-3) var(--s-4)' }}>
          <div><h2>Katalog açıkları · pipeline</h2><div className="panel__sub">Sıfır-sonuç sorgular → tedarikçi → ürün ekleme akışı</div></div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn--ghost btn--sm"><Icon name="filter" size={12}/> Kategori</button>
            <button className="btn btn--primary btn--sm">Yeni açık ekle</button>
          </div>
        </div>
        <div className="kanban">
          {Object.entries(stages).map(([k, s]) => (
            <div className="kanban__col" key={k}>
              <div className="kanban__head" style={{ borderTopColor: s.color }}>
                <span>{s.label}</span>
                <span className="kanban__count tabular">{s.items.length}</span>
              </div>
              <div className="kanban__body">
                {s.items.map((it, i) => (
                  <div className="kanban__card" key={i}>
                    <div className="kanban__term">"{it.term}"</div>
                    <div className="kanban__meta">
                      <span><strong className="tabular">{it.demand}</strong> aylık sorgu</span>
                      <span className="kanban__sep">·</span>
                      <span className="tabular">₺{formatNum(it.gmv)}</span>
                    </div>
                    <div className="kanban__foot">
                      <span><Icon name="check-circle" size={10} stroke={2}/> {it.comp}</span>
                      <span>{it.requestedBy} kullanıcı talep etti</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// =====================================================================
// SUPPLIER OPPORTUNITIES
function AdminSupplierOps() {
  const opps = [
    { sku: 'Vetus bow thruster 35kgf', monthly: 1240, gmv: 480_000, supplier: 'Marinex', score: 92, sent: false },
    { sku: 'Simrad NSS Evo3 16"',     monthly: 840, gmv: 920_000, supplier: 'Navitech',  score: 88, sent: true },
    { sku: 'Garmin GPSMAP 8412',       monthly: 620, gmv: 340_000, supplier: 'East Marine',score: 84, sent: false },
    { sku: 'Lewmar V3 vinç',           monthly: 410, gmv: 220_000, supplier: 'Marin Trade',score: 78, sent: false },
    { sku: 'Raymarine Quantum 2 radar',monthly: 380, gmv: 180_000, supplier: 'East Marine',score: 72, sent: false },
    { sku: 'Mercury 4-strk 10w-30',    monthly: 1240,gmv: 38_000,  supplier: 'Yat Store',  score: 68, sent: true },
  ];
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="partner" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">Tedarikçi fırsat motoru</div>
          <p className="ai-banner__text">
            Sistem "çok aranıyor ama katalogda yok" eşleşmesini tedarikçiye otomatik teklif olarak çevirir. Toplam <strong>{opps.length}</strong> aktif fırsat, tahmini aylık <strong className="tabular">~₺{formatNum(opps.reduce((s, o) => s + o.gmv, 0))}</strong> potansiyel.
          </p>
        </div>
        <button className="btn btn--accent btn--sm"><Icon name="sparkle" size={12}/> Toplu mail oluştur</button>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Aktif satıcı fırsatları</h2><div className="panel__sub">Match skoru = arama hacmi × marj × tedarikçi yakınlığı</div></div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn--ghost btn--sm">CSV export</button>
          </div>
        </div>
        <table className="data-table">
          <thead><tr><th>Ürün / SKU</th><th>Aylık arama</th><th>Tahmini GMV</th><th>Önerilen satıcı</th><th>Match skoru</th><th></th></tr></thead>
          <tbody>
            {opps.map((o, i) => (
              <tr key={i}>
                <td><strong>{o.sku}</strong></td>
                <td className="tabular">{formatNum(o.monthly)}</td>
                <td className="tabular" style={{ fontWeight: 600 }}>₺{formatNum(o.gmv)}</td>
                <td>{o.supplier}</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="hbar__track" style={{ background: 'var(--km-paper-3)', width: 80 }}>
                      <div className="hbar__fill" style={{ width: o.score + '%', background: 'var(--km-deep-2)' }}/>
                    </div>
                    <span className="tabular" style={{ fontSize: 12, fontWeight: 600 }}>{o.score}</span>
                  </div>
                </td>
                <td>
                  {o.sent ? (
                    <span style={{ fontSize: 12, color: 'var(--km-good)' }}><span className="dot dot--good"/>Mail gönderildi</span>
                  ) : (
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button className="btn btn--ghost btn--sm">WhatsApp</button>
                      <button className="btn btn--primary btn--sm">E-posta</button>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// FRESHNESS — inventory health
function AdminFreshness() {
  const sources = [
    { src: 'East Marine',  age: 0.5, skuCount: 4820, broken: 0, status: 'good' },
    { src: 'Marinex',      age: 2.0, skuCount: 1240, broken: 0, status: 'good' },
    { src: 'Deniz Marketi',age: 1.2, skuCount: 980,  broken: 2, status: 'good' },
    { src: 'Yat Store',    age: 4.0, skuCount: 1640, broken: 0, status: 'good' },
    { src: 'Marin Trade',  age: 8.0, skuCount: 420,  broken: 1, status: 'warn' },
    { src: 'Tekne Dünyası',age: 14,  skuCount: 310,  broken: 4, status: 'warn' },
    { src: 'Aqua Marine',  age: 67,  skuCount: 940,  broken: 12,status: 'bad' },
  ];
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Snapshot tazeliği</span></div><div className="kpi__val tabular">%97,4</div><span className="kpi__delta kpi__delta--up">↑ 0,6pp</span></div>
        <div className="kpi"><div className="kpi__head"><span>Bayat &gt; 12h</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-warn)' }}>142</div></div>
        <div className="kpi"><div className="kpi__head"><span>Bayat &gt; 48h</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>28</div></div>
        <div className="kpi"><div className="kpi__head"><span>Broken feed</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>2</div></div>
      </div>

      <div className="panel" style={{ marginBottom: 24 }}>
        <div className="panel__head">
          <div><h2>Satıcı feed sağlığı</h2><div className="panel__sub">Snapshot yaşı &gt; 12 saat uyarı, &gt; 24 saat kritik</div></div>
          <button className="btn btn--accent btn--sm"><Icon name="rss" size={12}/> Tüm feed'leri yeniden çalıştır</button>
        </div>
        <table className="data-table">
          <thead><tr><th>Satıcı</th><th>Snapshot yaşı</th><th>SKU</th><th>Broken link</th><th>Durum</th><th></th></tr></thead>
          <tbody>
            {sources.map((s, i) => (
              <tr key={i}>
                <td><strong>{s.src}</strong></td>
                <td className="tabular" style={{ color: s.age > 12 ? (s.age > 24 ? 'var(--km-bad)' : 'var(--km-warn)') : 'var(--km-ink-700)', fontWeight: s.age > 12 ? 600 : 400 }}>{s.age}h</td>
                <td className="tabular">{formatNum(s.skuCount)}</td>
                <td className="tabular" style={{ color: s.broken > 0 ? 'var(--km-bad)' : 'var(--km-ink-500)' }}>{s.broken}</td>
                <td><span className={`dot dot--${s.status}`}/>{s.status === 'good' ? 'normal' : s.status === 'warn' ? 'uyarı' : 'kritik'}</td>
                <td><button className="btn btn--ghost btn--sm">Restart</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="admin-grid">
        <div className="panel">
          <div className="panel__head"><div><h2>Eksik veri özeti</h2></div></div>
          <div className="hbars">
            <HBar label="Eksik resim" value={3640} max={5000} color="var(--km-warn)"/>
            <HBar label="Eksik fiyat" value={142}  max={5000} color="var(--km-bad)"/>
            <HBar label="Eksik stok bilgisi" value={420} max={5000} color="var(--km-accent-2)"/>
            <HBar label="Eksik kargo süresi" value={680} max={5000} color="var(--km-deep-2)"/>
            <HBar label="Eksik SKU normalize" value={210} max={5000} color="var(--km-deep)"/>
          </div>
        </div>
        <div className="panel">
          <div className="panel__head"><div><h2>İnaktif satıcılar</h2></div></div>
          <table className="data-table">
            <thead><tr><th>Satıcı</th><th>Son tarama</th></tr></thead>
            <tbody>
              <tr><td><strong>Liman Marin</strong></td><td className="tabular">14 gün önce</td></tr>
              <tr><td><strong>Çeşme Tekne</strong></td><td className="tabular">28 gün önce</td></tr>
              <tr><td><strong>Pendik Marin</strong></td><td className="tabular">42 gün önce</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

// =====================================================================
// SEARCH MERCHANDISING
function AdminMerchandising() {
  const [sub, setSub] = React.useState('synonyms');
  const synonyms = [
    { term: 'garmin echomap',  aliases: 'echomap, garmin chartplotter, garmin balık bulucu', uses: 1240, status: 'active' },
    { term: 'lewmar windlass', aliases: 'lewmar vinç, lewmar çapa vinci, v700', uses: 890, status: 'active' },
    { term: 'simrad nss evo3', aliases: 'nss evo, evo3, simrad evo3', uses: 304, status: 'pending' },
    { term: 'mercury yağ',     aliases: 'mercury motor yağı, 4-stroke yağ', uses: 1420, status: 'pending' },
  ];
  const boosts = [
    { match: 'kategori:elektronik · marka:garmin', boost: 1.4, until: '31 Mayıs', reason: 'Yetkili distribütör' },
    { match: 'marka:raymarine',     boost: 1.2, until: 'kalıcı', reason: 'Stok kapsamı yüksek' },
    { match: 'kategori:guvenlik',   boost: 1.6, until: '20 Hazr.',reason: 'Sezon başı kampanya' },
  ];
  const pinned = [
    { query: 'balık bulucu',  product: 'Garmin Echomap UHD2 92sv', pos: 1 },
    { query: 'çapa vinci',    product: 'Lewmar V700 Vinç',         pos: 1 },
    { query: 'sintine pompası',product: 'Rule 1500 GPH',           pos: 2 },
  ];
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="filter" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">Search merchandising console</div>
          <p className="ai-banner__text">Synonym, boost, pinning, kategori redirect ve no-result fallback'leri tek panelden yönet. Değişiklikler 60 saniye içinde index'e yansır.</p>
        </div>
      </div>

      <div className="seg" style={{ marginBottom: 20 }}>
        <button className={`seg__btn ${sub === 'synonyms' ? 'on' : ''}`} onClick={() => setSub('synonyms')}>Synonym <span className="tabular">{synonyms.length}</span></button>
        <button className={`seg__btn ${sub === 'boost' ? 'on' : ''}`} onClick={() => setSub('boost')}>Boost & Bury <span className="tabular">{boosts.length}</span></button>
        <button className={`seg__btn ${sub === 'pinned' ? 'on' : ''}`} onClick={() => setSub('pinned')}>Pinned <span className="tabular">{pinned.length}</span></button>
        <button className={`seg__btn ${sub === 'redirect' ? 'on' : ''}`} onClick={() => setSub('redirect')}>Redirect</button>
        <button className={`seg__btn ${sub === 'fallback' ? 'on' : ''}`} onClick={() => setSub('fallback')}>No-result</button>
      </div>

      {sub === 'synonyms' && (
        <div className="panel">
          <div className="panel__head">
            <div><h2>Synonym dictionary</h2><div className="panel__sub">Bidirectional eşleşmeler</div></div>
            <button className="btn btn--primary btn--sm"><Icon name="plus" size={12}/> Yeni synonym</button>
          </div>
          <table className="data-table">
            <thead><tr><th>Canonical</th><th>Alias'lar</th><th>30g kullanım</th><th>Durum</th><th></th></tr></thead>
            <tbody>
              {synonyms.map((s, i) => (
                <tr key={i}>
                  <td><strong>{s.term}</strong></td>
                  <td style={{ color: 'var(--km-ink-500)', fontSize: 13 }}>{s.aliases}</td>
                  <td className="tabular">{formatNum(s.uses)}</td>
                  <td>{s.status === 'active' ? <><span className="dot dot--good"/>Aktif</> : <><span className="dot dot--warn"/>Onay bekliyor</>}</td>
                  <td><button className="btn btn--ghost btn--sm">Düzenle</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {sub === 'boost' && (
        <div className="panel">
          <div className="panel__head"><div><h2>Boost & bury kuralları</h2><div className="panel__sub">Ranking skoruna çarpılır</div></div><button className="btn btn--primary btn--sm"><Icon name="plus" size={12}/> Yeni kural</button></div>
          <table className="data-table">
            <thead><tr><th>Eşleşme</th><th>Çarpan</th><th>Geçerli</th><th>Sebep</th><th></th></tr></thead>
            <tbody>
              {boosts.map((b, i) => (
                <tr key={i}>
                  <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{b.match}</td>
                  <td className="tabular" style={{ fontWeight: 600, color: b.boost > 1 ? 'var(--km-good)' : 'var(--km-bad)' }}>×{b.boost}</td>
                  <td style={{ color: 'var(--km-ink-500)' }}>{b.until}</td>
                  <td style={{ fontSize: 13 }}>{b.reason}</td>
                  <td><button className="btn btn--ghost btn--sm">Düzenle</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {sub === 'pinned' && (
        <div className="panel">
          <div className="panel__head"><div><h2>Pinned products</h2><div className="panel__sub">Belirli sorgu için sabitlenmiş pozisyonlar</div></div></div>
          <table className="data-table">
            <thead><tr><th>Sorgu</th><th>Ürün</th><th>Pozisyon</th><th></th></tr></thead>
            <tbody>
              {pinned.map((p, i) => (
                <tr key={i}>
                  <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>"{p.query}"</td>
                  <td><strong>{p.product}</strong></td>
                  <td className="tabular">#{p.pos}</td>
                  <td><button className="btn btn--ghost btn--sm">Kaldır</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {sub === 'redirect' && (
        <div className="panel">
          <div className="panel__head"><div><h2>Keyword redirect</h2><div className="panel__sub">Belirli sorgu → kategori/marka/PDP'ye yönlendirir</div></div></div>
          <table className="data-table">
            <thead><tr><th>Sorgu</th><th>Hedef</th><th>30g hit</th></tr></thead>
            <tbody>
              <tr><td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>"akü"</td><td>kategori: tekne-akusu</td><td className="tabular">820</td></tr>
              <tr><td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>"vhf telsiz"</td><td>kategori: guvenlik</td><td className="tabular">412</td></tr>
              <tr><td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>"echomap 9"</td><td>PDP: garmin-echomap-uhd2-92sv</td><td className="tabular">142</td></tr>
            </tbody>
          </table>
        </div>
      )}

      {sub === 'fallback' && (
        <div className="panel">
          <div className="panel__head"><div><h2>No-result fallback</h2><div className="panel__sub">Sıfır sonuçta gösterilen öneriler</div></div></div>
          <p style={{ fontSize: 13, color: 'var(--km-ink-600)', maxWidth: 540 }}>Şu an global fallback aktif: "Benzer ürünler" ile en popüler 4 kategori önerisi. Sorgu bazlı özel fallback eklemek için <a href="#" style={{ color: 'var(--km-deep)' }}>yeni kural ekle</a>.</p>
        </div>
      )}
    </>
  );
}

// =====================================================================
// AI INSIGHTS — LLM özet
function AdminAiInsights() {
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="sparkle" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">AI query intelligence</div>
          <p className="ai-banner__text">LLM, son 72 saatte arama dilini, intent cluster'ları ve yanlış yazımları analiz eder. Her sabah 09:00 brifingi.</p>
        </div>
        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>Son brifing 09:00</span>
      </div>

      <div className="admin-grid">
        <div className="panel">
          <div className="panel__head"><div><h2>72 saatlik özet</h2></div></div>
          <div className="ai-quote">
            <Icon name="sparkle" size={14} stroke={2} style={{ flexShrink: 0, color: 'var(--km-accent-2)', marginTop: 3 }}/>
            <div>
              <p style={{ marginBottom: 12, fontSize: 14, lineHeight: 1.55 }}>
                Kullanıcılar son 72 saatte daha çok <strong>enerji & verimlilik</strong> odaklı arama yapıyor. Victron + lityum kombinasyonu %180, Mastervolt %94 yükseliş.
              </p>
              <p style={{ marginBottom: 12, fontSize: 14, lineHeight: 1.55 }}>
                Sezon başı sinyali: <strong>antifouling boya</strong> aramaları %62 arttı. Quicksilver baskın ama "Hempel" markalı sorgular hızla geliyor — katalogda yok.
              </p>
              <p style={{ fontSize: 14, lineHeight: 1.55 }}>
                Kullanıcı dili değişiyor: model numarası yerine kullanıma göre arama ("9 inç ekran balık bulucu", "yelkenli için akü"). Kategori facet'lerini bu yönde güncellemek mantıklı.
              </p>
            </div>
          </div>
        </div>
        <div className="panel">
          <div className="panel__head"><div><h2>Intent cluster'ları</h2><div className="panel__sub">Son 7 gün</div></div></div>
          <div className="hbars">
            <HBar label="Yedek parça (OEM)" value={32} max={32} color="var(--km-deep)" right="%32"/>
            <HBar label="Yeni kurulum"       value={24} max={32} color="var(--km-deep-2)" right="%24"/>
            <HBar label="Karşılaştırma"      value={18} max={32} color="var(--km-deep-2)" right="%18"/>
            <HBar label="Bakım / kimyasal"   value={14} max={32} color="var(--km-deep-2)" right="%14"/>
            <HBar label="Acil arıza"         value={8}  max={32} color="var(--km-bad)" right="%8"/>
            <HBar label="Genel keşif"        value={4}  max={32} color="var(--km-ink-400)" right="%4"/>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel__head"><div><h2>Yanlış yazım kümeleri</h2><div className="panel__sub">LLM normalize önerisi · onayınıza sunuldu</div></div></div>
        <table className="data-table">
          <thead><tr><th>Cluster</th><th>Örnekler</th><th>Sorgu</th><th>Önerilen canonical</th><th></th></tr></thead>
          <tbody>
            <tr><td><strong>garmin echomap</strong></td><td style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>gramin echomap, garmin ecomap, garmin ekomap</td><td className="tabular">142</td><td>garmin echomap</td><td><button className="btn btn--primary btn--sm">Onayla</button></td></tr>
            <tr><td><strong>raymarine axiom</strong></td><td style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>raymarne axiom, reymarine axiom</td><td className="tabular">98</td><td>raymarine axiom</td><td><button className="btn btn--primary btn--sm">Onayla</button></td></tr>
            <tr><td><strong>lewmar windlass</strong></td><td style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>lewmer, levmar, lemwar windlass</td><td className="tabular">62</td><td>lewmar windlass</td><td><button className="btn btn--primary btn--sm">Onayla</button></td></tr>
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// SEO OPPORTUNITIES
function AdminSeoOps() {
  const opps = [
    { kw: 'raymarine st60 hız sensörü', vol: 1240, diff: 22, intent: 'Yüksek', has: false, eta: 'AI 2 dk' },
    { kw: 'mercury 4 zamanlı yağ',       vol: 1420, diff: 14, intent: 'Yüksek', has: false, eta: 'AI 2 dk' },
    { kw: 'simrad nss evo3 16',          vol: 304,  diff: 38, intent: 'Çok yüksek', has: false, eta: 'AI 3 dk' },
    { kw: 'tekne aküsü nasıl seçilir',   vol: 2140, diff: 28, intent: 'Bilgi',   has: false, eta: 'Rehber' },
    { kw: 'çapa vinci kurulum',          vol: 820,  diff: 18, intent: 'Bilgi',   has: false, eta: 'Rehber' },
    { kw: 'en ucuz balık bulucu',        vol: 1820, diff: 32, intent: 'Yüksek', has: true,  eta: 'Mevcut' },
  ];
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="search" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">SEO opportunity engine</div>
          <p className="ai-banner__text">SERP boşluğu + arama hacmi + intent skorunu birleştirerek yeni landing page önerir. AI tek tıkla taslak üretir.</p>
        </div>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Açık fırsat</span></div><div className="kpi__val tabular">{opps.filter(o => !o.has).length}</div></div>
        <div className="kpi"><div className="kpi__head"><span>Toplam hacim / ay</span></div><div className="kpi__val tabular">{formatNum(opps.filter(o => !o.has).reduce((s, o) => s + o.vol, 0))}</div></div>
        <div className="kpi"><div className="kpi__head"><span>Ort. zorluk</span></div><div className="kpi__val tabular">24<small style={{ fontSize: 14, color: 'var(--km-ink-500)' }}>/100</small></div></div>
        <div className="kpi"><div className="kpi__head"><span>30g üretilen sayfa</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-good)' }}>14</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Keyword fırsatları</h2><div className="panel__sub">Trafik / zorluk × intent skoruna göre sıralı</div></div>
          <button className="btn btn--accent btn--sm"><Icon name="sparkle" size={12}/> Toplu üret</button>
        </div>
        <table className="data-table">
          <thead><tr><th>Anahtar kelime</th><th>Aylık hacim</th><th>Zorluk</th><th>Intent</th><th>Durum</th><th></th></tr></thead>
          <tbody>
            {opps.map((o, i) => (
              <tr key={i}>
                <td><strong>{o.kw}</strong></td>
                <td className="tabular">{formatNum(o.vol)}</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="hbar__track" style={{ background: 'var(--km-paper-3)', width: 60 }}>
                      <div className="hbar__fill" style={{ width: o.diff + '%', background: o.diff > 30 ? 'var(--km-bad)' : o.diff > 15 ? 'var(--km-warn)' : 'var(--km-good)' }}/>
                    </div>
                    <span className="tabular" style={{ fontSize: 12 }}>{o.diff}</span>
                  </div>
                </td>
                <td>{o.intent}</td>
                <td>{o.has ? <><span className="dot dot--good"/>Mevcut</> : <><span className="dot dot--warn"/>Yok</>}</td>
                <td>{!o.has && <button className="btn btn--primary btn--sm"><Icon name="sparkle" size={11}/> {o.eta} ile üret</button>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// TREND RADAR
function AdminTrends() {
  const rising = [
    { kw: 'victron lityum akü',   chg: 180, vol: 412 },
    { kw: 'raymarine st60',       chg: 340, vol: 287 },
    { kw: 'hempel antifouling',   chg: 220, vol: 198 },
    { kw: 'mastervolt inverter',  chg: 94,  vol: 142 },
    { kw: 'yelkenli için akü',    chg: 78,  vol: 320 },
  ];
  const falling = [
    { kw: 'humminbird helix',    chg: -42, vol: 88 },
    { kw: 'flir cihazları',      chg: -28, vol: 64 },
    { kw: 'standart horizon vhf',chg: -22, vol: 142 },
  ];
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="flame" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">Trend radarı</div>
          <p className="ai-banner__text">7 / 30 / 90 günlük arama hacmi karşılaştırması · sezonluk graf · yıldan yıla (Yoy) sapma.</p>
        </div>
        <div className="seg">
          <button className="seg__btn">7g</button>
          <button className="seg__btn on">30g</button>
          <button className="seg__btn">90g</button>
        </div>
      </div>

      <div className="admin-grid">
        <div className="panel">
          <div className="panel__head"><div><h2><Icon name="flame" size={14} stroke={2} style={{ color: 'var(--km-bad)' }}/> Yükselenler</h2><div className="panel__sub">30 günlük değişim</div></div></div>
          <table className="data-table">
            <thead><tr><th>Sorgu</th><th>Değişim</th><th>Aylık hacim</th></tr></thead>
            <tbody>
              {rising.map((r, i) => (
                <tr key={i}>
                  <td><strong>{r.kw}</strong></td>
                  <td className="tabular" style={{ color: 'var(--km-good)', fontWeight: 600 }}>↑ %{r.chg}</td>
                  <td className="tabular">{formatNum(r.vol)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="panel">
          <div className="panel__head"><div><h2>Düşenler</h2></div></div>
          <table className="data-table">
            <thead><tr><th>Sorgu</th><th>Değişim</th><th>Aylık hacim</th></tr></thead>
            <tbody>
              {falling.map((r, i) => (
                <tr key={i}>
                  <td><strong>{r.kw}</strong></td>
                  <td className="tabular" style={{ color: 'var(--km-bad)', fontWeight: 600 }}>↓ %{Math.abs(r.chg)}</td>
                  <td className="tabular">{formatNum(r.vol)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="panel">
        <div className="panel__head"><div><h2>Sezon kalibrasyonu · son 12 ay</h2><div className="panel__sub">Mayıs öncesi 2 hafta + Eylül sonu pik aktivite</div></div></div>
        <div className="season-strip">
          {['Oca','Şub','Mar','Nis','May','Haz','Tem','Ağu','Eyl','Eki','Kas','Ara'].map((m, i) => {
            const h = [22,28,42,68,92,78,64,58,84,52,32,26][i];
            return (
              <div className="season-strip__bar" key={i}>
                <div className="season-strip__fill" style={{ height: h + '%', background: h > 70 ? 'var(--km-bad)' : h > 50 ? 'var(--km-accent-2)' : 'var(--km-deep-2)' }}/>
                <span>{m}</span>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

// =====================================================================
// SEARCH REPLAYS
function AdminReplays() {
  const sessions = [
    { id: 'sess-a4z9', when: '14:01', tag: 'rage', steps: [
      'arama: "garmin balık bulucu"',
      'tıklama: filtre · 9 inç',
      'arama: "garmin balıkbulucu 9 inç"',
      'sıfır sonuç',
      'arama: "garmin 92sv"',
      'PDP açıldı', 'bounce 8sn'
    ], device: 'iOS · Safari' },
    { id: 'sess-b7c1', when: '13:48', tag: 'fail', steps: [
      'arama: "mercury yağ"', 'sonuç: Quicksilver bakım', 'geri', 'arama: "mercury motor yağı"',
      'sıfır sonuç', 'bounce'
    ], device: 'Android · Chrome' },
    { id: 'sess-c2k8', when: '13:32', tag: 'repeat', steps: [
      'arama: "lewmar v700"', 'PDP', 'satıcı seçenekleri görüntülendi',
      'geri', 'arama: "v700 vinç"', 'PDP', 'outbound: East Marine'
    ], device: 'Desktop · Chrome' },
  ];
  const [active, setActive] = React.useState(0);
  const sess = sessions[active];
  return (
    <>
      <div className="ai-banner">
        <div className="ai-banner__icon"><Icon name="link" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">Arama replay · session viewer</div>
          <p className="ai-banner__text">Failed journey, rage search ve repeat search session'lar anonim olarak kayıt edilir. Etiketlere göre filtrele, kullanıcının yolculuğunu adım adım izle.</p>
        </div>
      </div>

      <div className="replay-grid">
        <aside className="panel" style={{ padding: 0 }}>
          <div style={{ padding: 'var(--s-4) var(--s-4) 0' }}>
            <div className="panel__head" style={{ marginBottom: 0 }}>
              <div><h2>Session'lar</h2><div className="panel__sub">Bugün · 86 kayıt</div></div>
            </div>
          </div>
          <div className="replay-list">
            {sessions.map((s, i) => (
              <button key={i} className={`replay-list__item ${i === active ? 'on' : ''}`} onClick={() => setActive(i)}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                  <span className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--km-ink-500)' }}>{s.id}</span>
                  <span className={`replay-tag replay-tag--${s.tag}`}>{s.tag === 'rage' ? 'rage' : s.tag === 'fail' ? 'failed' : 'repeat'}</span>
                </div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.steps[0]}</div>
                <div style={{ fontSize: 11, color: 'var(--km-ink-500)', marginTop: 4 }}>{s.when} · {s.device}</div>
              </button>
            ))}
          </div>
        </aside>

        <div className="panel">
          <div className="panel__head">
            <div><h2>{sess.id}</h2><div className="panel__sub">{sess.device} · {sess.when}</div></div>
            <span className={`replay-tag replay-tag--${sess.tag}`}>{sess.tag}</span>
          </div>
          <div className="replay-timeline">
            {sess.steps.map((step, i) => (
              <div className="replay-step" key={i}>
                <div className="replay-step__dot"/>
                <div className="replay-step__body">
                  <div className="replay-step__time">+ {i * 4 + 1}s</div>
                  <div className="replay-step__text">{step}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: 16, background: 'var(--km-paper-2)', borderRadius: 8, fontSize: 13, color: 'var(--km-ink-600)' }}>
            <strong>AI yorum:</strong> Kullanıcı doğru ürünü ararken "balıkbulucu" yazımı yüzünden sıfır sonuca düştü. Synonym eklenseydi journey 3 adımda biterdi.
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, {
  AdminCatalogGaps, AdminSupplierOps, AdminFreshness,
  AdminMerchandising, AdminAiInsights, AdminSeoOps, AdminTrends, AdminReplays,
});