// Admin dashboard — kolaymarin operasyon konsolu
// Full implementation: overview, merchants, products, snapshots,
// search analytics, click flow, image catalogue, KVKK audit, settings

function AdminPage() {
  const [tab, setTab] = React.useState('actions');
  const [sideOpen, setSideOpen] = React.useState(false);

  const NAV = [
    { group: null, items: [
      { id: 'actions',   icon: 'sparkle',    label: 'Aksiyon merkezi', badge: '7' },
      { id: 'overview',  icon: 'dashboard',  label: 'Genel görünüm' },
    ]},
    { group: 'Operasyon', items: [
      { id: 'merchants',   icon: 'merchants', label: 'Satıcılar', badge: '3 bekliyor' },
      { id: 'supplierOps', icon: 'partner',   label: 'Tedarikçi fırsatları' },
      { id: 'snapshots',   icon: 'rss',       label: 'Snapshot kuyruğu' },
      { id: 'freshness',   icon: 'clock',     label: 'Veri tazeliği' },
    ]},
    { group: 'Katalog', items: [
      { id: 'products',     icon: 'products', label: 'Ürün kataloğu' },
      { id: 'catalogGaps',  icon: 'warn',     label: 'Katalog açıkları', badge: '14' },
      { id: 'images',       icon: 'image',    label: 'Görsel kataloğu' },
    ]},
    { group: 'Arama & SEO', items: [
      { id: 'analytics',     icon: 'analytics', label: 'Arama analitikleri' },
      { id: 'merchandising', icon: 'filter',    label: 'Search merchandising' },
      { id: 'aiInsights',    icon: 'sparkle',   label: 'AI query intel.' },
      { id: 'seoOps',        icon: 'search',    label: 'SEO fırsatları' },
      { id: 'trends',        icon: 'flame',     label: 'Trend radarı' },
      { id: 'replays',       icon: 'link',      label: 'Arama replay' },
    ]},
    { group: 'Gelir', items: [
      { id: 'clicks',       icon: 'link', label: 'Tıklama akışı' },
      { id: 'revenueLeaks', icon: 'warn', label: 'Gelir kaçakları', badge: '₺142k' },
    ]},
    { group: 'AI lab', items: [
      { id: 'merchandiser', icon: 'sparkle', label: 'AI merchandiser', badge: 'beta' },
      { id: 'autoHeal',     icon: 'shield',  label: 'Auto-healing search' },
    ]},
    { group: 'Sistem', items: [
      { id: 'kvkk',     icon: 'shield',   label: 'KVKK audit' },
      { id: 'settings', icon: 'settings', label: 'Ayarlar' },
    ]},
  ];

  const titleFor = (id) => NAV.flatMap(g => g.items).find(i => i.id === id)?.label || '';

  return (
    <main id="main" data-screen-label="Admin" className="admin-shell">
      <aside className={`admin-side ${sideOpen ? 'admin-side--open' : ''}`}>
        <a href="#/" className="brand">
          <span className="brand__mark"/>
          <span>kolaymarin<small>·admin</small></span>
        </a>

        {NAV.map((g, gi) => (
          <React.Fragment key={gi}>
            {g.group && <div className="admin-side__group">{g.group}</div>}
            <nav className="admin-nav">
              {g.items.map(it => (
                <a key={it.id} href="#"
                   className={tab === it.id ? 'on' : ''}
                   onClick={(e) => { e.preventDefault(); setTab(it.id); setSideOpen(false); }}>
                  <Icon name={it.icon} size={14}/> {it.label}
                  {it.badge && <span className={`admin-nav__badge ${it.id === 'actions' ? 'admin-nav__badge--pulse' : ''} ${it.id === 'revenueLeaks' ? 'admin-nav__badge--bad' : ''}`}>{it.badge}</span>}
                </a>
              ))}
            </nav>
          </React.Fragment>
        ))}

        <div style={{ marginTop: 'auto', paddingTop: 24, fontSize: 11, color: 'var(--km-ink-500)', fontFamily: 'var(--font-mono)' }}>
          Sprint 2 · build #b421
          <br/>v0.4.1-rc
        </div>
      </aside>

      <div className="admin-main">
        <div className="admin-bar">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button className="admin-burger" aria-label="Menü" onClick={() => setSideOpen(v => !v)}>
              <Icon name="menu" size={18}/>
            </button>
            <div>
              <h1>{titleFor(tab)}</h1>
              <p>13 Mayıs 2026 · sistem normal · son güncelleme <span className="tabular">14:02</span></p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div className="admin-search">
              <Icon name="search" size={14}/>
              <input placeholder="Sayfa, ürün, satıcı ara…"/>
              <kbd>⌘K</kbd>
            </div>
            <button className="btn btn--ghost btn--sm">
              <Icon name="rss" size={12}/> Snapshot tetikle
            </button>
            <div className="admin-user">
              <div className="admin-user__avatar">EY</div>
              <div>
                <div className="admin-user__name">Esra Y.</div>
                <div className="admin-user__role">Editör</div>
              </div>
            </div>
          </div>
        </div>

        {tab === 'actions'       && <AdminActions/>}
        {tab === 'overview'      && <AdminOverview/>}
        {tab === 'merchants'     && <AdminMerchants/>}
        {tab === 'supplierOps'   && <AdminSupplierOps/>}
        {tab === 'products'      && <AdminProducts/>}
        {tab === 'catalogGaps'   && <AdminCatalogGaps/>}
        {tab === 'snapshots'     && <AdminSnapshots/>}
        {tab === 'freshness'     && <AdminFreshness/>}
        {tab === 'analytics'     && <AdminAnalytics/>}
        {tab === 'merchandising' && <AdminMerchandising/>}
        {tab === 'aiInsights'    && <AdminAiInsights/>}
        {tab === 'seoOps'        && <AdminSeoOps/>}
        {tab === 'trends'        && <AdminTrends/>}
        {tab === 'replays'       && <AdminReplays/>}
        {tab === 'clicks'        && <AdminClicks/>}
        {tab === 'revenueLeaks'  && <AdminRevenueLeaks/>}
        {tab === 'merchandiser'  && <AdminAiMerchandiser/>}
        {tab === 'autoHeal'      && <AdminAutoHeal/>}
        {tab === 'images'        && <AdminImages/>}
        {tab === 'kvkk'          && <AdminKvkk/>}
        {tab === 'settings'      && <AdminSettings/>}
      </div>
    </main>
  );
}

