// fp-bankroll.jsx — Bankroll Manager: Kelly, Limits, Goals, History
const { useState: useBR, useEffect: useBE, useMemo: useBM, useRef: useBRF } = React;

// ─── Kelly Calculator ─────────────────────────────────────────
function kellyFraction(probability, odds) {
  const p = probability / 100;
  const q = 1 - p;
  const b = odds - 1;
  const f = (b * p - q) / b;
  return Math.max(0, Math.min(f, 0.25)); // cap at 25%
}

// ─── Gauge Component ──────────────────────────────────────────
function BankrollGauge({ current, initial, goal }) {
  const pct = goal > 0 ? Math.min((current / goal) * 100, 100) : 0;
  const profit = current - initial;
  const profitPct = initial > 0 ? ((profit / initial) * 100) : 0;
  const color = profit >= 0 ? '#22ff88' : '#ff5470';
  const r = 54; const circ = 2 * Math.PI * r;
  const dash = (pct / 100) * circ;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '16px 0 10px' }}>
      <div style={{ position: 'relative', width: 140, height: 140 }}>
        <svg width="140" height="140" viewBox="0 0 140 140">
          <circle cx="70" cy="70" r={r} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="10" />
          <circle cx="70" cy="70" r={r} fill="none" stroke={color} strokeWidth="10"
            strokeDasharray={`${dash} ${circ}`} strokeLinecap="round"
            transform="rotate(-90 70 70)" style={{ transition: 'stroke-dasharray 1s ease', filter: `drop-shadow(0 0 8px ${color}80)` }} />
          <circle cx="70" cy="70" r={r - 16} fill="none" stroke="rgba(255,255,255,0.03)" strokeWidth="1" />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'JetBrains Mono', color: 'rgba(255,255,255,0.95)' }}>€{current.toFixed(0)}</div>
          <div style={{ fontSize: 10, color: color, fontFamily: 'JetBrains Mono', fontWeight: 700 }}>{profit >= 0 ? '+' : ''}{profitPct.toFixed(1)}%</div>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'Inter' }}>von €{goal}</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>START</div>
          <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'JetBrains Mono', color: 'rgba(255,255,255,0.6)' }}>€{initial}</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>PROFIT</div>
          <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'JetBrains Mono', color }}>{profit >= 0 ? '+' : ''}€{profit.toFixed(2)}</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>ZIEL</div>
          <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'JetBrains Mono', color: '#ffb648' }}>€{goal}</div>
        </div>
      </div>
    </div>
  );
}

