// Onboarding — explains the bot's strategy + maps every UI widget to
// what it actually means. Lives at /ui/#onboarding (keyboard "H").
//
// Bilingual on purpose: section headers + body in Turkish (operator's
// preferred language), code/term anchors in English so they match the
// log lines and config keys 1:1. Don't translate the term names.
const { Card, Pill } = window.UI;

function PageOnboarding({ app, setApp }) {
  const goControl = () => setApp(s => ({ ...s, _navTo: 'control', _navAt: Date.now() }));
  const goDashboard = () => setApp(s => ({ ...s, _navTo: 'dashboard', _navAt: Date.now() }));

  return (
    <div className="p-6 max-w-[1100px] mx-auto space-y-6">
      <header className="space-y-1">
        <h1 className="text-[20px] font-semibold text-ink-0">project-bad — nasıl çalışıyor?</h1>
        <p className="text-[12.5px] text-ink-2 leading-relaxed">
          Bu bot bir <span className="text-ink-0">bridge-coin ratio trading</span> botu. Hedefi <span className="text-ink-0">kâr değil, sahip olduğu coin'in adedini büyütmek</span>.
          Aşağıda strategy mantığı + UI'daki her metriğin ne anlama geldiği var. Terimleri ezberlemen gerekmez —
          sayfaları gezerken hover ile tooltip çıkacak (M11.x'te eklenecek).
        </p>
      </header>

      {/* Quick status banner */}
      {app.halted ? (
        <div className="bg-neg-2/20 border border-neg-1/40 px-4 py-3 flex items-center gap-3">
          <Icon.AlertTri size={18} className="text-neg-0 shrink-0"/>
          <div className="flex-1 mono text-[12px] text-ink-1">
            Bot şu anda <span className="text-neg-0 font-semibold">HALTED</span>.
            <span className="text-ink-3"> · {app.halted}</span>
          </div>
          <button onClick={goControl} className="px-3 h-7 mono text-[11px] uppercase tracking-[0.1em] bg-pos-2 border border-pos-1 text-ink-0 hover:bg-pos-1">
            Resume → Control
          </button>
        </div>
      ) : (
        <div className="bg-pos-2/15 border border-pos-1/40 px-4 py-3 flex items-center gap-3">
          <Icon.Power size={18} className="text-pos-0 shrink-0"/>
          <div className="flex-1 mono text-[12px] text-ink-1">
            Bot <span className="text-pos-0 font-semibold">RUNNING</span>. Strategy scout ediyor, dispatcher hazır, equity loop snapshot alıyor.
          </div>
          <button onClick={goDashboard} className="mono text-[11px] uppercase tracking-[0.1em] text-inf-0 hover:text-ink-0">
            Dashboard →
          </button>
        </div>
      )}

      {/* SECTION: Strategy */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">1 · Strategy nasıl karar veriyor?</h2>
        <Card padded>
          <div className="space-y-4 text-[12.5px] leading-relaxed">
            <p>
              Bot her an <span className="text-ink-0">tek bir alt coin</span> tutar — buna <Term>current_coin</Term> denir.
              USDT (<Term>bridge</Term>) sadece geçici bir durak; bot uzun süre USDT'de oturmaz.
            </p>
            <p>
              Her market tick'inde bot şu soruyu sorar:
            </p>
            <blockquote className="border-l-2 border-inf-1 pl-3 mono text-[11.5px] text-ink-1">
              "Elimdeki BTC'yi USDT üzerinden ETH'ye çevirsem, geçmiş ortalamaya göre normalde alacağımdan
              daha fazla ETH alır mıyım? Eğer evetse, fee'leri ödedikten sonra hâlâ kâr ediyor muyum?"
            </blockquote>
            <p>
              Cevap pozitifse <Term>jump</Term> tetiklenir: <span className="mono">SELL BTC→USDT</span>, ardından <span className="mono">BUY USDT→ETH</span> — iki ayağı arka arkaya market order ile çalıştırır.
              Sonuç: ETH adedin baseline'a göre biraz daha fazla. Bu küçük avantajlar zamanla birikir.
            </p>
          </div>
        </Card>
      </section>

      {/* SECTION: Key terms */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">2 · Anahtar terimler</h2>
        <Card padded>
          <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3 text-[12.5px] leading-relaxed">
            <Def term="ratio (current_ratio)" desc="İki coin'in anlık fiyat oranı. P_btc / P_eth ≈ 33.7 (1 BTC = 33.7 ETH)."/>
            <Def term="baseline" desc="Bu pair için 'normal' ratio. EMA modunda yavaş güncellenir (α=0.02 → uzun hatıra). Anlık spike'lar baseline'ı çok hareket ettirmez."/>
            <Def term="raw score" desc="Mode=margin formülü: (1 - fee) · current_ratio / baseline - 1 - margin. Pozitifse 'fee+margin'i geçtim, jump değer'."/>
            <Def term="effective score" desc="raw_score'dan slippage + safety düşülmüş hâli. Karar verici: pozitifse jump."/>
            <Def term="margin (scout_margin_pct)" desc="Jump'ı tetiklemek için baseline'ın yüzde kaç üstüne çıkılmalı. Bizde 0.5%."/>
            <Def term="fee" desc="Round-trip işlem ücreti. Margin > 4×fee olmalı (matematik ispatı strategy-math.md'de)."/>
            <Def term="EMA (Exponential Moving Average)" desc="Baseline'ı yumuşatma yöntemi. baseline ← α · current + (1-α) · baseline. α=0.02 → çok yumuşak."/>
            <Def term="anti-whipsaw" desc="Ping-pong önleyici: min_hold (90s) son jump'tan beri minimum bekleme; cooldown_back (10dk) A→B sonrası B→A için ekstra bekleme."/>
            <Def term="bridge depeg" desc="USDT 0.98'in altına düşerse bot kill switch'i tripler. Stable coin krizinde bot kaçar."/>
            <Def term="flash crash guard" desc="Bir coin 60sn'de %5 düşerse o coin'e jump yasak. Manipülasyon ve panic dump koruması."/>
            <Def term="dry_run" desc="true ise strategy karar verir ama outbox'a yazmaz, sadece log'lar. Test için. Şu an false (gerçek trade yapıyor)."/>
          </dl>
        </Card>
      </section>

      {/* SECTION: Jump pipeline */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">3 · Bir jump nasıl yürütülür?</h2>
        <Card padded>
          <ol className="space-y-2 text-[12.5px] leading-relaxed list-decimal pl-5">
            <li><span className="text-ink-0">Strategy karar</span>: scout pozitif effective score buldu → <Term>JumpPayload</Term> üretir.</li>
            <li><span className="text-ink-0">Outbox</span>: <Term>EnqueueOutbox</Term> ile <span className="mono text-ink-2">trade_outbox</span> tablosuna PENDING olarak yazılır. Bot crash ederse bu satır kalır, restart sonra dispatcher devam eder (<Term>ADR-006</Term>).</li>
            <li><span className="text-ink-0">Dispatcher claim</span>: ClaimNextPending → DISPATCHING. Aynı satırı iki goroutine alamaz (atomic).</li>
            <li><span className="text-ink-0">Risk gate</span>: <Term>gate.Allow(intent)</Term> — kill switch, bridge depeg, slippage, error budget, flash crash kontrolleri. Reddedilirse <Term>MarkDead</Term>, asla retry edilmez.</li>
            <li><span className="text-ink-0">SELL leg</span>: <span className="mono">{"{from}/USDT"}</span> market sell, tüm bakiye.</li>
            <li><span className="text-ink-0">BUY leg</span>: <span className="mono">{"{to}/USDT"}</span> market buy, tüm USDT (-0.5% fee buffer).</li>
            <li><span className="text-ink-0">Trade INSERT</span>: <span className="mono text-ink-2">trades</span> tablosuna FILLED satırı + dispatcher'ın <Term>OnJumpConfirmed</Term> callback'i SSE 'trade' topic'ine push.</li>
            <li><span className="text-ink-0">Strategy.CompleteJump</span>: current_coin güncellenir, lastJumpAt set, baselines re-seed.</li>
            <li><span className="text-ink-0">MarkConfirmed</span>: outbox satırı CONFIRMED, akış tamamlandı.</li>
          </ol>
          <p className="text-[11px] text-ink-3 mono mt-3">
            Tüm bu adımlar 1-3 saniye içinde gerçekleşir. Hata olursa retry/backoff veya DEAD letter.
          </p>
        </Card>
      </section>

      {/* SECTION: UI metric map */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">4 · UI metrik haritası</h2>
        <Card padded={false}>
          <table className="w-full text-[12px]">
            <thead className="text-ink-3 mono text-[10px] uppercase tracking-[0.1em] border-b border-line-0">
              <tr>
                <th className="text-left font-medium px-3 py-2 w-[180px]">widget</th>
                <th className="text-left font-medium px-3 py-2">ne anlama gelir</th>
                <th className="text-left font-medium px-3 py-2 w-[140px]">veri kaynağı</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-line-0">
              <Row w="Status header" desc="Account label, bridge, mode (testnet/live), running/halted state. Halted ise tıklanabilir → Control sayfasına atar." src="/api/v1/accounts + /api/v1/control"/>
              <Row w="Current coin" desc="Bot şu an hangi coin'i tutuyor. Her tamamlanan jump bunu günceller." src="/api/v1/dashboard.current_coin"/>
              <Row w="Equity / USDT" desc="Tüm coin'lerin USD eşdeğer toplamı. Strategy bunu maksimize etmiyor — coin sayısını maksimize ediyor. Equity drawdown ölçer." src="coin_values aggregate"/>
              <Row w="24h P&L" desc="Son 24 saatte equity değişim yüzdesi. Negatif olursa daily_loss tracker tetiklenebilir (bizde max %3 → halt)." src="equity_curve diff"/>
              <Row w="Recent trades" desc="Son 10 jump. State sütunu: FILLED (başarılı), REJECTED (gate engelledi), PARTIALLY_FILLED (likidite eksik)." src="trades tablosu"/>
              <Row w="Scout iter/s" desc="Saniyede kaç scout iteration. Henüz Prometheus counter wired değil (M11.x follow-up)." src="(yakında)"/>
              <Row w="Alerts (24h)" desc="Son 24h içinde risk gate trip + dispatcher hata sayısı. 0 ise temiz." src="api_events warn/error"/>
              <Row w="Equity curve" desc="Dakikalık equity snapshot grafiği. Drawdown ve trend görselleştirmesi." src="coin_values · 60s"/>
              <Row w="Ticker column" desc="8 pair'in canlı BBO'su (mid price + 24h Δ). SSE 'ticker' topic'inden push." src="binance ws stream"/>
              <Row w="Outbox queue" desc="Strategy intent state machine: PENDING → DISPATCHING → SENT → CONFIRMED. FAILED retry edilir, DEAD operatör müdahalesi gerekir." src="trade_outbox aggregate"/>
              <Row w="Pairs heatmap" desc="Her (from, to) hücresi pair'in effective score'u. Yeşil=pozitif (jump candidate), kırmızı=negatif. Diagonal=current_coin." src="pairs tablosu"/>
              <Row w="Logs" desc="Bot'un journald log akışı. Filter: severity (info/warn/error), kind (binance_ws_*, dispatcher_*, risk_*)." src="logtail ring buffer"/>
              <Row w="Replay" desc="Tarihi event_log'u zaman içinde 'play' ile yeniden oynatma. Strategy decision'larını sebep-sonuç olarak görmek için." src="event_log tablosu"/>
            </tbody>
          </table>
        </Card>
      </section>

      {/* SECTION: Cold start */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">5 · Live mode'a geçmek için cold start</h2>
        <Card padded>
          <div className="space-y-3 text-[12.5px] leading-relaxed">
            <p className="text-amb-0">
              <Icon.AlertTri size={13} className="inline -mt-0.5 mr-1"/>
              Bot şu an <span className="text-ink-0">testnet</span>'te çalışıyor (43.207.61.5). Live'a geçmeden önce şu adımlar mutlaka:
            </p>
            <ol className="space-y-2 list-decimal pl-5">
              <li>
                <span className="text-ink-0">Binance KYC level 2 tamamla.</span> Spot wallet'a $50–100 USDT yatır.
                Risk seviyeni başlangıçta düşük tut.
              </li>
              <li>
                <span className="text-ink-0">USDT'nin tamamı ile bir alt coin satın al</span> — örn. BNB (fee indirimi için) veya BTC.
                Strategy bridge'i tutarken pasif (M11.x follow-up'a kadar), o yüzden bir alt coin'le başlamak şart.
              </li>
              <li>
                <span className="text-ink-0">Live API key oluştur</span>: Binance → API Management → Create.
                <span className="block text-ink-3 mono text-[11px] mt-1 ml-1">
                  ✓ Enable Reading · ✓ Enable Spot Trading · <span className="text-neg-0">✗ Enable Withdrawals (asla açma)</span>
                </span>
                Bot bootstrap'ta <Term>canWithdraw=false</Term> doğrulamasını yapıyor — açıksa boot etmiyor.
              </li>
              <li>
                <span className="text-ink-0">IP restriction ekle</span>: AWS Tokyo instance'ının elastic IP'sini whitelist'le. Restart sonrası IP değişebilir, EIP attach M14'te.
              </li>
              <li>
                Tokyo instance'a SSH ile bağlan, <span className="mono text-ink-2">~/bot.env</span>'i live key/secret ile güncelle, <span className="mono text-ink-2">~/bot.yaml</span>'da <span className="mono">mode: live</span> + <span className="mono">initial_coin: &lt;ne aldıysan&gt;</span>.
              </li>
              <li>
                Bot restart. <span className="text-ink-0">Boot-halted default</span> nedeniyle dispatcher pasif başlar; UI'dan <span className="text-pos-0">Resume</span> tuşuna basana kadar trade yok.
              </li>
              <li>
                Dashboard'da BBO akışı + balance + equity curve'i izle. Gözüne anormal bir şey gelmiyorsa Resume.
                <span className="text-ink-3"> İlk hafta her gün halt drill yap (HALT bas → durduğunu doğrula → Resume).</span>
              </li>
            </ol>
            <p className="text-[11px] text-ink-3 mt-2">
              Daha detaylı runbook: <span className="mono">docs/runbooks/aws-deploy.md</span> + <span className="mono">docs/runbooks/testnet-smoke.md</span>.
            </p>
          </div>
        </Card>
      </section>

      {/* SECTION: Safety */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">6 · Bot kendini nasıl korur?</h2>
        <Card padded>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-[12px]">
            <Safety title="Kill switch" desc="Bir kez tripped olursa dispatcher hiçbir outbox satırını drain etmez. UI'dan Resume yapana kadar bot pasif." />
            <Safety title="Boot-halted default" desc="Bot her boot'ta halted state'le başlar. Operatör manuel arm etmeden işlem yok." />
            <Safety title="Daily loss auto-halt" desc="Equity referans değerine göre %3'ten fazla düşerse bot kendini halt eder + api_events'e log atar." />
            <Safety title="Bridge depeg" desc="USDT 0.98 altı veya 1.02 üstü → kill switch trip. Stable coin krizinde otomatik kaçış." />
            <Safety title="Flash crash" desc="60sn pencerede %5 düşen coin'e jump yasak. Anomali tespiti." />
            <Safety title="Min trade notional" desc="$5 altı jump'lar skip — fee'lerin işlemi karsız bırakacağı seviye." />
            <Safety title="Max slippage" desc="%0.5'ten yüksek beklenen slippage → jump iptal. İllikit market koruması." />
            <Safety title="Idempotent client_order_id" desc="Her order benzersiz ID ile gönderilir. Network kopması olsa bile retry duplicate yaratmaz." />
            <Safety title="Outbox crash recovery" desc="Bot crash'lerse outbox'taki PENDING satırlar bekler. Restart sonrası dispatcher kaldığı yerden devam eder." />
            <Safety title="Permission check" desc="Bootstrap'ta canWithdraw=false doğrulanır. Bot gerçek para çekemiyor — sadece spot trade." />
          </div>
        </Card>
      </section>

      {/* SECTION: Roadmap */}
      <section>
        <h2 className="text-[15px] font-medium text-ink-0 mb-3">7 · Bilinen eksikler / yol haritası</h2>
        <Card padded>
          <ul className="space-y-2 text-[12px] leading-relaxed list-disc pl-5">
            <li><span className="text-ink-0">Bridge-entry decision</span>: USDT tutarken otomatik scout. Şu an manuel coin satın almak gerekiyor.</li>
            <li><span className="text-ink-0">REST user-data poller</span> (testnet): testnet listenKey 410 dönüyor; live'da gerek yok.</li>
            <li><span className="text-ink-0">Prometheus metric instrumentation</span>: adapter-level (ws_reconnect_total, exchange_error_total).</li>
            <li><span className="text-ink-0">sony/gobreaker circuit breaker</span>: REST call'larını sarmak için.</li>
            <li><span className="text-ink-0">Replay recorder</span>: adapter-level event'ler için (strategy + dispatcher zaten yazıyor).</li>
            <li><span className="text-ink-0">M14 deploy</span>: EIP, TLS (Caddy), EBS snapshot backup, IaC (Terraform).</li>
            <li><span className="text-ink-0">M16 research harness</span>: parametre sweep — hangi scout_margin / baseline_alpha kombinasyonu en kârlı.</li>
            <li><span className="text-ink-0">M10 backtest runner</span>: tarihi data üzerinde strategy çalıştırma.</li>
          </ul>
        </Card>
      </section>
    </div>
  );
}

function Term({ 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 Def({ term, desc }) {
  return (
    <div>
      <dt className="mono text-[11.5px] text-ink-0">{term}</dt>
      <dd className="text-ink-2 text-[12px] mt-0.5">{desc}</dd>
    </div>
  );
}

function Row({ w, desc, src }) {
  return (
    <tr className="hover:bg-bg-2/40">
      <td className="px-3 py-2 mono text-[11.5px] text-ink-0 align-top">{w}</td>
      <td className="px-3 py-2 text-ink-2 align-top">{desc}</td>
      <td className="px-3 py-2 mono text-[10.5px] text-ink-3 align-top">{src}</td>
    </tr>
  );
}

function Safety({ title, desc }) {
  return (
    <div className="border border-line-0 px-3 py-2">
      <div className="text-[12px] text-ink-0 mb-0.5">{title}</div>
      <div className="text-[11.5px] text-ink-2 leading-relaxed">{desc}</div>
    </div>
  );
}

window.PageOnboarding = PageOnboarding;