// ═══════════════════════════════════════════════════════════════
// WAVESCOUT - STRATEGIE-POPUP (Statistik + Anleitung)
// ═══════════════════════════════════════════════════════════════
// Rein statischer Guide-Content pro Strategie (keine API/Backend-Anbindung).
// Wird per Klick auf eine Strategie-Karte in der Strategien-Übersicht
// (einstellungen.jsx → StrategyOverviewPanel) geöffnet.

const strategyGuides = {
  crypto_baseline: {
    bullets: [
      'Trend über EMA200 checken – Kurs über EMA200 nur LONGs bevorzugen, darunter nur SHORTs',
      'RSI-Crossover abwarten – Signal zählt erst beim tatsächlichen Kreuzen der Schwelle, nicht schon bei Annäherung',
      'Als Vergleichsmaßstab sehen – dient primär als Kontrollgruppe für die anderen Strategien, nicht als Haupt-Signalquelle',
      'Kein Zonen-/Volumenfilter vorhanden – reiner Trend+Momentum-Trade, eigene zusätzliche Bestätigung (Chartstruktur) sinnvoll',
      'SL/TP klassisch setzen, da kein dynamischer Stop hinterlegt ist',
    ],
    tools: 'TradingView, Indikator "Moving Average Exponential" (EMA, Periode 200) + "Relative Strength Index" (RSI, Standard 14) – beide im TradingView-Indikator-Katalog kostenlos verfügbar',
  },
  crypto_sr_volume: {
    bullets: [
      'Zonen im Blick behalten – VAH, VAL, POC sind eingezeichnet, beobachten welcher Zone sich der Kurs gerade nähert',
      'Übergeordneten Trend checken – 4h-Chart mit EMA: Kurs über/unter EMA bestimmt Trade-Richtung, nur mit dem Trend traden, gegen den Trend besonders vorsichtig',
      'Auf Preisannäherung warten – erst wenn der Kurs eine Zone tatsächlich anläuft, kein Trade auf Vorrat',
      'Bestätigung abwarten – nicht beim ersten Touch einsteigen, eines von drei Signalen abwarten: Ablehnungskerze mit langem Docht, SFP (kurzer Durchbruch mit sofortiger Rückkehr), oder Konsolidierung in der Zone',
      'SL/TP setzen – SL knapp außerhalb der Zone plus ATR-Puffer, TP am nächsten Gegenlevel (meist POC oder gegenüberliegende VAH/VAL-Grenze)',
    ],
    tools: 'TradingView, "Volume Profile Visible Range" oder "Fixed Range Volume Profile" (built-in) für VAH/VAL/POC, LuxAlgo Support & Resistance (ATR-basiert) für die Zonen selbst, EMA auf 4h-Chart, "Average True Range" (ATR) für den SL-Puffer',
  },
  crypto_orderflow_breakout: {
    bullets: [
      'Auf echten Volumen-Spike warten – kein Trade ohne deutlich erhöhtes Volumen beim Ausbruch',
      'Breakout-Level sauber brechen lassen – Kurs muss die Range mit Overshoot verlassen, keine knappe/unentschlossene Berührung',
      'RSI9 als Vetofilter respektieren – extreme RSI9-Werte blocken den Trade, hier nicht manuell übersteuern',
      'Fakeouts einkalkulieren – Breakout-Setups reagieren empfindlich auf Fehlausbrüche, engen SL knapp hinter dem Ausbruchslevel setzen',
      'TP an der nächsten Struktur/Range orientieren, nicht an starren Fixwerten',
    ],
    tools: 'TradingView, Standard-"Volume"-Indikator unter dem Chart (Spike optisch erkennbar), RSI mit Periode auf 9 gestellt (statt Standard 14), horizontale Linien/Range-Tool zum Markieren des Breakout-Levels',
  },
  crypto_ichimoku_breakout: {
    bullets: [
      'Wolkenlage (Kumo) zuerst prüfen – Kurs über der Wolke = Long-Bias, unter der Wolke = Short-Bias, in der Wolke = kein Trade',
      'Trendstärke bestätigen lassen – Signal soll nur bei ausreichender Trendstärke (ADX/HTF-Filter) durchkommen, Seitwärtsphasen meiden',
      'Tenkan/Kijun-Cross und Chikou-Span als Zusatzbestätigung lesen, nicht nur auf die reine Preislage vertrauen',
      'Geduld einplanen – Strategie ist sehr selektiv, wenige aber hochwertige Signale, nicht nachhelfen',
      'SL hinter der Kumo-Kante bzw. relevantem Ichimoku-Level setzen, TP am nächsten Trendziel',
    ],
    tools: 'TradingView, "Ichimoku Cloud" (built-in, Standardwerte 9/26/52) fürs Haupt-Chart, "Average Directional Index" (ADX, Periode 14) für die Trendstärke, zusätzlicher 4h-Chart (oder Multi-Timeframe-Ichimoku) für den HTF-Filter',
  },
  crypto_sr_bollinger: {
    bullets: [
      'Bänder als bewegliche S&R-Zone lesen – oberes Band = dynamischer Widerstand, unteres Band = dynamische Unterstützung',
      'Auf Touch plus Rückkehr Richtung Mittellinie warten, nicht auf die bloße Berührung',
      'RSI-Cross-Timing abwarten – Einstieg erst beim tatsächlichen Kreuzen der Schwelle',
      'Dynamischen Stop mitziehen – passt sich der Volatilität an, kein starrer Prozent-SL',
      'Stärkste Strategie im aktuellen Track Record, aber noch kleines Sample – Overconfidence vermeiden',
    ],
    tools: 'TradingView, "Bollinger Bands" (built-in, Standard 20/2), RSI (Standard 14) für das Cross-Timing, ATR falls der dynamische Stop manuell nachvollzogen werden soll',
  },
  crypto_sr_exclusion: {
    bullets: [
      'S&R-Zone als harte Vorbedingung – ohne aktive Zone kein Trade, unabhängig vom Score',
      'Score als reinen Ausschlussfilter verstehen, nicht als Kaufgrund – die 5 Negativkriterien (ATR-Spike, Gegentrend 4h, dünnes Volumen, RSI-Extrem, zu kurzer Abstand zum letzten Trade) sollen NICHT zutreffen',
      'Nur ab Score ≥80 handeln, Grenzfälle bewusst überspringen',
      '4h-Gegentrend separat selbst gegenchecken, auch wenn er im Score steckt',
      'Cooldown zum letzten Trade (~10 Min) respektieren, auch wenn das Chartbild schon wieder passt',
    ],
    tools: 'TradingView, gleiches S&R-Zonen-Tool wie bei S&R Volume Profile (LuxAlgo Support & Resistance) – hier aber ohne Volumen-Gewichtung, ATR für den Volatilitäts-Check, EMA/Trendlinie auf 4h für den Gegentrend-Check, Standard-Volume-Indikator für "dünnes Volumen", eigener Trade-Log/Uhrzeit für den Cooldown',
  },
  crypto_flawless_victory: {
    bullets: [
      'Auf echten Cross warten, nicht auf eine bereits länger erfüllte Bedingung',
      'Cancel-Pattern beachten – ein aufgebautes Signal kann durch Gegenbewegung wieder invalidiert werden, dann nicht nachträglich manuell einsteigen',
      'Fixen Prozent-SL/TP aktuell nutzen (noch kein Volatilitäts-Stop verbaut), bei Bedarf eigene ATR-Anpassung ergänzen',
      'Strategie wird aktiv weiterentwickelt – Regeln können sich kurzfristig ändern, Statistik/n mit Vorsicht bewerten',
      'Noch dünne Datenlage – Track Record entsprechend vorsichtig gewichten',
    ],
    tools: 'TradingView, eigenes Pine-Script `crypto_flawless_victory.pine` (im WAVESCOUT-Account als Strategie/Indikator eingebunden) – alle nötigen Berechnungen stecken im Skript selbst, keine zusätzlichen externen Indikatoren nötig; ATR nur optional, falls eigene Stop-Anpassung ergänzt wird',
  },
};