// =====================================================================
// === Mini sparkline (used by KPIs)
function Sparkline({ values, color = 'var(--km-deep-2)', fill = true, h = 36 }) {
  const min = Math.min(...values), max = Math.max(...values);
  const W = 120, H = h;
  const pts = values.map((v, i) => [
    (i / (values.length - 1)) * W,
    H - 4 - ((v - min) / (max - min || 1)) * (H - 8)
  ]);
  const path = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
  const area = `${path} L ${W} ${H} L 0 ${H} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" style={{ display: 'block' }}>
      {fill && <path d={area} fill={color} opacity="0.12"/>}
      <path d={path} fill="none" stroke={color} strokeWidth="1.6"/>
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.5" fill={color}/>
    </svg>
  );
}

// === Bigger line chart with axes
function LineChart({ series, h = 220, ylabel }) {
  // series = [{ label, color, values: [{x, y}] }]
  const W = 720;
  const padL = 44, padR = 16, padT = 16, padB = 28;
  const allY = series.flatMap(s => s.values.map(v => v.y));
  const allX = series[0].values.map(v => v.x);
  const yMin = 0;
  const yMax = Math.max(...allY) * 1.1;
  const xToPx = (i) => padL + (i / (allX.length - 1)) * (W - padL - padR);
  const yToPx = (y) => padT + (1 - (y - yMin) / (yMax - yMin || 1)) * (h - padT - padB);
  const yTicks = 4;
  return (
    <svg viewBox={`0 0 ${W} ${h}`} width="100%" height={h} style={{ display: 'block' }}>
      {/* gridlines + y labels */}
      {Array.from({ length: yTicks + 1 }, (_, i) => {
        const y = padT + (i / yTicks) * (h - padT - padB);
        const val = yMax - (i / yTicks) * (yMax - yMin);
        return (
          <g key={i}>
            <line x1={padL} y1={y} x2={W - padR} y2={y} stroke="var(--km-line)" strokeWidth="1" strokeDasharray={i === yTicks ? '0' : '2 4'}/>
            <text x={padL - 6} y={y + 4} fontSize="10" fill="var(--km-ink-400)" textAnchor="end" fontFamily="var(--font-mono)">
              {formatChartNum(val)}
            </text>
          </g>
        );
      })}
      {/* x labels (every other) */}
      {allX.map((label, i) => (i % Math.ceil(allX.length / 7) === 0) && (
        <text key={i} x={xToPx(i)} y={h - 8} fontSize="10" fill="var(--km-ink-400)" textAnchor="middle">
          {label}
        </text>
      ))}
      {/* series */}
      {series.map((s, si) => {
        const path = s.values.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xToPx(i)} ${yToPx(v.y)}`).join(' ');
        const area = `${path} L ${xToPx(s.values.length-1)} ${h - padB} L ${padL} ${h - padB} Z`;
        return (
          <g key={si}>
            {si === 0 && <path d={area} fill={s.color} opacity="0.08"/>}
            <path d={path} fill="none" stroke={s.color} strokeWidth="2"/>
            {s.values.map((v, i) => (
              <circle key={i} cx={xToPx(i)} cy={yToPx(v.y)} r="2.5" fill={s.color}/>
            ))}
          </g>
        );
      })}
    </svg>
  );
}
function formatChartNum(n) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace('.0','') + 'M';
  if (n >= 1000) return (n / 1000).toFixed(1).replace('.0','') + 'k';
  return Math.round(n).toString();
}

// === Horizontal bar
function HBar({ label, value, max, color = 'var(--km-deep-2)', right }) {
  const pct = Math.max(2, (value / max) * 100);
  return (
    <div className="hbar">
      <div className="hbar__label">{label}</div>
      <div className="hbar__track">
        <div className="hbar__fill" style={{ width: pct + '%', background: color }}/>
      </div>
      <div className="hbar__val tabular">{right || formatNum(value)}</div>
    </div>
  );
}

