// Aksiyon Merkezi + Gelir Kaçakları + AI Lab stubları
// "Sistem sadece problemi göstermiyor — sonraki adımı öneriyor"

// =====================================================================
// ACTION CARD — temel komponent
function ActionCard({ a }) {
  const impactColor = a.impact >= 80 ? 'var(--km-bad)' : a.impact >= 50 ? 'var(--km-accent-2)' : 'var(--km-deep-2)';
  const [dismissed, setDismissed] = React.useState(false);
  if (dismissed) return null;
  return (
    <div className={`action-card action-card--${a.severity}`}>
      <div className="action-card__top">
        <div className="action-card__type">
          <Icon name={a.icon} size={12} stroke={2}/> {a.type}
        </div>
        <div className="action-card__impact" title="Etki skoru">
          <div className="action-card__impact-bar"><span style={{ width: a.impact + '%', background: impactColor }}/></div>
          <span className="tabular">{a.impact}</span>
        </div>
      </div>

      <h3 className="action-card__title">{a.title}</h3>
      {a.body && <p className="action-card__body">{a.body}</p>}

      {a.evidence && (
        <div className="action-card__evidence">
          {a.evidence.map((e, i) => (
            <div className="action-card__ev" key={i}>
              <span className="action-card__ev-lbl">{e.label}</span>
              <span className="action-card__ev-val tabular">{e.val}</span>
            </div>
          ))}
        </div>
      )}

      <div className="action-card__footer">
        <div className="action-card__lostgmv">
          <span className="action-card__lostgmv-lbl">Tahmini kaçak GMV / ay</span>
          <span className="action-card__lostgmv-val tabular">₺{formatNum(a.lostGmv)}</span>
        </div>
        <div className="action-card__cta">
          <button className="btn btn--ghost btn--sm" onClick={() => setDismissed(true)}>Ertele</button>
          <button className="btn btn--primary btn--sm">
            <Icon name={a.ctaIcon || 'check'} size={12} stroke={2.5}/> {a.cta}
          </button>
        </div>
      </div>
    </div>
  );
}