// ─── Strategie-Detail-Popup (Statistik + Anleitung) ───────────────────
function StrategyDetailModal({ strategy, onClose }) {
  const [tab, setTab] = useState('statistik');
  if (!strategy) return null;

  const s = strategy;
  const guide = strategyGuides[s.key];

  const fmtTime = (ms) => ms
    ? new Date(ms).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
    : '–';

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-box" style={{ maxWidth: 560, maxHeight: '90vh', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="modal-head" style={{ position: 'sticky', top: 0, background: 'var(--bg-1)', zIndex: 1 }}>
          <h3 style={{ margin: 0 }}>{s.label}</h3>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>✕</button>
        </div>

        <div style={{ display: 'flex', gap: 4, padding: '10px 20px 0', borderBottom: '1px solid var(--border)' }}>
          {[['statistik', 'Statistik'], ['anleitung', 'Anleitung']].map(([id, label]) => (
            <button
              key={id}
              className="btn btn-ghost btn-sm"
              onClick={() => setTab(id)}
              style={{
                borderRadius: '8px 8px 0 0',
                borderBottom: tab === id ? '2px solid var(--blue-500)' : '2px solid transparent',
                color: tab === id ? 'var(--text-primary)' : 'var(--text-tertiary)',
                fontWeight: tab === id ? 700 : 500,
              }}
            >
              {label}
            </button>
          ))}
        </div>

        <div style={{ padding: '18px 20px 20px' }}>
          {tab === 'statistik' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
                <StratStat label="Offen"       value={s.openTrades}/>
                <StratStat label="Geschlossen" value={s.closedTrades}/>
                <StratStat label="Win-Rate"    value={`${s.winRate}%`} tone={s.winRate >= 50 ? 'win' : 'loss'}/>
                <StratStat label="Ø Win"       value={`${s.avgWinPct}%`} tone="win"/>
                <StratStat label="Ø Loss"      value={`${s.avgLossPct}%`} tone="loss"/>
                <StratStat label="Expectancy"  value={s.expectancy} tone={s.expectancy >= 0 ? 'win' : 'loss'}/>
              </div>
              {(s.testSignals > 0 || s.skippedRejected > 0) && (
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {s.testSignals > 0 && (
                    <span className="badge badge-tag" title="Signale mit is_test=1 (Test-/Phase-1-Betrieb). Sie zählen bewusst NICHT in Win-Rate/Expectancy.">
                      🧪 {s.testSignals} Test-Signal{s.testSignals === 1 ? '' : 'e'}
                    </span>
                  )}
                  {s.skippedRejected > 0 && (
                    <span className="badge badge-tag" title="Echte Signale, die ankamen, aber nicht handelbar wurden (SKIPPED/REJECTED).">
                      {s.skippedRejected} Skipped/Rejected
                    </span>
                  )}
                </div>
              )}
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)', borderTop: '1px solid var(--border)', paddingTop: 8 }}>
                Letztes Signal: {fmtTime(s.lastSignalAt)} · Signale gesamt: {s.totalSignals ?? '–'} · <span className="mono">{s.key}</span>
              </div>
            </div>
          )}

          {tab === 'anleitung' && (
            guide ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <ul style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {guide.bullets.map((b, i) => (
                    <li key={i} style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{b}</li>
                  ))}
                </ul>
                <div style={{ fontSize: 12, color: 'var(--text-primary)', background: 'rgba(59,130,246,.08)', border: '1px solid rgba(59,130,246,.25)', borderRadius: 8, padding: '10px 12px', lineHeight: 1.6 }}>
                  <b>Benötigte Tools/Indikatoren:</b> {guide.tools}
                </div>
              </div>
            ) : (
              <p style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>Für diese Strategie ist noch keine Anleitung hinterlegt.</p>
            )
          )}
        </div>
      </div>
    </div>
  );
}