// Strategy 101 — 5-yaşına anlatır gibi.
//
// Bu sayfa Onboarding'den ayrı tutuldu çünkü farklı amacı var:
// Onboarding terim sözlüğü + UI metric haritası (referans tabanlı),
// Strategy 101 ise lineer hikaye (öğrenme tabanlı). Bot'la yeni
// tanışan operatör buradan başlar.

const { Card } = window.UI;

function PageStrategy101({ app, setApp }) {
  return (
    <div className="p-6 max-w-[820px] mx-auto space-y-6">
      <header className="space-y-1">
        <h1 className="text-[22px] font-semibold text-ink-0">Bot ne yapıyor? — basitçe</h1>
        <p className="text-[13px] text-ink-2 leading-relaxed">
          Beş dakikada anlat: bu bot ne yapıyor, neden yapıyor, ben ne bekliyorum. Detay teknik açıklama "How it Works" sayfasında.
        </p>
      </header>

      <Card padded>
        <Section n="1" title="Tek cümlede: bot coin sayını büyütmeye çalışır" />
        <P>
          USD değil — <B>coin sayısını</B>. Yani bot başlangıçta 1.0 BTC tutuyorsa, hedef 12 ay sonra 1.05 BTC. Bu süreçte BTC fiyatı %30 düşmüş ya da %200 yükselmiş olabilir; bot için fark etmez. Sayı önemli.
        </P>
        <P>
          Niye? Çünkü uzun vadeli inanç şu: <I>elimde tuttuğum coin'lerin USD karşılığı, 5 yıl sonra şu anki değerinin çok üstünde olacak</I>. Yapacağın iş bu süreçte coin sayını büyütmek.
        </P>
      </Card>

      <Card padded>
        <Section n="2" title="Nasıl büyüyor? Kısa cevap: pump'ı satıp dump'ı alarak" />
        <P>
          Diyelim 1 BTC tutuyorsun ve watchlist'te ETH var. Geçmişe bak: <Code>1 BTC ≈ 30 ETH</Code> ortalaması var. Bu "normal değer" → buna <B>baseline</B> diyelim.
        </P>
        <P>
          Şimdi piyasa anormal davranıyor: <Code>1 BTC = 33 ETH</Code> oldu. Yani BTC bir nedenle ETH'e göre %10 fazla şişti.
        </P>
        <P className="text-pos-0">
          Bot'un düşüncesi: <I>"ben şu an 1 BTC tutuyorum. Eğer bunu 33 ETH'e çevirirsem, sonra ETH/BTC normale dönerken (33 → 30) ben aslında sayıca daha çok ETH'e sahip olacağım. ETH normale dönerken USD değerim aynı kalır ama coin sayısı arttı."</I>
        </P>
        <P>
          Karar: <Code>SELL 1 BTC → USDT</Code>, sonra <Code>BUY USDT → 33 ETH</Code>. Daha sonra ETH/BTC oranı normale dönünce, eğer 33 ETH'i tekrar BTC'ye çevirirsen <B>1.10 BTC</B> elde edersin (33/30 ≈ 1.1). Sayı arttı.
        </P>
      </Card>

      <Card padded>
        <Section n="3" title="Demek ki bot lag'leri arıyor" />
        <P>
          Senin sezgin doğru: BTC pump ettiğinde, alt coin'ler bazen geç yansıtır. Ya da tersine: alt coin'ler önce hareket eder, sonra BTC. Bot bu <B>geç yansımaları</B> yakalamaya çalışır.
        </P>
        <P>
          Önemli: bot pump'ı <B>zirvede</B> satmaz, dump'ı <B>dipte</B> almaz. Sadece "şu anki tuttuğum coin diğerine göre fazla şişti" sinyalini gördüğünde takas yapar. <I>Mean reversion</I> stratejisi.
        </P>
      </Card>

      <Card padded>
        <Section n="4" title="Bot ne sıklıkta karar verir?" />
        <P>
          Borsadan her saniye yeni fiyat geliyor (<B>BBO</B> = best bid/offer). Bot her gelen fiyatla şu hesabı yapar:
        </P>
        <pre className="bg-bg-2 border border-line-0 p-3 mono text-[11.5px] text-ink-1 overflow-x-auto leading-relaxed">
{`# Her watchlist coini için (current_coin hariç):
ratio_now = price[current_coin] / price[other]
score     = (1 - fee) × ratio_now / baseline - 1 - margin
# score > 0 olan en yüksek skorlu coin'e jump
# margin = bizde 0.5%, fee = ~0.1%`}
        </pre>
        <P>
          <B>Saniyede 5-50 kez</B> bu hesabı yapar (gelen BBO sayısına göre). Status header'da <Code>scout · N/s</Code> rakamı bu — her N saniyede bir scout yapıldı demek.
        </P>
      </Card>

      <Card padded>
        <Section n="5" title="Baseline neden 'sürekli kayıyor'?" />
        <P>
          Eğer baseline anlık fiyat oranıyla aynı tutulursa, hiçbir sapma yakalanmaz (her zaman ratio = baseline). Bu yüzden baseline <B>yavaş yavaş</B> günceller — bizde her tick'te:
        </P>
        <pre className="bg-bg-2 border border-line-0 p-3 mono text-[11.5px] text-ink-1">
{`baseline = α × current_ratio + (1 - α) × baseline
# α = 0.02  (yani baseline %2 yeni, %98 eski)`}
        </pre>
        <P>
          Bu <B>EMA (exponential moving average)</B>. Anlık spike'lar baseline'ı az hareket ettirir, bot spike'ı yakalar. Aynı zamanda piyasa kalıcı bir yeni seviyeye geçerse (örn. ETH 2 ay boyunca BTC'ye göre %20 daha değerli), baseline da yavaşça oraya kayar — bot eski piyasaya göre yanlış sinyal vermez.
        </P>
      </Card>

      <Card padded>
        <Section n="6" title="Risk: ya bot yanlış zamanda satarsa?" />
        <P>
          Olur. Bot her zaman doğruyu yakalamaz. Birkaç koruma:
        </P>
        <ul className="space-y-1.5 list-disc pl-5 text-[12.5px] text-ink-2">
          <li><B>Margin (0.5%)</B>: ratio sadece %0.5 sapmasında jump yok — gürültüden değer üretmemek için.</li>
          <li><B>Fee buffer</B>: round-trip fee (~0.4%) margin'in içine konuyor; bot fee'yi kaybetmesin.</li>
          <li><B>Min hold (90s)</B>: son jump'tan beri 90 saniye geçmeden yeni jump yok. Ping-pong önleyici.</li>
          <li><B>Cooldown back (10dk)</B>: A→B yaptıktan sonra B→A için 10 dakika ekstra beklenir. "Yanlış yöne kaymıştık" tuzağı.</li>
          <li><B>Bridge depeg (USDT)</B>: USDT 0.98'in altına düşerse bot dur. Stable coin krizinde otomatik kaçış.</li>
          <li><B>Flash crash filter</B>: 60 saniyede %5 düşen coin'e jump yasak.</li>
          <li><B>Daily loss halt (%3)</B>: portföy 24 saatte %3 düşerse bot kendini halt eder, sen onaylamadan trade yok.</li>
          <li><B>Boot-halted</B>: bot her açılışta halted state'de başlar. Sen Resume tuşuna basana kadar trade yok.</li>
        </ul>
      </Card>

      <Card padded>
        <Section n="7" title="UI'da gördüklerin ne demek?" />
        <Glossary
          items={[
            { t: 'Current coin', d: 'Bot şu an cüzdanda hangi coin\'i tutuyor. Her tamamlanan jump bunu günceller.' },
            { t: 'Equity / USDT', d: 'Tüm coin\'lerin USD eşdeğer toplamı. Bot bunu doğrudan optimize etmiyor — coin sayısını optimize ediyor — ama drawdown ölçmek için bu sayı önemli. Yan piyasada equity yatay seyreder.' },
            { t: '24h P&L', d: 'Son 24 saatte equity yüzdesi. -3% altında bot kendini durdurur (daily_loss_halt).' },
            { t: 'Recent trades', d: 'Son 10 jump. State sütunu: FILLED (gerçekleşti), REJECTED (gate engelledi).' },
            { t: 'Scout iter/s', d: 'Saniyede bot kaç kez "jump var mı?" diye scout yaptı. Yüksek = piyasa volatil + BBO akışı hızlı.' },
            { t: 'Equity curve', d: 'Dakikada bir alınan equity snapshot grafiği. Yatay seyreder ama her başarılı jump\'ta küçük yukarı sıçramalar görmelisin (coin sayısı arttı, USD değer korundu/arttı).' },
            { t: 'Pairs heatmap', d: 'Her hücre o pair\'in effective score\'u. Yeşil = jump candidate, kırmızı = uzak. Diagonal = current_coin işareti.' },
            { t: 'Outbox queue', d: 'Strategy → dispatcher arası state machine. PENDING (strategy yazdı) → DISPATCHING (dispatcher claim etti) → CONFIRMED (her iki leg fill oldu) ya da DEAD (risk gate engelledi).' },
            { t: 'Ticker column', d: '8 pair için canlı BBO (mid price + change). SSE push tabanlı; HTTP request değil.' },
          ]}
        />
      </Card>

      <Card padded>
        <Section n="8" title="Ne bekliyorum?" />
        <P>
          <B>Volatil piyasa, az korele coin'ler</B> → çok jump, yüksek coin gain. (ideal koşul)
        </P>
        <P>
          <B>Yan piyasa</B> → ratio'lar baseline civarında oynar, bot jump bulamaz. Equity yatay seyreder. Bu <I>kayıp değildir</I> — sadece bot işsiz.
        </P>
        <P>
          <B>Tüm piyasa senkron pump/dump</B> → bot avantaj bulamaz, sadece o anki coin'i tutar. Coin sayısı korunur ama USD değeri piyasayla birlikte hareket eder.
        </P>
        <P>
          <B>Bear market</B> → bot hâlâ alt coin tutar. Coin sayısı korunabilir/artabilir ama USD düşer. Bot durduğunda hâlâ coin'lerinin USD karşılığını piyasa belirler.
        </P>
        <P className="text-amb-0">
          <B>Bot kâr garantisi vermez.</B> Tarihsel test'lerde çoğu bull market'te coin gain pozitif ama bear market'te değişken. Bizim anlamamız gereken: bu bot bir <I>edge</I> sağlar (mean reversion'dan), <I>kâr</I> sağlamaz.
        </P>
      </Card>

      <Card padded>
        <Section n="9" title="Şu an bot ne yapıyor?" />
        <Status app={app} setApp={setApp} />
      </Card>

      <Card padded>
        <Section n="10" title="Sıradaki — sen ne yapacaksın?" />
        <ol className="list-decimal pl-5 space-y-1.5 text-[12.5px] text-ink-2">
          <li>UI'da Dashboard sayfasını izle: Ticker'da fiyatlar canlı flash etmeli, Pairs heatmap'inde score'lar hesaplanıyor olmalı.</li>
          <li>"How it Works" sayfasından detay terim açıklamalarına bak.</li>
          <li>Hazır olduğunda Control sayfasından Resume tuşuna bas. Bot trade yapmaya başlar.</li>
          <li>İlk 24 saat boyunca equity curve + recent trades + outbox queue'yu izle. Anormal bir şey görürsen halt'a bas.</li>
          <li>Live'a geçiş için "How it Works" sayfasındaki <B>Cold start</B> bölümünü takip et.</li>
        </ol>
      </Card>
    </div>
  );
}