const ACTIONS = [
  {
    type: 'KATALOG AÇIĞI', icon: 'warn', severity: 'bad', impact: 92,
    title: '412 kullanıcı "vetus pruva iticisi" aradı — ürün yok',
    body: 'Son 7 günde 412 sorgu, sıfır sonuç. Markanın 3 modeli rakip sitelerde stokta. Marinex ve East Marine\'da fiyat var.',
    evidence: [
      { label: 'Aylık talep', val: '~1.640 sorgu' },
      { label: 'Rakipte ortalama fiyat', val: '₺38.900' },
      { label: 'Satıcı eşleşme', val: '2 mağaza hazır' },
    ],
    lostGmv: 480_000, cta: 'Ürün ekleme akışı', ctaIcon: 'plus',
  },
  {
    type: 'TREND SİNYALİ', icon: 'flame', severity: 'good', impact: 78,
    title: 'Raymarine ST60 hız sensörü son 7 günde ↑ %340',
    body: 'Doğal dil sorgularında ST60 + tridata kombinasyonu yükselişte. Kategori sayfasında öne çıkar veya SEO landing üret.',
    evidence: [
      { label: '7 günlük büyüme', val: '↑ %340' },
      { label: 'CTR', val: '%24,1 (ort. üstü)' },
      { label: 'Mevcut stok', val: '6 mağazada' },
    ],
    lostGmv: 92_000, cta: 'SEO landing üret', ctaIcon: 'arrow-up-right',
  },
  {
    type: 'EŞLEŞTİRME', icon: 'filter', severity: 'warn', impact: 66,
    title: '"Mercury yağ" yüksek arama, düşük CTR (%5,2)',
    body: 'Sonuçlar Quicksilver bakım kategorisine düşüyor; kullanıcı OEM Mercury yağ arıyor. Synonym ekleyip kategori redirect kur.',
    evidence: [
      { label: '7 günlük sorgu', val: '1.420' },
      { label: 'Mevcut CTR', val: '%5,2' },
      { label: 'Hedef CTR', val: '%18+' },
    ],
    lostGmv: 38_500, cta: 'Synonym + redirect kur', ctaIcon: 'arrow-right',
  },
  {
    type: 'SYNONYM EKSİĞİ', icon: 'sparkle', severity: 'warn', impact: 58,
    title: '"Simrad NSS Evo3 16" → 0 sonuç',
    body: 'Kullanıcılar tırnak yerine inç işareti olmadan arıyor. "nss evo3 16" ve "evo3 16 inch" alias\'larını ekle.',
    evidence: [
      { label: 'Sorgu (7g)', val: '304' },
      { label: 'Sıfır sonuç', val: '%100' },
      { label: 'Önerilen alias', val: '3 adet' },
    ],
    lostGmv: 24_800, cta: 'Alias\'ları onayla', ctaIcon: 'check',
  },
  {
    type: 'VERİ KALİTESİ', icon: 'clock', severity: 'bad', impact: 71,
    title: '3 satıcıda fiyat bayat (>48 saat)',
    body: 'Aqua Marine, Tekne Dünyası, Marinex satıcılarında bazı SKU\'ların snapshot\'ı 48 saatten eski. Outbound kalitesi düşüyor.',
    evidence: [
      { label: 'Etkilenen SKU', val: '142' },
      { label: 'En eski snapshot', val: '67 saat' },
      { label: 'Feed durumu', val: '2 broken, 1 yavaş' },
    ],
    lostGmv: 64_000, cta: 'Feed\'leri yeniden çalıştır', ctaIcon: 'rss',
  },
  {
    type: 'OUTBOUND ZAYIFLIĞI', icon: 'link', severity: 'warn', impact: 54,
    title: 'Garmin Echomap 92sv: trafik var, outbound %3,1',
    body: 'PDP\'de 4.820 tıklama, sadece %3,1 satıcıya yönlendi. Sıralamada en ucuz teklif 4. sırada — boost et veya UI debug.',
    evidence: [
      { label: 'PDP ziyareti (7g)', val: '4.820' },
      { label: 'Mevcut outbound', val: '%3,1' },
      { label: 'Kategori ortalaması', val: '%18,6' },
    ],
    lostGmv: 118_000, cta: 'PDP\'yi incele', ctaIcon: 'arrow-up-right',
  },
  {
    type: 'AI ÖNERİ', icon: 'sparkle', severity: 'good', impact: 44,
    title: 'Victron + lityum akü kombinasyonu yükseliyor',
    body: '72 saat içinde "enerji verimliliği" odaklı sorgularda %180 artış. Victron için bir kategori sayfası üretmek mantıklı.',
    evidence: [
      { label: 'Trend skoru', val: '8.4 / 10' },
      { label: 'İlişkili sorgu', val: '34 farklı' },
      { label: 'Tahmini intent', val: 'Yüksek satın alma' },
    ],
    lostGmv: 21_000, cta: 'AI ile kategori taslağı', ctaIcon: 'sparkle',
  },
];