// ─── Kelly Stake Calculator ───────────────────────────────────
function KellyCalculator({ bankroll }) {
  const [odds, setOdds] = useBR(2.00);
  const [prob, setProb] = useBR(60);
  const f = kellyFraction(prob, odds);
  const halfKelly = f / 2;
  const stakeKelly = bankroll * f;
  const stakeHalf = bankroll * halfKelly;
  const ev = (prob / 100) * (odds - 1) - (1 - prob / 100);
  const evColor = ev >= 0 ? '#22ff88' : '#ff5470';

  return (
    <div style={{ background: 'rgba(36,218,255,0.04)', border: '1px solid rgba(36,218,255,0.15)', borderRadius: 16, padding: '14px', marginBottom: 14 }}>
      <div style={{ fontSize: 9, color: '#24daff', fontFamily: 'JetBrains Mono', letterSpacing: '.14em', marginBottom: 12 }}>KELLY RECHNER</div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.35)', fontFamily: 'JetBrains Mono', marginBottom: 6 }}>QUOTE</div>
          <input type="number" min="1.01" max="50" step="0.05" value={odds}
            onChange={e => setOdds(parseFloat(e.target.value) || 2)}
            style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid rgba(36,218,255,0.25)', background: 'rgba(36,218,255,0.06)', color: '#24daff', fontFamily: 'JetBrains Mono', fontSize: 15, fontWeight: 700, outline: 'none', textAlign: 'center' }} />
        </div>
        <div>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.35)', fontFamily: 'JetBrains Mono', marginBottom: 6 }}>TREFFERCHANCE %</div>
          <input type="number" min="1" max="99" step="1" value={prob}
            onChange={e => setProb(parseInt(e.target.value) || 60)}
            style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid rgba(255,182,72,0.25)', background: 'rgba(255,182,72,0.06)', color: '#ffb648', fontFamily: 'JetBrains Mono', fontSize: 15, fontWeight: 700, outline: 'none', textAlign: 'center' }} />
        </div>
      </div>

      {/* Prob slider */}
      <input type="range" min="1" max="99" value={prob} onChange={e => setProb(parseInt(e.target.value))}
        style={{ width: '100%', marginBottom: 14, accentColor: '#ffb648' }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        {[
          { label: 'EXPECTED VALUE', value: `${ev >= 0 ? '+' : ''}${(ev * 100).toFixed(1)}%`, color: evColor },
          { label: 'KELLY EINSATZ', value: `€${stakeKelly.toFixed(2)}`, color: '#24daff' },
          { label: '½ KELLY', value: `€${stakeHalf.toFixed(2)}`, color: '#22ff88' },
        ].map(s => (
          <div key={s.label} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 8px', textAlign: 'center', border: `1px solid ${s.color}20` }}>
            <div style={{ fontSize: 7, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.08em', marginBottom: 4 }}>{s.label}</div>
            <div style={{ fontSize: 14, fontWeight: 700, fontFamily: 'JetBrains Mono', color: s.color }}>{s.value}</div>
          </div>
        ))}
      </div>

      {f === 0 && (
        <div style={{ marginTop: 10, padding: '8px 10px', background: 'rgba(255,84,112,0.08)', border: '1px solid rgba(255,84,112,0.2)', borderRadius: 10 }}>
          <span style={{ fontSize: 10, color: '#ff5470', fontFamily: 'Inter' }}>⚠️ Kein Value — Kelly empfiehlt 0% Einsatz</span>
        </div>
      )}
    </div>
  );
}

// ─── Bankroll History Chart ───────────────────────────────────
function BankrollChart({ history, goal }) {
  if (!history || history.length < 2) return null;
  const vals = history.map(h => h.balance).reverse();
  const min = Math.min(...vals, 0);
  const max = Math.max(...vals, goal || 0);
  const range = max - min || 1;
  const W = 310, H = 80;
  const toX = i => (i / (vals.length - 1)) * W;
  const toY = v => H - 8 - ((v - min) / range) * (H - 16);
  const pathD = vals.map((v, i) => `${i === 0 ? 'M' : 'L'} ${toX(i).toFixed(1)} ${toY(v).toFixed(1)}`).join(' ');
  const last = vals[vals.length - 1];
  const color = last >= (history[history.length - 1]?.balance || 0) ? '#22ff88' : '#ff5470';
  const goalY = goal ? toY(goal) : null;

  return (
    <div style={{ background: 'rgba(255,255,255,0.025)', borderRadius: 14, padding: '12px 14px', marginBottom: 14, border: '1px solid rgba(255,255,255,0.07)' }}>
      <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.12em', marginBottom: 10 }}>BANKROLL VERLAUF</div>
      <svg width={W} height={H} style={{ overflow: 'visible', display: 'block' }}>
        <defs>
          <linearGradient id="brGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.2" />
            <stop offset="100%" stopColor={color} stopOpacity="0.01" />
          </linearGradient>
        </defs>
        {goalY && <line x1="0" y1={goalY} x2={W} y2={goalY} stroke="rgba(255,182,72,0.4)" strokeWidth="1" strokeDasharray="5,5" />}
        {goalY && <text x={W - 2} y={goalY - 4} fontSize="8" fill="rgba(255,182,72,0.6)" textAnchor="end" fontFamily="JetBrains Mono">ZIEL</text>}
        <path d={`${pathD} L ${toX(vals.length-1)} ${H} L 0 ${H} Z`} fill="url(#brGrad)" />
        <path d={pathD} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" style={{ filter: `drop-shadow(0 0 4px ${color}80)` }} />
        <circle cx={toX(vals.length-1)} cy={toY(last)} r="4" fill={color} style={{ filter: `drop-shadow(0 0 6px ${color})` }} />
      </svg>
    </div>
  );
}

// ─── Limits Panel ─────────────────────────────────────────────
function LimitsPanel({ bankroll }) {
  const [daily, setDaily] = useBR(() => parseInt(localStorage.getItem('br_daily_limit')) || 50);
  const [maxStake, setMaxStake] = useBR(() => parseInt(localStorage.getItem('br_max_stake')) || 20);
  const [minOdds, setMinOdds] = useBR(() => parseFloat(localStorage.getItem('br_min_odds')) || 1.50);
  const save = () => {
    localStorage.setItem('br_daily_limit', daily);
    localStorage.setItem('br_max_stake', maxStake);
    localStorage.setItem('br_min_odds', minOdds);
  };

  const limits = [
    { label: 'Tageslimit', value: daily, set: setDaily, prefix: '€', min: 5, max: 500, step: 5, color: '#ff5470' },
    { label: 'Max. Einsatz', value: maxStake, set: setMaxStake, prefix: '€', min: 1, max: 200, step: 1, color: '#ffb648' },
    { label: 'Min. Quote', value: minOdds, set: setMinOdds, prefix: '', min: 1.1, max: 10, step: 0.05, color: '#22ff88' },
  ];

  return (
    <div style={{ background: 'rgba(255,79,179,0.04)', border: '1px solid rgba(255,79,179,0.15)', borderRadius: 16, padding: '14px', marginBottom: 14 }}>
      <div style={{ fontSize: 9, color: '#ff4fb3', fontFamily: 'JetBrains Mono', letterSpacing: '.14em', marginBottom: 12 }}>SCHUTZLIMITS</div>
      {limits.map(l => (
        <div key={l.label} style={{ marginBottom: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', fontFamily: 'Inter' }}>{l.label}</span>
            <span style={{ fontSize: 12, fontFamily: 'JetBrains Mono', fontWeight: 700, color: l.color }}>{l.prefix}{l.value}</span>
          </div>
          <input type="range" min={l.min} max={l.max} step={l.step} value={l.value}
            onChange={e => { l.set(parseFloat(e.target.value)); save(); }}
            style={{ width: '100%', accentColor: l.color }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 8, color: 'rgba(255,255,255,0.2)', fontFamily: 'JetBrains Mono' }}>
            <span>{l.prefix}{l.min}</span><span>{l.prefix}{l.max}</span>
          </div>
        </div>
      ))}
      <div style={{ padding: '8px 10px', background: 'rgba(255,255,255,0.03)', borderRadius: 10, border: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Inter', lineHeight: 1.5 }}>
          💡 Kelly empfiehlt max. <strong style={{ color: '#24daff' }}>€{(bankroll * 0.05).toFixed(2)}</strong> (5% BR) pro Wette bei deinem aktuellen Bankroll.
        </div>
      </div>
    </div>
  );
}

// ─── Bankroll Setup ───────────────────────────────────────────
function BankrollSetup({ onSetup }) {
  const [initial, setInitial] = useBR(100);
  const [goal, setGoal] = useBR(500);

  return (
    <div style={{ padding: '24px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{ fontSize: 36, marginBottom: 10 }}>💰</div>
        <div style={{ fontSize: 18, fontWeight: 700, fontFamily: 'Space Grotesk', color: 'rgba(255,255,255,0.95)', marginBottom: 6 }}>Bankroll einrichten</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: 'Inter', lineHeight: 1.6 }}>Verwalte dein Wettbudget mit<br />Kelly-Kriterium & Schutzlimits</div>
      </div>

      {[
        { label: 'Startkapital (€)', value: initial, set: setInitial, color: '#22ff88', min: 10, max: 10000, step: 10 },
        { label: 'Ziel-Bankroll (€)', value: goal, set: setGoal, color: '#ffb648', min: 50, max: 50000, step: 50 },
      ].map(f => (
        <div key={f.label} style={{ background: `${f.color}06`, border: `1px solid ${f.color}20`, borderRadius: 14, padding: '14px' }}>
          <div style={{ fontSize: 9, color: f.color, fontFamily: 'JetBrains Mono', letterSpacing: '.12em', marginBottom: 8 }}>{f.label}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <input type="number" value={f.value} min={f.min} max={f.max} step={f.step}
              onChange={e => f.set(parseFloat(e.target.value) || f.min)}
              style={{ flex: 1, padding: '10px 12px', borderRadius: 10, border: `1px solid ${f.color}33`, background: `${f.color}08`, color: f.color, fontFamily: 'JetBrains Mono', fontSize: 18, fontWeight: 700, outline: 'none', textAlign: 'center' }} />
          </div>
          <input type="range" min={f.min} max={f.max} step={f.step} value={f.value}
            onChange={e => f.set(parseFloat(e.target.value))}
            style={{ width: '100%', accentColor: f.color }} />
        </div>
      ))}

      <div style={{ padding: '10px 12px', background: 'rgba(36,218,255,0.05)', border: '1px solid rgba(36,218,255,0.15)', borderRadius: 12 }}>
        <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', fontFamily: 'Inter', lineHeight: 1.6 }}>
          📈 Zielrendite: <strong style={{ color: '#24daff' }}>{(((goal - initial) / initial) * 100).toFixed(0)}%</strong> — bei 5% Kelly pro Wette ca. <strong style={{ color: '#22ff88' }}>€{(initial * 0.05).toFixed(2)}</strong> Einsatz starten
        </div>
      </div>

      <button onClick={() => onSetup(initial, goal)} style={{
        padding: '14px', borderRadius: 14,
        background: 'linear-gradient(135deg, #22ff88, #0eaf5b)',
        border: 'none', cursor: 'pointer', color: '#05070a',
        fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 15,
        boxShadow: '0 0 28px rgba(34,255,136,0.3)',
      }}>💰 Bankroll starten</button>
    </div>
  );
}

// ─── Main Bankroll Screen ─────────────────────────────────────
function BankrollScreen() {
  const [data, setData] = useBR(() => bankrollStore.get());
  const [sub, setSub] = useBR('overview');
  const [adjustAmt, setAdjustAmt] = useBR('');
  const [adjustNote, setAdjustNote] = useBR('Manuelle Anpassung');
  const [showAdjust, setShowAdjust] = useBR(false);

  const handleSetup = (initial, goal) => {
    const d = bankrollStore.init(initial, goal);
    setData(d);
  };

  const handleAdjust = (positive) => {
    const amt = parseFloat(adjustAmt);
    if (!amt || isNaN(amt)) return;
    const d = bankrollStore.update(positive ? amt : -amt, adjustNote);
    setData(d);
    setAdjustAmt('');
    setShowAdjust(false);
  };

  const handleReset = () => { bankrollStore.reset(); setData(null); };

  const tabS = a => ({
    flex: 1, padding: '8px 4px', borderRadius: 10, border: 'none', cursor: 'pointer',
    fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 9, letterSpacing: '.03em',
    background: a ? 'rgba(36,218,255,.15)' : 'transparent',
    color: a ? '#24daff' : 'rgba(255,255,255,.35)', transition: 'all .2s',
  });

  if (!data) return <div style={{ height: '100%', overflowY: 'auto' }}><BankrollSetup onSetup={handleSetup} /></div>;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '10px 16px 0', flexShrink: 0 }}>
        <div style={{ display: 'flex', background: 'rgba(255,255,255,.04)', borderRadius: 13, padding: 3, gap: 2, marginBottom: 2 }}>
          <button style={tabS(sub==='overview')} onClick={() => setSub('overview')}>💰 ÜBERSICHT</button>
          <button style={tabS(sub==='kelly')} onClick={() => setSub('kelly')}>📐 KELLY</button>
          <button style={tabS(sub==='limits')} onClick={() => setSub('limits')}>🛡️ LIMITS</button>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px' }}>
        {sub === 'overview' && (
          <>
            <BankrollGauge current={data.current} initial={data.initial} goal={data.goal} />
            <BankrollChart history={data.history || []} goal={data.goal} />

            {/* Quick adjust */}
            <div style={{ marginBottom: 14 }}>
              {showAdjust ? (
                <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: '12px' }}>
                  <input value={adjustNote} onChange={e => setAdjustNote(e.target.value)}
                    placeholder="Notiz (z.B. Bayern Sieg)"
                    style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: 'rgba(255,255,255,0.7)', fontFamily: 'Inter', fontSize: 12, outline: 'none', marginBottom: 8 }} />
                  <input type="number" value={adjustAmt} onChange={e => setAdjustAmt(e.target.value)}
                    placeholder="Betrag €"
                    style={{ width: '100%', padding: '10px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: 'rgba(255,255,255,0.85)', fontFamily: 'JetBrains Mono', fontSize: 16, fontWeight: 700, outline: 'none', marginBottom: 10, textAlign: 'center' }} />
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button onClick={() => handleAdjust(true)} style={{ flex: 1, padding: '10px', borderRadius: 10, background: 'rgba(34,255,136,0.15)', border: '1px solid rgba(34,255,136,0.3)', color: '#22ff88', cursor: 'pointer', fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 12 }}>+ Gewinn</button>
                    <button onClick={() => handleAdjust(false)} style={{ flex: 1, padding: '10px', borderRadius: 10, background: 'rgba(255,84,112,0.15)', border: '1px solid rgba(255,84,112,0.3)', color: '#ff5470', cursor: 'pointer', fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 12 }}>− Verlust</button>
                    <button onClick={() => setShowAdjust(false)} style={{ padding: '10px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.4)', cursor: 'pointer', fontFamily: 'Space Grotesk', fontWeight: 600, fontSize: 12 }}>✕</button>
                  </div>
                </div>
              ) : (
                <button onClick={() => setShowAdjust(true)} style={{ width: '100%', padding: '11px', borderRadius: 12, background: 'rgba(255,182,72,0.08)', border: '1px solid rgba(255,182,72,0.2)', color: '#ffb648', cursor: 'pointer', fontFamily: 'Space Grotesk', fontWeight: 600, fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                  📝 Bankroll anpassen
                </button>
              )}
            </div>

            {/* History */}
            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono', letterSpacing: '.12em', marginBottom: 8 }}>VERLAUF</div>
            {(data.history || []).slice(0, 10).map((h, i) => {
              const prev = data.history[i + 1];
              const diff = prev ? h.balance - prev.balance : 0;
              const c = diff >= 0 ? '#22ff88' : '#ff5470';
              return (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: 'rgba(255,255,255,0.025)', borderRadius: 10, border: '1px solid rgba(255,255,255,0.05)', marginBottom: 5 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: diff >= 0 ? '#22ff88' : '#ff5470', flexShrink: 0 }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.75)', fontFamily: 'Inter' }}>{h.note}</div>
                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', fontFamily: 'JetBrains Mono' }}>{h.date}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'JetBrains Mono', color: 'rgba(255,255,255,0.8)' }}>€{h.balance.toFixed(0)}</div>
                    {diff !== 0 && <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', color: c }}>{diff >= 0 ? '+' : ''}€{diff.toFixed(2)}</div>}
                  </div>
                </div>
              );
            })}

            <button onClick={handleReset} style={{ width: '100%', marginTop: 10, padding: '9px', borderRadius: 10, background: 'rgba(255,84,112,0.07)', border: '1px solid rgba(255,84,112,0.18)', color: 'rgba(255,84,112,0.6)', cursor: 'pointer', fontFamily: 'Space Grotesk', fontWeight: 600, fontSize: 11, marginBottom: 24 }}>Reset Bankroll</button>
          </>
        )}

        {sub === 'kelly' && (
          <div style={{ paddingTop: 16 }}>
            <KellyCalculator bankroll={data.current} />
            <div style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 14, padding: '12px 14px' }}>
              <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.35)', fontFamily: 'JetBrains Mono', letterSpacing: '.12em', marginBottom: 10 }}>KELLY REGELN</div>
              {[
                { rule: 'Voller Kelly', stake: `€${(data.current * 0.05).toFixed(2)}`, risk: '🔥 Hoch', color: '#ff5470' },
                { rule: 'Halber Kelly', stake: `€${(data.current * 0.025).toFixed(2)}`, risk: '⚡ Mittel', color: '#ffb648' },
                { rule: 'Viertel Kelly', stake: `€${(data.current * 0.0125).toFixed(2)}`, risk: '🛡️ Sicher', color: '#22ff88' },
              ].map(r => (
                <div key={r.rule} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
                  <div>
                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.75)', fontFamily: 'Space Grotesk', fontWeight: 600 }}>{r.rule}</div>
                    <div style={{ fontSize: 9, color: r.color, fontFamily: 'JetBrains Mono' }}>{r.risk}</div>
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 700, fontFamily: 'JetBrains Mono', color: r.color }}>{r.stake}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {sub === 'limits' && (
          <div style={{ paddingTop: 16 }}>
            <LimitsPanel bankroll={data.current} />
            <div style={{ background: 'rgba(34,255,136,0.04)', border: '1px solid rgba(34,255,136,0.12)', borderRadius: 14, padding: '12px' }}>
              <div style={{ fontSize: 9, color: '#22ff88', fontFamily: 'JetBrains Mono', letterSpacing: '.12em', marginBottom: 8 }}>EMPFEHLUNGEN</div>
              {[
                'Niemals mehr als 5% pro Einzelwette',
                'Niemals mehr als 15% der Bankroll an einem Tag',
                'Bei Verlust-Streak: Einsatz halbieren',
                'Ziel erreicht? Gewinn auszahlen, Rest als neue BR',
              ].map((tip, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, padding: '6px 0', borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.04)' : 'none' }}>
                  <span style={{ color: '#22ff88', fontSize: 10, flexShrink: 0 }}>→</span>
                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', fontFamily: 'Inter', lineHeight: 1.5 }}>{tip}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        <div style={{ height: 20 }} />
      </div>
    </div>
  );
}

Object.assign(window, { BankrollScreen });