// =====================================================================
// === OVERVIEW
function AdminOverview() {
  const days = ['7 May', '8 May', '9 May', '10 May', '11 May', '12 May', '13 May'];
  const clickSeries = [{
    label: 'Tıklama',
    color: 'var(--km-deep-2)',
    values: days.map((x, i) => ({ x, y: [24200, 26800, 25400, 28100, 29800, 27600, 31200][i] })),
  }];
  const gmvSeries = [{
    label: 'Tahmini GMV (₺)',
    color: 'var(--km-accent-2)',
    values: days.map((x, i) => ({ x, y: [840000, 920000, 880000, 1010000, 1140000, 980000, 1180000][i] })),
  }];

  const [chart, setChart] = React.useState('clicks');

  return (
    <>
      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi__head"><span>Aktif satıcı</span><Icon name="merchants" size={14} stroke={1.6} style={{ color: 'var(--km-ink-400)' }}/></div>
          <div className="kpi__val tabular">47</div>
          <span className="kpi__delta kpi__delta--up">↑ 4 / 7 gün</span>
          <div className="kpi__spark"><Sparkline values={[40,41,41,43,43,44,45,46,47,47,47]}/></div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span>Ürün adedi</span><Icon name="products" size={14} stroke={1.6} style={{ color: 'var(--km-ink-400)' }}/></div>
          <div className="kpi__val tabular">28.940</div>
          <span className="kpi__delta kpi__delta--up">↑ 412 / 7 gün</span>
          <div className="kpi__spark"><Sparkline values={[28200, 28350, 28400, 28500, 28640, 28720, 28820, 28890, 28940]}/></div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span>Canlı teklif</span><Icon name="rss" size={14} stroke={1.6} style={{ color: 'var(--km-ink-400)' }}/></div>
          <div className="kpi__val tabular">142.680</div>
          <span className="kpi__delta kpi__delta--up">↑ 2.140 / 7 gün</span>
          <div className="kpi__spark"><Sparkline values={[138, 139, 140, 140.5, 141, 141.8, 142.3, 142.6, 142.7]} color="var(--km-good)"/></div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span>Tıklama (30 g)</span><Icon name="link" size={14} stroke={1.6} style={{ color: 'var(--km-ink-400)' }}/></div>
          <div className="kpi__val tabular">186.412</div>
          <span className="kpi__delta kpi__delta--down">↓ %4 / 7 gün</span>
          <div className="kpi__spark"><Sparkline values={[6200, 6500, 6300, 6700, 6800, 6900, 6850, 6700, 6500]} color="var(--km-accent-2)"/></div>
        </div>
      </div>

      {/* Alerts strip */}
      <div className="alert-strip">
        <div className="alert alert--warn">
          <Icon name="warn" size={16}/>
          <div>
            <strong>Aqua Marine</strong> snapshot 14 saattir bayat · feed bağlantısı yanıt vermiyor
          </div>
          <a href="#" className="alert__act">İncele →</a>
        </div>
        <div className="alert alert--bad">
          <Icon name="alert" size={16}/>
          <div>
            <strong>Tekne Dünyası</strong> HTTP 500 oranı %2.3 (eşik %1) · son 60 dk
          </div>
          <a href="#" className="alert__act">Logları aç →</a>
        </div>
        <div className="alert alert--info">
          <Icon name="sparkle" size={16}/>
          <div>
            3 yeni satıcı başvurusu kuyrukta · en eskisi 2 gün
          </div>
          <a href="#" className="alert__act">Aç →</a>
        </div>
      </div>

      {/* Big chart with toggle */}
      <div className="panel" style={{ marginBottom: 'var(--s-6)' }}>
        <div className="panel__head">
          <div>
            <h2>Performans · son 7 gün</h2>
            <div className="panel__sub">Outbound tıklama ve tahmini GMV (commission rapor edilmemiş)</div>
          </div>
          <div className="seg">
            <button className={`seg__btn ${chart === 'clicks' ? 'on' : ''}`} onClick={() => setChart('clicks')}>Tıklama</button>
            <button className={`seg__btn ${chart === 'gmv' ? 'on' : ''}`} onClick={() => setChart('gmv')}>Tahmini GMV</button>
          </div>
        </div>
        <LineChart series={chart === 'clicks' ? clickSeries : gmvSeries}/>
        <div className="legend">
          <span className="legend__dot" style={{ background: chart === 'clicks' ? 'var(--km-deep-2)' : 'var(--km-accent-2)' }}/>
          {chart === 'clicks' ? 'Outbound tıklama' : 'Tahmini GMV (₺)'}
          <span className="legend__sep">·</span>
          <span style={{ color: 'var(--km-ink-500)' }}>13 May, 14:02 itibarıyla</span>
        </div>
      </div>

      <div className="admin-grid">
        {/* Snapshot health */}
        <div className="panel">
          <div className="panel__head">
            <div>
              <h2>Snapshot sağlığı</h2>
              <div className="panel__sub">Son 24 saatte yenilenmiş sayfa türleri</div>
            </div>
            <a href="#" className="panel__link">Detaylı rapor →</a>
          </div>
          <table className="data-table">
            <thead>
              <tr><th>Tip</th><th>Toplam</th><th>Taze</th><th>Stale</th><th>%</th></tr>
            </thead>
            <tbody>
              <tr><td><strong>MARINE_PRODUCT</strong></td><td className="tabular">28.940</td><td className="tabular">28.812</td><td className="tabular" style={{ color: 'var(--km-warn)' }}>128</td><td className="tabular">99,56%</td></tr>
              <tr><td><strong>MARINE_CATEGORY</strong></td><td className="tabular">8</td><td className="tabular">8</td><td className="tabular">0</td><td className="tabular">100%</td></tr>
              <tr><td><strong>MARINE_BRAND</strong></td><td className="tabular">142</td><td className="tabular">141</td><td className="tabular" style={{ color: 'var(--km-warn)' }}>1</td><td className="tabular">99,30%</td></tr>
              <tr><td><strong>MARINE_SEO_PAGE</strong></td><td className="tabular">214</td><td className="tabular">198</td><td className="tabular" style={{ color: 'var(--km-warn)' }}>16</td><td className="tabular">92,52%</td></tr>
            </tbody>
          </table>
        </div>

        {/* Activity */}
        <div className="panel">
          <div className="panel__head">
            <div>
              <h2>Son aktivite</h2>
              <div className="panel__sub">Operasyon takım kaydı</div>
            </div>
          </div>
          <div className="activity">
            <div className="activity__item"><span className="activity__time">10:42</span>
              <div><span className="dot dot--good"/><strong>Marinex</strong> feed sürümü 2.4.1 deploy edildi · 1.240 ürün yenilendi</div>
            </div>
            <div className="activity__item"><span className="activity__time">09:18</span>
              <div><span className="dot dot--warn"/><strong>Aqua Marine</strong> snapshot 14h geride · uyarı tetiklendi</div>
            </div>
            <div className="activity__item"><span className="activity__time">08:33</span>
              <div><span className="dot dot--good"/>3 yeni satıcı başvurusu · kuyruğa eklendi</div>
            </div>
            <div className="activity__item"><span className="activity__time">07:00</span>
              <div><span className="dot dot--good"/>Nightly full rebuild · 28.940 sayfa, 1m 12s</div>
            </div>
            <div className="activity__item"><span className="activity__time">d-1</span>
              <div><span className="dot dot--bad"/><strong>Tekne Dünyası</strong> 500'leri %2.3 — eşik üstü, e-posta gönderildi</div>
            </div>
          </div>
        </div>
      </div>

      <div className="admin-grid" style={{ gridTemplateColumns: '1fr' }}>
        {/* Top brands leaderboard */}
        <div className="panel">
          <div className="panel__head">
            <div>
              <h2>En çok tıklanan markalar · son 7 gün</h2>
              <div className="panel__sub">Outbound tıklama payına göre</div>
            </div>
            <a href="#" className="panel__link">Tüm markalar →</a>
          </div>
          <div className="hbars">
            <HBar label="Garmin"   value={32400} max={32400} color="var(--km-deep)"/>
            <HBar label="Lewmar"   value={18900} max={32400} color="var(--km-deep-2)"/>
            <HBar label="Raymarine"value={15600} max={32400} color="var(--km-deep-2)"/>
            <HBar label="Yanmar"   value={12100} max={32400} color="var(--km-deep-2)"/>
            <HBar label="Mercury"  value={9800}  max={32400} color="var(--km-deep-2)"/>
            <HBar label="Simrad"   value={7200}  max={32400} color="var(--km-deep-2)"/>
            <HBar label="Vetus"    value={4100}  max={32400} color="var(--km-deep-2)"/>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div>
            <h2>En çok aranan terimler · son 7 gün</h2>
            <div className="panel__sub">Sıfır-sonuç oranı %5 üstü olanlar kırmızı</div>
          </div>
          <a href="#" className="panel__link">Tüm arama analitiği →</a>
        </div>
        <table className="data-table">
          <thead>
            <tr><th>Terim</th><th>Sorgu</th><th>Sıfır-sonuç %</th><th>Ortalama CTR</th><th>Trend</th><th></th></tr>
          </thead>
          <tbody>
            {[
              ['garmin echomap', 4820, 0.8, 18.2, [40, 42, 45, 48, 52, 49, 55]],
              ['yanmar yağ filtresi', 3140, 1.2, 22.1, [22, 25, 28, 30, 31, 32, 31]],
              ['lewmar windlass', 2890, 0.5, 15.4, [18, 20, 22, 26, 27, 28, 29]],
              ['simrad nss evo3', 1650, 18.4, 5.2, [10, 12, 14, 16, 16, 17, 17]],
              ['mercury 9.9 pervane', 1420, 2.1, 19.6, [12, 13, 14, 14, 14, 14, 14]],
              ['vetus pruva iticisi', 980, 24.6, 3.1, [6, 7, 9, 10, 10, 10, 10]],
            ].map(([term, q, zero, ctr, spark], i) => (
              <tr key={i}>
                <td><a href={urlForSearch(term)} style={{ color: 'var(--km-deep)', fontWeight: 500 }}>{term}</a></td>
                <td className="tabular">{formatNum(q)}</td>
                <td className="tabular" style={{ color: zero > 5 ? 'var(--km-bad)' : 'var(--km-ink-700)', fontWeight: zero > 5 ? 600 : 400 }}>%{zero.toFixed(1)}</td>
                <td className="tabular">%{ctr.toFixed(1)}</td>
                <td style={{ width: 100 }}><Sparkline values={spark} h={20}/></td>
                <td><a href="#" style={{ color: 'var(--km-deep)', fontSize: 12 }}>→</a></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === MERCHANTS
function AdminMerchants() {
  const queue = [
    { name: 'Bodrum Marin Tedarik', taxNo: '4710023411', contact: 'Ahmet T.', categories: 3, products: '500-2000', applied: '2 saat önce', source: 'CSV feed' },
    { name: 'Yelken Atölyesi A.Ş.', taxNo: '6219045710', contact: 'Mert Y.', categories: 2, products: '100-500', applied: '1 gün önce', source: 'API' },
    { name: 'Pendik Tekne Servis', taxNo: '8201734590', contact: 'Cem A.', categories: 5, products: '2000+', applied: '2 gün önce', source: 'CSV feed' },
  ];
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Aktif</span></div><div className="kpi__val tabular">47</div></div>
        <div className="kpi"><div className="kpi__head"><span>Başvuru bekleyen</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-accent-2)' }}>3</div></div>
        <div className="kpi"><div className="kpi__head"><span>Uyarıdaki</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-warn)' }}>2</div></div>
      </div>

      <div className="panel" style={{ marginBottom: 24 }}>
        <div className="panel__head">
          <div><h2>Başvuru kuyruğu</h2><div className="panel__sub">Eski → yeni · onay 2 iş günü içinde verilmeli</div></div>
        </div>
        <table className="data-table">
          <thead>
            <tr><th>Şirket</th><th>Vergi no</th><th>İletişim</th><th>Kategori</th><th>Ürün</th><th>Kaynak</th><th>Başvuru</th><th></th></tr>
          </thead>
          <tbody>
            {queue.map((m, i) => (
              <tr key={i}>
                <td><strong>{m.name}</strong></td>
                <td className="tabular">{m.taxNo}</td>
                <td>{m.contact}</td>
                <td className="tabular">{m.categories}</td>
                <td>{m.products}</td>
                <td>{m.source}</td>
                <td style={{ color: 'var(--km-ink-500)' }}>{m.applied}</td>
                <td style={{ display: 'flex', gap: 4 }}>
                  <button className="btn btn--ghost btn--sm">Detay</button>
                  <button className="btn btn--primary btn--sm">Onayla</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Aktif satıcılar</h2><div className="panel__sub">Veri kalitesi sıralı · uyarıdakiler üstte</div></div>
        </div>
        <table className="data-table">
          <thead>
            <tr><th>Satıcı</th><th>Tier</th><th>Ürün</th><th>Snapshot yaşı</th><th>Uptime 30g</th><th>Tıklama 7g</th><th>Durum</th></tr>
          </thead>
          <tbody>
            {MERCHANTS.map((m, i) => {
              const age = [0.5, 2, 1, 4, 0.3, 14, 1][i] || 1;
              const uptime = [99.8, 99.4, 99.1, 98.2, 99.9, 96.4, 99.0][i] || 99;
              const clicks = [4820, 3210, 2890, 1450, 5640, 940, 2100][i] || 1000;
              const status = age > 24 ? 'bad' : age > 12 ? 'warn' : 'good';
              return (
                <tr key={m.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="offer__logo" style={{ width: 28, height: 28, fontSize: 11 }}>{m.logo}</div>
                      <strong>{m.name}</strong>
                    </div>
                  </td>
                  <td><span className={`offer__tier tier--${m.tier}`}>{m.tier}</span></td>
                  <td className="tabular">{formatNum([4820, 1240, 980, 420, 2840, 310, 1640][i] || 1000)}</td>
                  <td className="tabular" style={{ color: age > 12 ? 'var(--km-warn)' : 'var(--km-ink-700)' }}>{age}h</td>
                  <td className="tabular">{uptime}%</td>
                  <td className="tabular">{formatNum(clicks)}</td>
                  <td><span className={`dot dot--${status}`}/>{status === 'good' ? 'normal' : status === 'warn' ? 'uyarı' : 'kritik'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === PRODUCTS
function AdminProducts() {
  return (
    <div className="panel">
      <div className="panel__head">
        <div><h2>Ürün kataloğu yönetimi</h2><div className="panel__sub">SKU bazlı normalize edilmiş ürün kayıtları · {formatNum(28940)} kayıt</div></div>
        <div style={{ display: 'flex', gap: 6 }}>
          <input className="input" placeholder="SKU veya ürün ara..." style={{ height: 36, fontSize: 13, minWidth: 220 }}/>
          <button className="btn btn--ghost btn--sm"><Icon name="filter" size={12}/> Filtre</button>
          <button className="btn btn--primary btn--sm">Yeni ürün</button>
        </div>
      </div>
      <table className="data-table">
        <thead>
          <tr><th>SKU</th><th>Ürün</th><th>Marka</th><th>Kategori</th><th>Satıcı</th><th>En düşük</th><th>İnceleme</th><th></th></tr>
        </thead>
        <tbody>
          {PRODUCTS.map(p => (
            <tr key={p.shortSlug}>
              <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{p.sku}</td>
              <td><strong>{p.h1.slice(0, 36)}{p.h1.length > 36 ? '…' : ''}</strong></td>
              <td>{p.brand}</td>
              <td style={{ color: 'var(--km-ink-500)' }}>{p.category}</td>
              <td className="tabular">{p.offers.length}</td>
              <td className="tabular">{formatPrice(productLowest(p))}</td>
              <td><span className="dot dot--good"/>Onaylı</td>
              <td><a href={urlForProduct(p)} style={{ color: 'var(--km-deep)', fontSize: 12 }} target="_blank">Görüntüle →</a></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// =====================================================================
// === SNAPSHOTS
function AdminSnapshots() {
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Bugün rebuild</span></div><div className="kpi__val tabular">3.412</div><span className="kpi__delta kpi__delta--up">↑ %12</span></div>
        <div className="kpi"><div className="kpi__head"><span>Bekleyen iş</span></div><div className="kpi__val tabular">17</div></div>
        <div className="kpi"><div className="kpi__head"><span>Ort. süre</span></div><div className="kpi__val tabular">2,1<small style={{ fontSize: 14, color: 'var(--km-ink-500)' }}> s</small></div></div>
        <div className="kpi"><div className="kpi__head"><span>Hata oranı 1g</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>%0,4</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Snapshot kuyruğu</h2><div className="panel__sub">Yeniden oluşturma görevleri · son 1 saat</div></div>
          <button className="btn btn--accent btn--sm"><Icon name="rss" size={12}/> Tüm sayfaları rebuild et</button>
        </div>
        <table className="data-table">
          <thead><tr><th>İş ID</th><th>Tip</th><th>Hedef</th><th>Durum</th><th>Süre</th><th>Tetikleyici</th></tr></thead>
          <tbody>
            {[
              ['snap-2bk9a4', 'MARINE_PRODUCT', 'garmin-echomap-uhd2-92sv', 'good', 'Tamamlandı', '2,4s', 'fiyat değişikliği'],
              ['snap-9mxq11', 'MARINE_BRAND', 'garmin', 'good', 'Tamamlandı', '1,1s', 'nightly cron'],
              ['snap-p7c2zq', 'MARINE_SEO_PAGE', 'en-ucuz-balik-bulucu', 'warn', 'Devam ediyor', '3,8s', 'manuel'],
              ['snap-rk44yt', 'MARINE_CATEGORY', 'capa-vinci', 'bad', "Hata · timeout", '30s', 'nightly cron'],
              ['snap-mt5g0p', 'MARINE_PRODUCT', 'lewmar-v700-windlass', 'good', 'Tamamlandı', '1,8s', 'feed güncelleme'],
              ['snap-w4nzab', 'MARINE_BRAND', 'lewmar', 'good', 'Tamamlandı', '0,9s', 'fiyat değişikliği'],
            ].map((r, i) => (
              <tr key={i}>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r[0]}</td>
                <td>{r[1]}</td>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--km-ink-500)' }}>{r[2]}</td>
                <td><span className={`dot dot--${r[3]}`}/>{r[4]}</td>
                <td className="tabular">{r[5]}</td>
                <td style={{ color: 'var(--km-ink-500)' }}>{r[6]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === ANALYTICS (search)
function AdminAnalytics() {
  const days = ['7 May', '8 May', '9 May', '10 May', '11 May', '12 May', '13 May'];
  const searchSeries = [{
    label: 'Arama',
    color: 'var(--km-deep-2)',
    values: days.map((x, i) => ({ x, y: [9800, 10200, 9600, 11400, 12800, 11900, 13200][i] })),
  }];
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Arama (7g)</span></div><div className="kpi__val tabular">78.900</div><span className="kpi__delta kpi__delta--up">↑ %14</span></div>
        <div className="kpi"><div className="kpi__head"><span>Tıklamaya dönüş</span></div><div className="kpi__val tabular">%34,2</div><span className="kpi__delta kpi__delta--up">↑ 1.6pp</span></div>
        <div className="kpi"><div className="kpi__head"><span>Sıfır sonuç</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-warn)' }}>%4,1</div><span className="kpi__delta kpi__delta--down">↓ 0.4pp</span></div>
        <div className="kpi"><div className="kpi__head"><span>Görsel arama</span></div><div className="kpi__val tabular">2.140</div><span className="kpi__delta kpi__delta--up">↑ %22</span></div>
      </div>

      <div className="panel" style={{ marginBottom: 24 }}>
        <div className="panel__head">
          <div><h2>Arama hacmi · son 7 gün</h2><div className="panel__sub">Site içi arama kutusu + URL parametresi</div></div>
        </div>
        <LineChart series={searchSeries}/>
      </div>

      <div className="admin-grid">
        <div className="panel">
          <div className="panel__head"><div><h2>Sıfır-sonuç terimleri</h2><div className="panel__sub">Eksik katalog veya yanlış eşleşme adayları</div></div></div>
          <table className="data-table">
            <thead><tr><th>Terim</th><th>Sorgu</th><th>Aksiyon</th></tr></thead>
            <tbody>
              {[
                ['vetus pruva iticisi 65 kgf', 412, 'Ürün ekle'],
                ['simrad nss evo3 16"', 304, 'Synonym ekle'],
                ['raymarine st60 hız sensörü', 287, 'Ürün ekle'],
                ['mercury 4 zamanlı yağ', 211, 'Kategori map'],
                ['quick gypsy 8 mm', 156, 'Ürün ekle'],
              ].map((r, i) => (
                <tr key={i}>
                  <td><strong>{r[0]}</strong></td>
                  <td className="tabular">{formatNum(r[1])}</td>
                  <td><button className="btn btn--ghost btn--sm">{r[2]}</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel">
          <div className="panel__head"><div><h2>Funnel · 7 gün</h2><div className="panel__sub">Arama → sonuç → tıklama</div></div></div>
          <div className="funnel">
            <div className="funnel__row"><span>Arama</span><div className="funnel__bar" style={{ width: '100%' }}><span>78.900</span></div></div>
            <div className="funnel__row"><span>Sonuçlu arama</span><div className="funnel__bar" style={{ width: '95.9%' }}><span>75.660 · %95,9</span></div></div>
            <div className="funnel__row"><span>PDP ziyareti</span><div className="funnel__bar" style={{ width: '64.8%' }}><span>51.130 · %64,8</span></div></div>
            <div className="funnel__row"><span>Outbound tıklama</span><div className="funnel__bar funnel__bar--accent" style={{ width: '34.2%' }}><span>26.980 · %34,2</span></div></div>
          </div>
        </div>
      </div>
    </>
  );
}

// =====================================================================
// === CLICKS (affiliate / outbound)
function AdminClicks() {
  const stream = [
    ['14:02:11', 'Garmin Echomap UHD2 92sv', 'East Marine', '₺28.950', 'IST', 'Mobile · iOS'],
    ['14:02:08', 'Lewmar V700 Vinç',          'Marinex',     '₺18.490', 'IZM', 'Desktop · Chrome'],
    ['14:01:56', 'Yanmar 3YM30 Yağ Filtresi', 'Deniz Marketi','₺740',   'ANT', 'Mobile · Android'],
    ['14:01:47', 'Raymarine Axiom 9',         'East Marine', '₺34.900', 'IST', 'Desktop · Safari'],
    ['14:01:33', 'Garmin Echomap UHD2 92sv',  'Marin Trade', '₺30.100', 'MUG', 'Mobile · iOS'],
    ['14:01:21', 'Mercury 9.9 Pervane 10x12', 'Yat Store',   '₺2.890',  'BUR', 'Mobile · Android'],
    ['14:01:09', 'Simrad NSS Evo3 12"',       'Marinex',     '₺54.200', 'IST', 'Desktop · Chrome'],
    ['14:00:51', 'Vetus Pruva İticisi 35 kgf','East Marine', '₺48.900', 'IZM', 'Desktop · Firefox'],
  ];
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Tıklama (1 saat)</span></div><div className="kpi__val tabular">1.412</div><span className="kpi__delta kpi__delta--up">↑ %8</span></div>
        <div className="kpi"><div className="kpi__head"><span>CTR · PDP</span></div><div className="kpi__val tabular">%18,6</div></div>
        <div className="kpi"><div className="kpi__head"><span>Tıklama / kullanıcı</span></div><div className="kpi__val tabular">1,8</div></div>
        <div className="kpi"><div className="kpi__head"><span>Bot oranı</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-warn)' }}>%2,3</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Canlı tıklama akışı</h2><div className="panel__sub">Affiliate çıkışları · gerçek zamanlı</div></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--km-good)' }}>
            <span className="pulse-dot"/> Bağlı
          </div>
        </div>
        <table className="data-table">
          <thead><tr><th>Zaman</th><th>Ürün</th><th>Hedef satıcı</th><th>Fiyat</th><th>Bölge</th><th>Cihaz</th></tr></thead>
          <tbody>
            {stream.map((r, i) => (
              <tr key={i}>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--km-ink-500)' }}>{r[0]}</td>
                <td><strong>{r[1]}</strong></td>
                <td>{r[2]}</td>
                <td className="tabular">{r[3]}</td>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r[4]}</td>
                <td style={{ color: 'var(--km-ink-500)', fontSize: 12 }}>{r[5]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === IMAGES catalogue
function AdminImages() {
  const rows = [
    { p: PRODUCTS[0], cov: 6, total: 6, status: 'good' },
    { p: PRODUCTS[1], cov: 4, total: 5, status: 'warn' },
    { p: PRODUCTS[2] || PRODUCTS[0], cov: 1, total: 4, status: 'bad' },
  ];
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Görsel kapsama</span></div><div className="kpi__val tabular">%87,4</div><span className="kpi__delta kpi__delta--up">↑ 2.1pp</span></div>
        <div className="kpi"><div className="kpi__head"><span>Eksik resim</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-warn)' }}>3.640</div></div>
        <div className="kpi"><div className="kpi__head"><span>CDN trafiği · 24s</span></div><div className="kpi__val tabular">412 <small style={{ fontSize: 14, color: 'var(--km-ink-500)' }}>GB</small></div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Eksik görselli ürünler</h2><div className="panel__sub">Satıcı feed'inden eksik veya düşük çözünürlüklü olanlar</div></div>
          <button className="btn btn--accent btn--sm"><Icon name="upload" size={12}/> Toplu yükle</button>
        </div>
        <table className="data-table">
          <thead><tr><th>Ürün</th><th>Kapsama</th><th>Durum</th><th>Kaynak</th><th></th></tr></thead>
          <tbody>
            {rows.map(({ p, cov, total, status }, i) => (
              <tr key={i}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 36, height: 36, background: 'var(--km-paper-3)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--km-ink-500)', fontFamily: 'var(--font-mono)' }}>{cov}/{total}</div>
                    <strong>{p.h1.slice(0, 40)}{p.h1.length > 40 ? '…' : ''}</strong>
                  </div>
                </td>
                <td style={{ width: 200 }}>
                  <div className="hbar__track" style={{ background: 'var(--km-paper-3)' }}>
                    <div className="hbar__fill" style={{ width: (cov/total)*100 + '%', background: status === 'bad' ? 'var(--km-bad)' : status === 'warn' ? 'var(--km-warn)' : 'var(--km-good)' }}/>
                  </div>
                </td>
                <td><span className={`dot dot--${status}`}/>{status === 'good' ? 'tam' : status === 'warn' ? 'eksik' : 'kritik'}</td>
                <td style={{ color: 'var(--km-ink-500)' }}>satıcı feed'i</td>
                <td><button className="btn btn--ghost btn--sm">Yükle</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === KVKK audit
function AdminKvkk() {
  const log = [
    ['2026-05-13 13:48:11', 'Esra Y.', 'PDP onay', 'garmin-echomap-uhd2-92sv', 'Editör onayı'],
    ['2026-05-13 12:11:02', 'Mehmet K.', 'Satıcı oluştur', 'bodrum-marin-tedarik', 'API/POST'],
    ['2026-05-13 11:02:54', 'Sistem',   'Veri silme talebi', 'kullanici-7a9b', 'KVKK madde 11'],
    ['2026-05-13 09:33:41', 'Esra Y.', 'Fiyat override',   'lewmar-v700-windlass', 'Manuel düzeltme'],
    ['2026-05-12 23:00:00', 'Sistem',   'Nightly rebuild',  '28.940 sayfa', 'cron job'],
    ['2026-05-12 18:22:08', 'Cem A.',   'Login',            'admin.kolaymarin.com', 'IP 93.186.x.x'],
  ];
  return (
    <>
      <div className="panel" style={{ marginBottom: 24 }}>
        <div className="panel__head">
          <div><h2>KVKK · veri işleme özeti</h2><div className="panel__sub">Aydınlatma metni v3 · son güncelleme 12 Nisan 2026</div></div>
          <button className="btn btn--ghost btn--sm">Politika düzenle</button>
        </div>
        <div className="kvkk-grid">
          <div className="kvkk-card"><div className="kvkk-card__num tabular">0</div><div>Aktif silme talebi</div></div>
          <div className="kvkk-card"><div className="kvkk-card__num tabular">12</div><div>30 günde tamamlanan talep</div></div>
          <div className="kvkk-card"><div className="kvkk-card__num tabular">47</div><div>Veri işleyici sözleşmesi</div></div>
          <div className="kvkk-card"><div className="kvkk-card__num tabular">99,8%</div><div>Çerez onayı yakalama</div></div>
        </div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Audit kaydı</h2><div className="panel__sub">Tüm yönetici ve sistem işlemleri · 90 gün retention</div></div>
          <div style={{ display: 'flex', gap: 6 }}>
            <input className="input" placeholder="Kullanıcı / işlem ara…" style={{ height: 36, fontSize: 13, minWidth: 220 }}/>
            <button className="btn btn--ghost btn--sm">CSV indir</button>
          </div>
        </div>
        <table className="data-table">
          <thead><tr><th>Zaman</th><th>Aktör</th><th>İşlem</th><th>Hedef</th><th>Not</th></tr></thead>
          <tbody>
            {log.map((r, i) => (
              <tr key={i}>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--km-ink-500)' }}>{r[0]}</td>
                <td><strong>{r[1]}</strong></td>
                <td>{r[2]}</td>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r[3]}</td>
                <td style={{ color: 'var(--km-ink-500)' }}>{r[4]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// === SETTINGS
function AdminSettings() {
  const [snapInterval, setSnapInterval] = React.useState('6');
  const [maintenance, setMaintenance] = React.useState(false);
  const [zeroAlert, setZeroAlert] = React.useState(true);
  return (
    <>
      <div className="settings-grid">
        <div className="panel">
          <div className="panel__head"><div><h2>Snapshot</h2><div className="panel__sub">Yenileme stratejisi</div></div></div>
          <div className="setting">
            <div><div className="setting__lbl">Otomatik yenileme aralığı</div><div className="setting__hint">Tüm MARINE_PRODUCT sayfalarının tazelik eşiği</div></div>
            <select className="select" value={snapInterval} onChange={e => setSnapInterval(e.target.value)} style={{ width: 140, height: 36, fontSize: 13 }}>
              <option value="1">1 saat</option>
              <option value="3">3 saat</option>
              <option value="6">6 saat</option>
              <option value="12">12 saat</option>
              <option value="24">24 saat</option>
            </select>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Nightly full rebuild</div><div className="setting__hint">02:00 TRT, tüm sayfa türleri için</div></div>
            <span className="badge badge--good">Aktif</span>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Eşzamanlı işçi sayısı</div><div className="setting__hint">Yüksek değer kaynak tüketir</div></div>
            <span className="tabular" style={{ fontWeight: 600 }}>8</span>
          </div>
        </div>

        <div className="panel">
          <div className="panel__head"><div><h2>Uyarılar</h2><div className="panel__sub">Eşik ve bildirim</div></div></div>
          <div className="setting">
            <div><div className="setting__lbl">Bayat snapshot uyarısı</div><div className="setting__hint">12 saat geride kalan satıcı için</div></div>
            <Toggle on={true}/>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Sıfır-sonuç oranı &gt; %5</div><div className="setting__hint">Slack #ops kanalına gönder</div></div>
            <Toggle on={zeroAlert} onChange={setZeroAlert}/>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">5xx oranı &gt; %1</div><div className="setting__hint">Satıcı ve ops takımına e-posta</div></div>
            <Toggle on={true}/>
          </div>
        </div>

        <div className="panel">
          <div className="panel__head"><div><h2>SEO</h2><div className="panel__sub">Sitemap ve robots</div></div></div>
          <div className="setting">
            <div><div className="setting__lbl">Sitemap güncelleme</div><div className="setting__hint">Snapshot pipeline'a bağlı, manuel tetikleme</div></div>
            <button className="btn btn--ghost btn--sm">Şimdi tetikle</button>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Robots.txt</div><div className="setting__hint">Crawl-delay ve disallow kuralları</div></div>
            <button className="btn btn--ghost btn--sm">Düzenle</button>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Canonical alan adı</div><div className="setting__hint">www → apex yönlendirme aktif</div></div>
            <span className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>kolaymarin.com</span>
          </div>
        </div>

        <div className="panel">
          <div className="panel__head"><div><h2>Sistem</h2><div className="panel__sub">Tehlikeli bölge</div></div></div>
          <div className="setting">
            <div><div className="setting__lbl">Bakım modu</div><div className="setting__hint">Tüm anonim ziyaretçilere "yakında geri döneriz" gösterilir</div></div>
            <Toggle on={maintenance} onChange={setMaintenance}/>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Tüm cache'i temizle</div><div className="setting__hint">CDN edge + Redis · ~3 dk sonrası performans etkisi</div></div>
            <button className="btn btn--ghost btn--sm">Temizle</button>
          </div>
          <div className="setting">
            <div><div className="setting__lbl">Veritabanı bakım pencerel</div><div className="setting__hint">Cumartesi 03:00 – 04:00 TRT</div></div>
            <span className="badge">planlı</span>
          </div>
        </div>
      </div>
    </>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button
      className={`toggle ${on ? 'toggle--on' : ''}`}
      onClick={() => onChange && onChange(!on)}
      type="button"
      aria-pressed={on}
    >
      <span className="toggle__thumb"/>
    </button>
  );
}

Object.assign(window, { AdminPage });