"use client";

import { useEffect, useMemo, useState } from "react";
import {
  BacktestResult,
  demoBacktest,
  demoOverview,
  InstrumentSnapshot,
  OverviewData,
  SignalStatus,
  TradingSignal,
} from "../lib/demo";
import { CandlestickChart } from "./CandlestickChart";

type View = "signals" | "history" | "backtest";
type IconName =
  | "arrow"
  | "chart"
  | "check"
  | "clock"
  | "history"
  | "pulse"
  | "refresh"
  | "shield"
  | "target"
  | "x";

function Icon({ name, size = 20 }: { name: IconName; size?: number }) {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.9,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
  };

  const paths: Record<IconName, React.ReactNode> = {
    arrow: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    chart: <><path d="M4 19V5"/><path d="M4 19h16"/><path d="m7 15 4-5 3 2 5-7"/></>,
    check: <path d="m5 12 4 4L19 6"/>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    history: <><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></>,
    pulse: <><path d="M3 12h4l2-5 4 10 2-5h6"/></>,
    refresh: <><path d="M20 7v5h-5"/><path d="M4 17v-5h5"/><path d="M6.1 8a7 7 0 0 1 11.7-1L20 9"/><path d="m4 15 2.2 2a7 7 0 0 0 11.7-1"/></>,
    shield: <><path d="m12 3 7 3v5.5c0 4.5-2.9 7.5-7 9.5-4.1-2-7-5-7-9.5V6z"/><path d="m9 12 2 2 4-4"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></>,
    x: <><path d="m6 6 12 12"/><path d="M18 6 6 18"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

function formatPrice(value: number, symbol: string) {
  const digits = symbol === "EURUSD" ? 5 : symbol === "GBPJPY" ? 3 : symbol === "BTCUSD" ? 1 : 2;
  return new Intl.NumberFormat("id-ID", {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  }).format(value);
}

function formatDate(value?: string | null) {
  if (!value) return "—";
  return new Intl.DateTimeFormat("id-ID", {
    day: "2-digit",
    month: "short",
    hour: "2-digit",
    minute: "2-digit",
    timeZone: "Asia/Jakarta",
  }).format(new Date(value));
}

function statusLabel(status: SignalStatus) {
  return {
    PENDING: "Menunggu entry",
    ACTIVE: "Entry aktif",
    TP1_HIT: "TP 1 tercapai",
    TP2_HIT: "TP 2 tercapai",
    STOP_LOSS: "Stop loss",
    EXPIRED: "Kedaluwarsa",
    CANCELLED: "Dibatalkan",
    AMBIGUOUS: "Perlu ditinjau",
  }[status];
}

function Sparkline({ values, tone = "gold" }: { values: number[]; tone?: "red" | "green" | "gold" }) {
  const min = Math.min(...values);
  const max = Math.max(...values);
  const range = max - min || 1;
  const points = values
    .map((value, index) => `${(index / Math.max(values.length - 1, 1)) * 100},${36 - ((value - min) / range) * 30}`)
    .join(" ");
  return (
    <svg className={`sparkline spark-${tone}`} viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id={`fill-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="currentColor" stopOpacity=".22" />
          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
        </linearGradient>
      </defs>
      <polyline points={`0,40 ${points} 100,40`} fill={`url(#fill-${tone})`} stroke="none" />
      <polyline points={points} fill="none" stroke="currentColor" strokeWidth="2" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

function MarketCard({ item, active, onClick }: { item: InstrumentSnapshot; active: boolean; onClick: () => void }) {
  const tone = item.direction === "BUY" ? "green" : item.direction === "SELL" ? "red" : "gold";
  return (
    <button className={`market-card ${active ? "is-active" : ""}`} onClick={onClick} aria-pressed={active}>
      <div className="market-card-top">
        <span className="market-symbol">{item.label}</span>
        <span className={`mini-direction ${item.direction.toLowerCase()}`}>{item.direction}</span>
      </div>
      <strong>{formatPrice(item.price, item.symbol)}</strong>
      <div className="market-meta">
        <span>{item.market}</span>
        <span className={item.change >= 0 ? "positive" : "negative"}>{item.change >= 0 ? "+" : ""}{item.change.toFixed(2)}%</span>
      </div>
      <Sparkline values={item.chart} tone={tone} />
    </button>
  );
}

function SignalCard({ signal, onOpen }: { signal: TradingSignal; onOpen: () => void }) {
  return (
    <article className={`signal-card signal-${signal.direction.toLowerCase()}`}>
      <div className="signal-card-head">
        <div>
          <div className="signal-kicker">{signal.timeframe} · Tren {signal.trendTimeframe}</div>
          <h3>{signal.label}</h3>
        </div>
        <span className={`direction-badge ${signal.direction.toLowerCase()}`}>{signal.direction}</span>
      </div>
      <div className="signal-status-row">
        <span className={`status-dot ${signal.status.toLowerCase()}`} />
        <span>{statusLabel(signal.status)}</span>
        <span className="status-time">{formatDate(signal.generatedAt)}</span>
      </div>
      <div className="price-grid">
        <div className="price-block entry"><span>Zona entry</span><strong>{formatPrice(signal.entryLow, signal.symbol)} – {formatPrice(signal.entryHigh, signal.symbol)}</strong></div>
        <div className="price-block stop"><span>Stop loss</span><strong>{formatPrice(signal.stopLoss, signal.symbol)}</strong></div>
        <div className="price-block target"><span>Take profit 2</span><strong>{formatPrice(signal.takeProfit2, signal.symbol)}</strong></div>
      </div>
      <div className="signal-chart-wrap">
        <CandlestickChart
          candles={signal.candles}
          values={signal.chart}
          anchorTime={signal.generatedAt}
          compact
          label={`Chart candlestick ${signal.label} ${signal.timeframe}`}
        />
      </div>
      <div className="signal-card-foot">
        <div className="score-ring" style={{ "--score": signal.score } as React.CSSProperties}><b>{signal.score}</b><span>skor</span></div>
        <p>{signal.reasons[0]}</p>
        <button className="text-link" onClick={onOpen}>Lihat analisis <Icon name="arrow" size={17}/></button>
      </div>
    </article>
  );
}

function EquityChart({ values }: { values: number[] }) {
  const min = Math.min(...values, 0);
  const max = Math.max(...values, 1);
  const range = max - min || 1;
  const points = values.map((v, i) => `${(i / (values.length - 1)) * 600},${190 - ((v - min) / range) * 150}`).join(" ");
  return (
    <svg className="equity-chart" viewBox="0 0 600 220" role="img" aria-label="Kurva pertumbuhan hasil backtest dalam satuan R">
      {[40,80,120,160,200].map(y => <line key={y} x1="0" y1={y} x2="600" y2={y} className="grid-line" />)}
      <defs><linearGradient id="equity-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#d8a137" stopOpacity=".35"/><stop offset="1" stopColor="#d8a137" stopOpacity="0"/></linearGradient></defs>
      <polyline points={`0,210 ${points} 600,210`} fill="url(#equity-fill)" stroke="none" />
      <polyline points={points} fill="none" stroke="#d8a137" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function KitaSignalApp() {
  const [data, setData] = useState<OverviewData>(demoOverview);
  const [view, setView] = useState<View>("signals");
  const [filter, setFilter] = useState("ALL");
  const [selected, setSelected] = useState<TradingSignal | null>(null);
  const [backtest, setBacktest] = useState<BacktestResult>(demoBacktest);
  const [busy, setBusy] = useState<"scan" | "track" | "backtest" | null>(null);
  const [notice, setNotice] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/overview", { cache: "no-store" })
      .then(async response => {
        if (!response.ok) throw new Error("overview unavailable");
        return response.json();
      })
      .then(payload => setData(payload))
      .catch(() => undefined);
  }, []);

  useEffect(() => {
    if (!notice) return;
    const timer = window.setTimeout(() => setNotice(null), 4200);
    return () => window.clearTimeout(timer);
  }, [notice]);

  const visibleSignals = useMemo(
    () => data.activeSignals.filter(signal => filter === "ALL" || signal.symbol === filter),
    [data.activeSignals, filter],
  );
  const visibleHistory = useMemo(
    () => data.history.filter(signal => filter === "ALL" || signal.symbol === filter),
    [data.history, filter],
  );
  const featureSignal = visibleSignals[0] ?? data.activeSignals[0];

  async function refreshOverview() {
    const response = await fetch("/api/overview", { cache: "no-store" });
    if (response.ok) setData(await response.json());
  }

  async function runAction(kind: "scan" | "track") {
    setBusy(kind);
    try {
      const response = await fetch(`/api/${kind}`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ symbol: filter }),
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error ?? "Proses gagal");
      await refreshOverview();
      setNotice(payload.message ?? (kind === "scan" ? "Pemindaian selesai." : "Status sinyal diperbarui."));
    } catch (error) {
      setNotice(error instanceof Error ? error.message : "Proses belum tersedia.");
    } finally {
      setBusy(null);
    }
  }

  async function runBacktest() {
    setBusy("backtest");
    const symbol = filter === "ALL" ? "XAUUSD" : filter;
    try {
      const response = await fetch("/api/backtest", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ symbol }),
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error ?? "Backtest gagal");
      setBacktest(payload);
      setNotice(`Backtest ${payload.symbol} selesai.`);
    } catch (error) {
      setNotice(error instanceof Error ? error.message : "Backtest belum tersedia.");
    } finally {
      setBusy(null);
    }
  }

  return (
    <main>
      <header className="site-header">
        <div className="shell header-inner">
          <a href="#top" className="brand" aria-label="Kita Signal, kembali ke atas">
            <span className="brand-mark"><i/><i/><i/></span>
            <span><strong>KITA SIGNAL</strong><small>Read the market. Keep the record.</small></span>
          </a>
          <nav aria-label="Navigasi utama">
            <button className={view === "signals" ? "active" : ""} onClick={() => setView("signals")}>Sinyal</button>
            <button className={view === "history" ? "active" : ""} onClick={() => setView("history")}>Riwayat</button>
            <button className={view === "backtest" ? "active" : ""} onClick={() => setView("backtest")}>Backtest</button>
          </nav>
          <div className={`mode-pill ${data.mode}`}><span/>{data.mode === "live" ? "Data live" : "Mode simulasi"}</div>
        </div>
      </header>

      <section className="hero" id="top">
        <div className="hero-orbit orbit-one"/><div className="hero-orbit orbit-two"/>
        <div className="shell hero-grid">
          <div className="hero-copy reveal-in">
            <span className="eyebrow"><Icon name="pulse" size={17}/> Analisis yang bisa diperiksa</span>
            <h1>Bukan tebak arah.<br/><em>Baca setup-nya.</em></h1>
            <p>Kita Signal menyaring struktur tren, momentum, volatilitas, dan area harga menjadi satu rencana yang jelas: entry, batas risiko, target, dan alasan di baliknya.</p>
            <div className="hero-actions">
              <button className="button button-primary" onClick={() => { setView("signals"); document.getElementById("workspace")?.scrollIntoView({ behavior: "smooth" }); }}>Lihat sinyal aktif <Icon name="arrow"/></button>
              <button className="button button-ghost" onClick={() => { setView("backtest"); document.getElementById("workspace")?.scrollIntoView({ behavior: "smooth" }); }}>Buka backtest</button>
            </div>
            <div className="trust-row">
              <span><Icon name="check" size={18}/> BUY, SELL, atau WAIT</span>
              <span><Icon name="shield" size={18}/> Risiko terukur</span>
              <span><Icon name="history" size={18}/> Hasil tidak dihapus</span>
            </div>
          </div>

          {featureSignal && (
            <div className="hero-ticket reveal-in delay-one">
              <div className="ticket-stamp">SETUP<br/>H1</div>
              <div className="ticket-top"><span>Sinyal terbaru</span><span className={`direction-badge ${featureSignal.direction.toLowerCase()}`}>{featureSignal.direction}</span></div>
              <div className="ticket-pair"><small>{featureSignal.trendTimeframe} TREND</small><strong>{featureSignal.label}</strong><span>{featureSignal.indicators.trend}</span></div>
              <div className="ticket-levels">
                <div><span>ENTRY</span><b>{formatPrice(featureSignal.entry, featureSignal.symbol)}</b></div>
                <div><span>STOP</span><b>{formatPrice(featureSignal.stopLoss, featureSignal.symbol)}</b></div>
                <div><span>TARGET</span><b>{formatPrice(featureSignal.takeProfit2, featureSignal.symbol)}</b></div>
              </div>
              <div className="ticket-chart">
                <CandlestickChart
                  candles={featureSignal.candles}
                  values={featureSignal.chart}
                  anchorTime={featureSignal.generatedAt}
                  compact
                  label={`Chart candlestick ${featureSignal.label}`}
                />
              </div>
              <div className="ticket-foot"><span>RR 1:{featureSignal.riskReward.toFixed(1)}</span><span>Setup score {featureSignal.score}/100</span></div>
            </div>
          )}
        </div>
      </section>

      <section className="ticker-strip" aria-label="Ringkasan pasar">
        <div className="ticker-track">
          {[...data.snapshots, ...data.snapshots].map((item, index) => (
            <span key={`${item.symbol}-${index}`}><b>{item.label}</b><i className={item.change >= 0 ? "up" : "down"}>{item.change >= 0 ? "▲" : "▼"} {Math.abs(item.change).toFixed(2)}%</i><em>{formatPrice(item.price, item.symbol)}</em></span>
          ))}
        </div>
      </section>

      <section className="workspace" id="workspace">
        <div className="shell">
          <div className="workspace-head">
            <div><span className="section-script">Market scanner</span><h2>Satu layar. Empat karakter pasar.</h2></div>
            <p>Filter instrumen, periksa setup, lalu biarkan riwayat mencatat hasil sebenarnya.</p>
          </div>

          <div className="market-grid">
            {data.snapshots.map(item => <MarketCard key={item.symbol} item={item} active={filter === item.symbol} onClick={() => setFilter(current => current === item.symbol ? "ALL" : item.symbol)}/>) }
          </div>

          <div className="toolbar">
            <div className="filter-row" aria-label="Filter instrumen">
              <button className={filter === "ALL" ? "active" : ""} onClick={() => setFilter("ALL")}>Semua</button>
              {data.snapshots.map(item => <button key={item.symbol} className={filter === item.symbol ? "active" : ""} onClick={() => setFilter(item.symbol)}>{item.label}</button>)}
            </div>
            <div className="action-row">
              <button className="button button-small button-ghost" onClick={() => runAction("track")} disabled={busy !== null}><Icon name="refresh" size={17}/>{busy === "track" ? "Memeriksa…" : "Perbarui status"}</button>
              <button className="button button-small button-primary" onClick={() => runAction("scan")} disabled={busy !== null}><Icon name="pulse" size={17}/>{busy === "scan" ? "Menganalisis…" : "Jalankan analisis"}</button>
            </div>
          </div>

          <div className="view-tabs">
            <button className={view === "signals" ? "active" : ""} onClick={() => setView("signals")}><Icon name="target" size={18}/>Sinyal aktif <span>{visibleSignals.length}</span></button>
            <button className={view === "history" ? "active" : ""} onClick={() => setView("history")}><Icon name="history" size={18}/>Riwayat</button>
            <button className={view === "backtest" ? "active" : ""} onClick={() => setView("backtest")}><Icon name="chart" size={18}/>Backtest</button>
          </div>

          {view === "signals" && (
            <div className="signal-layout">
              <div className="signal-list">
                {visibleSignals.length ? visibleSignals.map(signal => <SignalCard key={signal.id} signal={signal} onOpen={() => setSelected(signal)}/>) : (
                  <div className="empty-state"><span>WAIT</span><h3>Belum ada setup yang layak.</h3><p>Mesin tidak akan memaksakan BUY atau SELL ketika syarat belum lengkap.</p></div>
                )}
              </div>
              <aside className="method-card">
                <span className="section-script">Cara membaca</span>
                <h3>Empat lapis sebelum sinyal terbit.</h3>
                <ol>
                  <li><b>01</b><span><strong>Arah H4</strong>EMA 50, EMA 200, dan struktur swing.</span></li>
                  <li><b>02</b><span><strong>Setup H1</strong>Pullback, momentum, dan candle konfirmasi.</span></li>
                  <li><b>03</b><span><strong>Batas risiko</strong>SL mengikuti ATR dan swing, target minimal 1:2.</span></li>
                  <li><b>04</b><span><strong>Pelacakan</strong>M1 menentukan urutan entry, TP, dan SL.</span></li>
                </ol>
                <div className="method-note"><Icon name="shield"/><p>Skor setup bukan jaminan menang. Selalu tentukan sendiri apakah akan mengambil sinyal.</p></div>
              </aside>
            </div>
          )}

          {view === "history" && (
            <div className="history-panel">
              <div className="stats-grid">
                <div><span>Total tercatat</span><strong>{data.stats.total}</strong><small>sinyal selesai</small></div>
                <div><span>Win rate</span><strong>{data.stats.winRate.toFixed(1)}%</strong><small>bukan satu-satunya ukuran</small></div>
                <div><span>Hasil bersih</span><strong className="positive">+{data.stats.netR.toFixed(1)}R</strong><small>setelah sinyal rugi</small></div>
                <div><span>Profit factor</span><strong>{data.stats.profitFactor.toFixed(2)}</strong><small>gross profit / loss</small></div>
              </div>
              <div className="table-wrap">
                <table>
                  <thead><tr><th>Instrumen</th><th>Arah</th><th>Entry</th><th>Hasil</th><th>Ditutup</th><th/></tr></thead>
                  <tbody>{visibleHistory.map(item => (
                    <tr key={item.id}>
                      <td><b>{item.label}</b><small>{item.timeframe} · {formatDate(item.generatedAt)}</small></td>
                      <td><span className={`table-direction ${item.direction.toLowerCase()}`}>{item.direction}</span></td>
                      <td>{formatPrice(item.entry, item.symbol)}</td>
                      <td><span className={`result-chip ${item.status.toLowerCase()}`}>{statusLabel(item.status)}{item.resultR != null ? ` · ${item.resultR > 0 ? "+" : ""}${item.resultR}R` : ""}</span></td>
                      <td>{formatDate(item.closedAt)}</td>
                      <td><button className="icon-button" aria-label={`Lihat ${item.label}`} onClick={() => setSelected(item)}><Icon name="arrow" size={17}/></button></td>
                    </tr>
                  ))}</tbody>
                </table>
              </div>
            </div>
          )}

          {view === "backtest" && (
            <div className="backtest-panel">
              <div className="backtest-head">
                <div><span className="section-script">Uji aturan yang sama</span><h3>Backtest {backtest.symbol.replace("USD", " / USD").replace("JPY", " / JPY")}</h3><p>{backtest.period} · Data {backtest.dataMode === "live" ? "provider" : "simulasi deterministik"}</p></div>
                <button className="button button-primary" onClick={runBacktest} disabled={busy !== null}><Icon name="refresh" size={18}/>{busy === "backtest" ? "Menguji…" : `Uji ${filter === "ALL" ? "XAU / USD" : filter}`}</button>
              </div>
              <div className="backtest-body">
                <div className="equity-card"><div className="chart-heading"><span>Kurva hasil</span><strong className="positive">+{backtest.netR.toFixed(1)}R</strong></div><EquityChart values={backtest.equity}/></div>
                <div className="backtest-metrics">
                  <div><span>Jumlah trade</span><strong>{backtest.totalTrades}</strong></div>
                  <div><span>Win rate</span><strong>{backtest.winRate.toFixed(1)}%</strong></div>
                  <div><span>Profit factor</span><strong>{backtest.profitFactor.toFixed(2)}</strong></div>
                  <div><span>Max drawdown</span><strong className="negative">-{backtest.maxDrawdown.toFixed(1)}R</strong></div>
                  <div><span>TP</span><strong>{backtest.wins}</strong></div>
                  <div><span>SL</span><strong>{backtest.losses}</strong></div>
                </div>
              </div>
              <p className="backtest-footnote">Backtest memakai candle tertutup dan kebijakan konservatif jika TP dan SL tersentuh dalam candle yang sama. Hasil masa lalu tidak menjamin hasil berikutnya.</p>
            </div>
          )}
        </div>
      </section>

      <section className="principles">
        <div className="shell principles-grid">
          <div><span className="section-script">Catatan penting</span><h2>Mesin boleh cepat.<br/>Keputusan tetap milikmu.</h2></div>
          <div className="principle-list">
            <article><b>01</b><h3>Tidak selalu memberi sinyal</h3><p>WAIT adalah hasil yang valid ketika struktur tidak jelas atau risiko tidak sepadan.</p></article>
            <article><b>02</b><h3>Tidak mengubah masa lalu</h3><p>Entry, SL, TP, dan waktu terbit dikunci agar riwayat tetap bisa diaudit.</p></article>
            <article><b>03</b><h3>Tidak menjanjikan profit</h3><p>Kita Signal adalah alat analisis, bukan pengelola dana atau jaminan keuntungan.</p></article>
          </div>
        </div>
      </section>

      <footer>
        <div className="shell footer-inner"><div className="brand footer-brand"><span className="brand-mark"><i/><i/><i/></span><span><strong>KITA SIGNAL</strong><small>Read the market. Keep the record.</small></span></div><p>Analisis terstruktur untuk keputusan yang lebih disiplin.</p><span>© 2026 Kita Signal</span></div>
      </footer>

      {selected && (
        <div className="modal-backdrop" role="presentation" onMouseDown={event => { if (event.target === event.currentTarget) setSelected(null); }}>
          <section className="detail-modal" role="dialog" aria-modal="true" aria-labelledby="signal-detail-title">
            <button className="modal-close" aria-label="Tutup detail" onClick={() => setSelected(null)}><Icon name="x"/></button>
            <div className="modal-title-row"><div><span className="signal-kicker">{selected.timeframe} · Dibuat {formatDate(selected.generatedAt)}</span><h2 id="signal-detail-title">{selected.label} <em>{selected.direction}</em></h2></div><span className={`result-chip ${selected.status.toLowerCase()}`}>{statusLabel(selected.status)}</span></div>
            <div className="modal-chart">
              <CandlestickChart
                candles={selected.candles}
                values={selected.chart}
                anchorTime={selected.generatedAt}
                levels={{ entry: selected.entry, stopLoss: selected.stopLoss, takeProfit1: selected.takeProfit1, takeProfit2: selected.takeProfit2 }}
                label={`Chart candlestick interaktif ${selected.label} dengan level entry, stop loss, dan take profit`}
              />
            </div>
            <div className="modal-levels">
              <div><span>Entry</span><strong>{formatPrice(selected.entryLow, selected.symbol)} – {formatPrice(selected.entryHigh, selected.symbol)}</strong></div>
              <div><span>Stop loss</span><strong className="negative">{formatPrice(selected.stopLoss, selected.symbol)}</strong></div>
              <div><span>TP 1</span><strong>{formatPrice(selected.takeProfit1, selected.symbol)}</strong></div>
              <div><span>TP 2</span><strong className="positive">{formatPrice(selected.takeProfit2, selected.symbol)}</strong></div>
            </div>
            <div className="analysis-grid">
              <div><h3>Alasan setup</h3><ul>{selected.reasons.map((reason, index) => <li key={reason}><b>{String(index + 1).padStart(2, "0")}</b><span>{reason}</span></li>)}</ul></div>
              <div><h3>Snapshot indikator</h3><dl><div><dt>Tren</dt><dd>{selected.indicators.trend}</dd></div><div><dt>RSI</dt><dd>{selected.indicators.rsi.toFixed(1)}</dd></div><div><dt>ATR</dt><dd>{formatPrice(selected.indicators.atr, selected.symbol)}</dd></div><div><dt>EMA 50</dt><dd>{formatPrice(selected.indicators.ema50, selected.symbol)}</dd></div><div><dt>EMA 200</dt><dd>{formatPrice(selected.indicators.ema200, selected.symbol)}</dd></div></dl></div>
            </div>
            <div className="modal-warning"><Icon name="shield"/><p>Skor {selected.score}/100 menunjukkan kelengkapan setup, bukan peluang menang. Periksa harga brokermu sebelum melakukan entry.</p></div>
          </section>
        </div>
      )}

      {notice && <div className="toast" role="status"><Icon name="check" size={18}/>{notice}</div>}
    </main>
  );
}