function Section({ n, title }) {
  return (
    <h2 className="text-[15px] font-semibold text-ink-0 mb-3 flex items-center gap-2.5">
      <span className="w-6 h-6 grid place-items-center bg-pos-2/30 border border-pos-1/40 mono text-[11px] text-pos-0">{n}</span>
      {title}
    </h2>
  );
}
function P({ children, className }) {
  return <p className={`text-[13px] text-ink-2 leading-relaxed mb-2 ${className || ''}`}>{children}</p>;
}
function B({ children }) {
  return <span className="text-ink-0 font-medium">{children}</span>;
}
function I({ children }) {
  return <em className="text-ink-1 not-italic">"{children}"</em>;
}
function Code({ children }) {
  return <code className="mono text-[11.5px] px-1 py-0.5 bg-bg-2 border border-line-0 text-ink-1">{children}</code>;
}

function Glossary({ items }) {
  return (
    <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3 text-[12.5px] mt-1">
      {items.map(it => (
        <div key={it.t}>
          <dt className="mono text-[11.5px] text-ink-0">{it.t}</dt>
          <dd className="text-ink-2 text-[12px] mt-0.5 leading-relaxed">{it.d}</dd>
        </div>
      ))}
    </dl>
  );
}

function Status({ app, setApp }) {
  const goControl = () => setApp(s => ({ ...s, _navTo: 'control', _navAt: Date.now() }));
  const goDash = () => setApp(s => ({ ...s, _navTo: 'dashboard', _navAt: Date.now() }));
  return (
    <div className="space-y-2 text-[13px]">
      {app.halted ? (
        <>
          <P className="text-neg-0 mb-0"><B>Bot HALTED</B>. Strategy scout ediyor + ticker akıyor + equity loop snapshotluyor — ama dispatcher pasif, hiçbir trade yok.</P>
          <P>Sebep: <Code>{app.halted}</Code></P>
          <button onClick={goControl} className="mt-1 px-3 h-8 mono text-[11px] uppercase tracking-[0.1em] bg-pos-2 border border-pos-1 text-ink-0 hover:bg-pos-1">Control sayfasına git → Resume</button>
        </>
      ) : (
        <>
          <P className="text-pos-0 mb-0"><B>Bot RUNNING</B>. Strategy scout ediyor, dispatcher hazır, jump'lar gerçekleşiyor.</P>
          <button onClick={goDash} className="mt-1 mono text-[11.5px] text-inf-0 hover:text-ink-0">Dashboard'a git →</button>
        </>
      )}
    </div>
  );
}

window.PageStrategy101 = PageStrategy101;