function AdminActions() {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? ACTIONS : ACTIONS.filter(a => a.severity === filter);
  const totalLost = ACTIONS.reduce((s, a) => s + a.lostGmv, 0);

  return (
    <>
      {/* Top banner — AI beyin */}
      <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">Aksiyon Merkezi · sistem brifingi</div>
          <p className="ai-banner__text">
            <strong>{ACTIONS.length} açık aksiyon</strong>, toplam <strong className="tabular">~₺{formatNum(totalLost)}</strong> aylık tahmini gelir kaçağı.
            Önce <strong>2 kritik</strong> ve <strong>3 uyarı</strong> seviyesindekileri çöz — bu hafta için tahmini geri kazanım <strong className="tabular">~₺{formatNum(Math.round(totalLost * 0.6))}</strong>.
          </p>
        </div>
        <button className="btn btn--accent btn--sm">
          <Icon name="sparkle" size={12}/> Yeni brifing oluştur
        </button>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Açık aksiyon</span></div><div className="kpi__val tabular">{ACTIONS.length}</div><span className="kpi__delta kpi__delta--up">↑ 3 / d-1</span></div>
        <div className="kpi"><div className="kpi__head"><span>Tahmini kaçak / ay</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>₺{formatNum(totalLost / 1000).split(',')[0]}k</div></div>
        <div className="kpi"><div className="kpi__head"><span>Kapatılan (7 gün)</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-good)' }}>12</div><span className="kpi__delta kpi__delta--up">↑ %20</span></div>
        <div className="kpi"><div className="kpi__head"><span>Ort. kapatma süresi</span></div><div className="kpi__val tabular">14<small style={{ fontSize: 14, color: 'var(--km-ink-500)' }}> dk</small></div></div>
      </div>

      {/* Filter strip */}
      <div className="action-filter">
        <div className="seg">
          <button className={`seg__btn ${filter === 'all' ? 'on' : ''}`} onClick={() => setFilter('all')}>Tümü <span className="tabular">{ACTIONS.length}</span></button>
          <button className={`seg__btn ${filter === 'bad' ? 'on' : ''}`} onClick={() => setFilter('bad')}>Kritik <span className="tabular">{ACTIONS.filter(a => a.severity === 'bad').length}</span></button>
          <button className={`seg__btn ${filter === 'warn' ? 'on' : ''}`} onClick={() => setFilter('warn')}>Uyarı <span className="tabular">{ACTIONS.filter(a => a.severity === 'warn').length}</span></button>
          <button className={`seg__btn ${filter === 'good' ? 'on' : ''}`} onClick={() => setFilter('good')}>Fırsat <span className="tabular">{ACTIONS.filter(a => a.severity === 'good').length}</span></button>
        </div>
        <span style={{ fontSize: 12, color: 'var(--km-ink-500)' }}>Etki skoruna göre sıralı · son brifing 14:02</span>
      </div>

      <div className="action-grid">
        {filtered.sort((a, b) => b.impact - a.impact).map((a, i) => <ActionCard a={a} key={i}/>)}
      </div>
    </>
  );
}

// =====================================================================
// REVENUE LEAKS
function AdminRevenueLeaks() {
  const leaks = [
    { type: 'Sıfır sonuç', terms: 'vetus pruva iticisi · simrad evo3 16"', count: 1240, gmv: 480_000, fix: 'Ürün ekle' },
    { type: 'Bayat fiyat', terms: 'Aqua Marine 42 SKU', count: 42, gmv: 64_000, fix: 'Feed restart' },
    { type: 'Broken outbound', terms: 'Tekne Dünyası → 404 dönen 8 link', count: 8, gmv: 18_000, fix: 'Linkleri güncelle' },
    { type: 'Düşük CTR PDP', terms: 'Garmin 92sv · Lewmar V700', count: 2, gmv: 118_000, fix: 'Sıralamayı boost et' },
    { type: 'Yanlış kategori', terms: 'Mercury yağ → Quicksilver kat.', count: 1420, gmv: 38_500, fix: 'Redirect kur' },
    { type: 'Eksik resim', terms: '3.640 ürün', count: 3640, gmv: 22_000, fix: 'Toplu yükle' },
    { type: 'Stale 5xx', terms: '4 satıcı feed timeout', count: 4, gmv: 12_000, fix: 'Worker scale up' },
  ];
  const total = leaks.reduce((s, l) => s + l.gmv, 0);
  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Toplam kaçak / ay</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-bad)' }}>₺{formatNum(total)}</div></div>
        <div className="kpi"><div className="kpi__head"><span>En büyük kaynak</span></div><div className="kpi__val" style={{ fontSize: 16, lineHeight: 1.3 }}>Sıfır sonuç<br/><small style={{ fontSize: 13, color: 'var(--km-ink-500)' }}>%{Math.round(480000/total*100)} · ₺480k</small></div></div>
        <div className="kpi"><div className="kpi__head"><span>30 günde kapanan</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-good)' }}>₺184k</div><span className="kpi__delta kpi__delta--up">↑ %32</span></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>Gelir kaçağı kaynakları</h2><div className="panel__sub">Tahmin: yaklaşık 30 günlük ortalama trafik × konversiyon farkı × ort. sepet</div></div>
          <button className="btn btn--ghost btn--sm">CSV indir</button>
        </div>
        <table className="data-table">
          <thead><tr><th>Kaynak</th><th>Örnek</th><th>Etkilenen</th><th>Tahmini kaçak / ay</th><th>Pay</th><th></th></tr></thead>
          <tbody>
            {leaks.sort((a, b) => b.gmv - a.gmv).map((l, i) => (
              <tr key={i}>
                <td><strong>{l.type}</strong></td>
                <td style={{ color: 'var(--km-ink-500)' }}>{l.terms}</td>
                <td className="tabular">{formatNum(l.count)}</td>
                <td className="tabular" style={{ fontWeight: 600 }}>₺{formatNum(l.gmv)}</td>
                <td style={{ width: 140 }}>
                  <div className="hbar__track" style={{ background: 'var(--km-paper-3)' }}>
                    <div className="hbar__fill" style={{ width: (l.gmv/leaks[0].gmv)*100 + '%', background: 'var(--km-bad)' }}/>
                  </div>
                </td>
                <td><button className="btn btn--primary btn--sm">{l.fix}</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// =====================================================================
// AI MERCHANDISER (P2 — prompt-driven)
function AdminAiMerchandiser() {
  const [prompt, setPrompt] = React.useState('Raymarine ürünlerini öne çıkar — özellikle Axiom serisi.');
  const [running, setRunning] = React.useState(false);
  const [plan, setPlan] = React.useState(null);

  const generate = () => {
    setRunning(true);
    setPlan(null);
    setTimeout(() => {
      setRunning(false);
      setPlan([
        { type: 'BOOST', body: 'Raymarine kategori ağırlığını x1.8 — Axiom serisi x2.4', icon: 'arrow-up-right' },
        { type: 'SYNONYM', body: '"axiom" → "raymarine axiom" alias\'ı eklendi (24 model kapsıyor)', icon: 'plus' },
        { type: 'LANDING', body: 'AI ile "/en-cok-secilen-raymarine-mfd" SEO landing taslağı hazır', icon: 'arrow-right' },
        { type: 'BANNER', body: 'Anasayfa hero altı banner önerisi: "Türkiye\'de yetkili distribütör"', icon: 'sparkle' },
        { type: 'PIN', body: 'Axiom 9 Pro, Axiom 12 RV, Quantum Q24C ürünleri "Top picks" rail\'inde sabitlendi', icon: 'check' },
      ]);
    }, 1200);
  };

  return (
    <>
      <div className="ai-banner ai-banner--lab">
        <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 Merchandiser <span className="ai-pill">beta</span></div>
          <p className="ai-banner__text">Prompt yazın, sistem boost rule + synonym + landing page + banner + pinned product setini üretsin. Onaylamadan canlıya çıkmaz.</p>
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 24 }}>
        <div className="prompt-box">
          <textarea
            className="prompt-box__ta"
            value={prompt}
            onChange={e => setPrompt(e.target.value)}
            placeholder="Örnek: Lewmar Türkiye'de yetkili distribütör olduğumuz için öne çıksın..."
          />
          <div className="prompt-box__actions">
            <span style={{ fontSize: 12, color: 'var(--km-ink-500)' }}>
              <Icon name="warn" size={11} stroke={2}/> AI önerileri onayınızdan sonra canlıya alınır
            </span>
            <button className="btn btn--accent btn--sm" disabled={running} onClick={generate}>
              <Icon name="sparkle" size={12}/> {running ? 'Üretiliyor…' : 'Plan üret'}
            </button>
          </div>
        </div>
      </div>

      {running && (
        <div className="panel" style={{ textAlign: 'center', padding: 48, color: 'var(--km-ink-500)' }}>
          <div className="ai-loader"/>
          <div style={{ marginTop: 14 }}>Veri analizi, rule generation, landing page taslağı…</div>
        </div>
      )}

      {plan && (
        <div className="panel">
          <div className="panel__head">
            <div><h2>Önerilen plan · 5 değişiklik</h2><div className="panel__sub">Tahmini etki: Raymarine outbound +%34 / Axiom serisi PDP trafiği +%62</div></div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn btn--ghost btn--sm">İptal</button>
              <button className="btn btn--primary btn--sm">Hepsini onayla</button>
            </div>
          </div>
          <div className="ai-plan">
            {plan.map((step, i) => (
              <div className="ai-plan__step" key={i}>
                <div className="ai-plan__num">{i + 1}</div>
                <div style={{ flex: 1 }}>
                  <div className="ai-plan__type">{step.type}</div>
                  <div className="ai-plan__body">{step.body}</div>
                </div>
                <button className="btn btn--ghost btn--sm">Sadece bunu onayla</button>
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

// =====================================================================
// AUTO-HEAL SEARCH (P2 stub)
function AdminAutoHeal() {
  const queue = [
    { type: 'Typo', term: 'gramin echomap', fix: 'garmin echomap', conf: 99, applied: false },
    { type: 'Synonym', term: 'evo3 16 inch', fix: '"NSS Evo3 16\\"" alias', conf: 94, applied: false },
    { type: 'Category map', term: 'mercury yağ', fix: 'redirect → motor-parcalari/mercury-yag', conf: 87, applied: true },
    { type: 'AI alias', term: 'lewmar windlass v700', fix: 'lewmar-v700-windlass canonical', conf: 92, applied: false },
    { type: 'Typo', term: 'raymarne axiom', fix: 'raymarine axiom', conf: 98, applied: true },
    { type: 'AI alias', term: 'balık bulucu echolot', fix: 'balık bulucu kategorisi alias', conf: 78, applied: false },
  ];
  return (
    <>
      <div className="ai-banner ai-banner--lab">
        <div className="ai-banner__icon"><Icon name="shield" size={20} stroke={1.6}/></div>
        <div className="ai-banner__body">
          <div className="ai-banner__title">Auto-healing search <span className="ai-pill">beta</span></div>
          <p className="ai-banner__text">Sistem typo, synonym, kategori eşleşmesi ve AI generated alias\'ları kendi öneriyor. Aktif konfidans eşiği: <strong>%85+</strong>.</p>
        </div>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__head"><span>Otomatik düzeltme (7g)</span></div><div className="kpi__val tabular">412</div></div>
        <div className="kpi"><div className="kpi__head"><span>Onay bekleyen</span></div><div className="kpi__val tabular" style={{ color: 'var(--km-accent-2)' }}>{queue.filter(q => !q.applied).length}</div></div>
        <div className="kpi"><div className="kpi__head"><span>Ortalama konfidans</span></div><div className="kpi__val tabular">%91</div></div>
        <div className="kpi"><div className="kpi__head"><span>Rollback (7g)</span></div><div className="kpi__val tabular">2</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h2>İyileştirme kuyruğu</h2><div className="panel__sub">Konfidansı %85 altı olanlar manuel onay bekler</div></div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn--ghost btn--sm">Eşiği değiştir</button>
            <button className="btn btn--primary btn--sm">Hepsini onayla</button>
          </div>
        </div>
        <table className="data-table">
          <thead><tr><th>Tip</th><th>Sorgu</th><th>Önerilen düzeltme</th><th>Konfidans</th><th>Durum</th><th></th></tr></thead>
          <tbody>
            {queue.map((r, i) => (
              <tr key={i}>
                <td><strong>{r.type}</strong></td>
                <td className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>"{r.term}"</td>
                <td style={{ fontSize: 13 }}>{r.fix}</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: r.conf + '%', background: r.conf >= 90 ? 'var(--km-good)' : r.conf >= 85 ? 'var(--km-accent-2)' : 'var(--km-warn)' }}/>
                    </div>
                    <span className="tabular" style={{ fontSize: 12 }}>%{r.conf}</span>
                  </div>
                </td>
                <td>{r.applied ? <><span className="dot dot--good"/>Uygulandı</> : <><span className="dot dot--warn"/>Bekliyor</>}</td>
                <td>
                  {!r.applied && <div style={{ display: 'flex', gap: 4 }}>
                    <button className="btn btn--ghost btn--sm">Red</button>
                    <button className="btn btn--primary btn--sm">Onayla</button>
                  </div>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

Object.assign(window, { AdminActions, AdminRevenueLeaks, AdminAiMerchandiser, AdminAutoHeal });