/* scanner.jsx — Release 1 "scanner senza IA" (29/10/2026).
   Termometro di mercato + tabella di ~1.500 titoli USA: posizione nei range
   (giorno prima, settimana, 2 settimane, mese, 4 mesi, 6 mesi, 52 settimane),
   medie 20/50/100/200, volume, earnings. Dettaglio con notizie e motivazione.
   Dati: GET /api/scanner (compatto) e /api/scanner/{symbol}. Stellina → watchlist live. */

(function () {
  const { useState, useEffect, useMemo } = React;

  const RANGES = [["1d", "1g"], ["1w", "1s"], ["2w", "2s"], ["1m", "1m"], ["4m", "4m"], ["6m", "6m"], ["52w", "52s"]];
  const RANGE_LABEL = { "1d": "giorno prima", "1w": "settimana", "2w": "2 settimane", "1m": "mese",
                        "4m": "4 mesi", "6m": "6 mesi", "52w": "52 settimane" };
  const MAS = [20, 50, 100, 200];
  const PAGE = 100;

  const fmtPct = (v, d = 1) => v == null ? "—" : `${v >= 0 ? "+" : ""}${v.toFixed(d)}%`;
  const fmtPx = v => v == null ? "—" : (v >= 10 ? v.toFixed(2) : v.toFixed(3));
  const pctCls = v => v == null ? "" : v > 0 ? "sc-up" : v < 0 ? "sc-down" : "";

  function Lev3({ v }) {   // variazione con l'equivalente a leva 3x in grassetto
    if (v == null) return <span className="muted">—</span>;
    return <span className={pctCls(v)}>{fmtPct(v)} <span className="sc-x3">×3 <b>{fmtPct(v * 3)}</b></span></span>;
  }

  function RangeBar({ pos, bhi, blo, label }) {
    const p = pos == null ? null : Math.max(0, Math.min(100, pos));
    const cls = bhi ? "up" : blo ? "down" : "";
    return (
      <span className={`sc-rb ${cls}`} title={`${label}: ${pos == null ? "storia insufficiente" : pos.toFixed(0) + "% del range"}${bhi ? " · rotto il massimo oggi" : ""}${blo ? " · rotto il minimo oggi" : ""}`}>
        {p != null && <span className="sc-rb-dot" style={{ left: `calc(${p}% - 3px)` }} />}
      </span>
    );
  }

  function MaDots({ r }) {
    return (
      <span className="sc-ma">
        {MAS.map(m => {
          const d = r[`dma${m}`], x = r[`xma${m}`];
          const cls = d == null ? "na" : d >= 0 ? "above" : "below";
          return <span key={m} className={`sc-ma-dot ${cls} ${x ? "cross" : ""}`}
                       title={`Media ${m}: ${d == null ? "n/d" : (d >= 0 ? "sopra" : "sotto") + " " + fmtPct(d)}${x ? (x > 0 ? " · incrocio al rialzo oggi" : " · incrocio al ribasso oggi") : ""}`} />;
        })}
      </span>
    );
  }

  const near = (r, side) => {
    if (!r.atr14 || r.close == null) return false;
    if (side === "hi") return !r.bhi_52w && r.nhi_52w != null && r.nhi_52w - r.close > 0 && r.nhi_52w - r.close < r.atr14;
    return !r.blo_52w && r.nlo_52w != null && r.close - r.nlo_52w > 0 && r.close - r.nlo_52w < r.atr14;
  };

  const PRESETS = [
    ["tutti", "Tutti"],
    ["max52", "Massimo 52 sett. (rotto o vicino)"],
    ["min52", "Minimo 52 sett. (rotto o vicino)"],
    ["rotture", "Rotture di oggi"],
    ["sopra200", "Sopra media 200"],
    ["sotto200", "Sotto media 200"],
    ["incroci", "Incroci medie oggi"],
    ["stellati", "★ Seguiti"],
  ];

  function Thermometer({ market, date, spy, qqq }) {
    const m = market[market.length - 1] || {};
    const hist = market.slice(-60).map(x => (x.nh_52w || 0) - (x.nl_52w || 0));
    const w = 180, h = 34;
    const mx = Math.max(1, ...hist.map(Math.abs));
    const pts = hist.map((v, i) => `${(i / Math.max(1, hist.length - 1)) * w},${h / 2 - (v / mx) * (h / 2 - 2)}`).join(" ");
    return (
      <div className="card sc-thermo">
        <div className="sc-th-item"><span className="muted">Seduta</span><b>{date ? date.split("-").reverse().join("/") : "—"}</b></div>
        <div className="sc-th-item"><span className="muted">SPY</span><Lev3 v={spy} /></div>
        <div className="sc-th-item"><span className="muted">QQQ</span><Lev3 v={qqq} /></div>
        <div className="sc-th-item"><span className="muted">Nuovi max / min 52 sett.</span>
          <b><span className="sc-up">{m.nh_52w ?? "—"}</span> / <span className="sc-down">{m.nl_52w ?? "—"}</span></b></div>
        <div className="sc-th-item"><span className="muted">Sopra media 200</span><b>{m.above_ma200 != null ? `${m.above_ma200.toFixed(0)}%` : "—"}</b></div>
        <div className="sc-th-item"><span className="muted">Su / giù oggi</span><b>{m.adv ?? "—"} / {m.decl ?? "—"}</b></div>
        {hist.length > 2 && (
          <div className="sc-th-item" title="Nuovi massimi meno nuovi minimi 52 sett., ultime 60 sedute">
            <span className="muted">Termometro 60 gg</span>
            <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
              <line x1="0" x2={w} y1={h / 2} y2={h / 2} stroke="var(--border)" strokeDasharray="3,3" />
              <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="1.6" />
            </svg>
          </div>
        )}
      </div>
    );
  }

  function PriceChart({ history, row }) {
    if (!history || history.length < 2) return null;
    const w = 560, h = 150, vals = history.map(x => x[1]);
    const lines = [row.nhi_52w, row.nlo_52w].filter(v => v != null);
    const min = Math.min(...vals, ...lines), max = Math.max(...vals, ...lines), span = (max - min) || 1;
    const y = v => h - 4 - ((v - min) / span) * (h - 8);
    const pts = vals.map((v, i) => `${(i / (vals.length - 1)) * w},${y(v)}`).join(" ");
    return (
      <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="sc-chart">
        {row.nhi_52w != null && <line x1="0" x2={w} y1={y(row.nhi_52w)} y2={y(row.nhi_52w)} stroke="var(--green)" strokeDasharray="4,4" />}
        {row.nlo_52w != null && <line x1="0" x2={w} y1={y(row.nlo_52w)} y2={y(row.nlo_52w)} stroke="var(--red)" strokeDasharray="4,4" />}
        <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="1.5" />
      </svg>
    );
  }

  // Card compatta per la colonna della Dashboard: livelli della scan serale del titolo.
  window.ScanLevelsCard = function ScanLevelsCard({ symbol }) {
    const [d, setD] = useState(null);
    useEffect(() => {
      let on = true;
      setD(null);
      fetch(`/api/scanner/${encodeURIComponent(symbol)}?news=0`).then(r => r.json())
        .then(x => { if (on && !x.error) setD(x); }).catch(() => {});
      return () => { on = false; };
    }, [symbol]);
    const r = d && d.row;
    if (!r) return null;
    return (
      <div className="fc-card">
        <div className="fc-head">
          <div className="fc-title">
            <span className="fc-dot" style={{ background: "var(--accent)" }}></span>
            <span className="fc-name">Livelli · scan del {r.date ? r.date.split("-").reverse().join("/") : "—"}</span>
          </div>
          <MaDots r={r} />
        </div>
        <div className="fc-body">
          <table className="sc-d-table">
            <tbody>
              {RANGES.map(([k]) => (
                <tr key={k}>
                  <td>{RANGE_LABEL[k]}</td>
                  <td className="mono sc-down">{fmtPx(r[`lo_${k}`])}</td>
                  <td><RangeBar pos={r[`pos_${k}`]} bhi={r[`bhi_${k}`]} blo={r[`blo_${k}`]} label={RANGE_LABEL[k]} /></td>
                  <td className="mono sc-up">{fmtPx(r[`hi_${k}`])}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="fc-meta">
            {MAS.map(m => (
              <span key={m}>M{m} <strong className={pctCls(r[`dma${m}`])}>{fmtPct(r[`dma${m}`])}</strong></span>
            ))}
          </div>
          <div className="fc-meta">
            <span>Mov. medio <strong>{r.atr_pct != null ? `${r.atr_pct.toFixed(1)}%` : "—"}</strong>
              {r.atr_pct != null && <> (×3 <strong>{(r.atr_pct * 3).toFixed(1)}%</strong>)</>}</span>
            {r.earn_days != null && <span>📅 earnings tra <strong>{r.earn_days}</strong> gg</span>}
          </div>
        </div>
      </div>
    );
  };

  function Detail({ symbol, onClose, onStar, starred }) {
    const [d, setD] = useState(null);
    const [err, setErr] = useState(null);
    useEffect(() => {
      setD(null); setErr(null);
      fetch(`/api/scanner/${encodeURIComponent(symbol)}`).then(r => r.json())
        .then(x => x.error ? setErr(x.error) : setD(x)).catch(e => setErr(String(e)));
    }, [symbol]);
    return (
      <div className="sc-detail-backdrop" onClick={onClose}>
        <div className="sc-detail" onClick={e => e.stopPropagation()}>
          <button className="sc-close" onClick={onClose} title="Chiudi">×</button>
          {err && <div className="muted">Errore: {err}</div>}
          {!d && !err && <div className="muted">Caricamento…</div>}
          {d && (() => {
            const r = d.row;
            return (
              <>
                <div className="sc-d-head">
                  <div>
                    <div className="sc-d-sym mono">{r.symbol}</div>
                    <div className="muted">{r.name || ""}{r.sector ? ` · ${r.sector}` : ""}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="mono" style={{ fontSize: 20, fontWeight: 600 }}>{fmtPx(r.close)}</div>
                    <Lev3 v={r.chg1d} />
                  </div>
                  <button className={`btn btn-sm sc-star ${starred ? "on" : ""}`} onClick={() => onStar(r.symbol, !starred)}
                          title="Con la stellina il titolo è seguito dal vivo (candele della seduta + avvisi Telegram). Massimo 50.">
                    {starred ? "★ Seguito" : "☆ Segui dal vivo"}
                  </button>
                </div>
                <PriceChart history={d.history} row={r} />
                <div className="sc-d-grid">
                  <div>
                    <div className="sc-d-title">Range (livelli delle sedute precedenti)</div>
                    <table className="sc-d-table">
                      <tbody>
                        {RANGES.map(([k]) => (
                          <tr key={k}>
                            <td>{RANGE_LABEL[k]}</td>
                            <td className="mono sc-down">{fmtPx(r[`lo_${k}`])}</td>
                            <td><RangeBar pos={r[`pos_${k}`]} bhi={r[`bhi_${k}`]} blo={r[`blo_${k}`]} label={RANGE_LABEL[k]} /></td>
                            <td className="mono sc-up">{fmtPx(r[`hi_${k}`])}</td>
                            <td className="mono muted">{r[`pos_${k}`] == null ? "—" : `${r[`pos_${k}`].toFixed(0)}%`}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <div>
                    <div className="sc-d-title">Medie mobili</div>
                    <table className="sc-d-table">
                      <tbody>
                        {MAS.map(m => (
                          <tr key={m}>
                            <td>Media {m}</td>
                            <td className="mono">{fmtPx(r[`ma${m}`])}</td>
                            <td className={pctCls(r[`dma${m}`])}>{r[`dma${m}`] == null ? "—" : (r[`dma${m}`] >= 0 ? "sopra " : "sotto ") + fmtPct(r[`dma${m}`])}</td>
                            <td className="muted">{r[`xma${m}`] ? (r[`xma${m}`] > 0 ? "↑ incrocio oggi" : "↓ incrocio oggi") : ""}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    <div className="sc-d-facts muted">
                      Movimento medio giornaliero: <b>{r.atr_pct != null ? `${r.atr_pct.toFixed(1)}%` : "—"}</b>
                      {r.atr_pct != null && <> (×3 <b>{(r.atr_pct * 3).toFixed(1)}%</b>)</>} ·
                      Volume: <b>×{r.vol_ratio != null ? r.vol_ratio.toFixed(1) : "—"}</b> la media
                      {r.earn_days != null && <> · 📅 earnings tra <b>{r.earn_days}</b> gg</>}
                    </div>
                  </div>
                </div>
                <div className="sc-d-title">Motivazione presunta</div>
                <div className="sc-reasons">{(d.reasons || []).map((x, i) => <span key={i} className="badge badge-user">{x}</span>)}</div>
                <div className="sc-news">
                  {(d.news || []).length === 0 && <div className="muted">Nessuna notizia aziendale nelle ultime 48 ore.</div>}
                  {(d.news || []).map((n, i) => (
                    <div key={i} className="sc-news-item">
                      {n.url ? <a href={n.url} target="_blank" rel="noopener noreferrer">{n.title}</a> : n.title}
                      <div className="muted">{n.source}{n.published_at ? ` · ${n.published_at.slice(0, 16).replace("T", " ")}` : ""}
                        {(n.tags || []).map(t => <span key={t} className="sc-tag">{t}</span>)}</div>
                    </div>
                  ))}
                </div>
                <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
                  Le notizie dicono cosa è successo, non se è un problema vero: il giudizio resta vostro.
                </div>
              </>
            );
          })()}
        </div>
      </div>
    );
  }

  window.ScannerView = function ScannerView() {
    const [raw, setRaw] = useState(null);
    const [err, setErr] = useState(null);
    const [q, setQ] = useState("");
    const [preset, setPreset] = useState("tutti");
    const [brkK, setBrkK] = useState("4m");
    const [sector, setSector] = useState("");
    const [showEtf, setShowEtf] = useState(false);
    const [sort, setSort] = useState({ key: "chg1d", dir: -1 });
    const [limit, setLimit] = useState(PAGE);
    const [sel, setSel] = useState(null);
    const [wl, setWl] = useState([]);
    const [msg, setMsg] = useState(null);

    const load = () => fetch("/api/scanner").then(r => r.json()).then(d => {
      if (d.error) { setErr(d.error); return; }
      setRaw(d); setWl(d.watchlist || []); setErr(null);
    }).catch(e => setErr(String(e)));
    useEffect(() => { load(); const t = setInterval(load, 10 * 60 * 1000); return () => clearInterval(t); }, []);

    const rows = useMemo(() => {
      if (!raw) return [];
      return raw.data.map(a => Object.fromEntries(raw.cols.map((c, i) => [c, a[i]])));
    }, [raw]);
    const sectors = useMemo(() => [...new Set(rows.map(r => r.sector).filter(Boolean))].sort(), [rows]);
    const wlSet = useMemo(() => new Set(wl), [wl]);
    const ctx = useMemo(() => Object.fromEntries(rows.filter(r => r.is_etf).map(r => [r.symbol, r.chg1d])), [rows]);

    const filtered = useMemo(() => {
      const qq = q.trim().toUpperCase();
      let out = rows.filter(r => showEtf || !r.is_etf);
      if (qq) out = out.filter(r => r.symbol.includes(qq) || (r.name || "").toUpperCase().includes(qq));
      if (sector) out = out.filter(r => r.sector === sector);
      const f = {
        max52: r => r.bhi_52w || near(r, "hi"),
        min52: r => r.blo_52w || near(r, "lo"),
        rotture: r => r[`bhi_${brkK}`] || r[`blo_${brkK}`],
        sopra200: r => r.dma200 != null && r.dma200 >= 0,
        sotto200: r => r.dma200 != null && r.dma200 < 0,
        incroci: r => MAS.some(m => r[`xma${m}`]),
        stellati: r => wlSet.has(r.symbol),
      }[preset];
      if (f) out = out.filter(f);
      const { key, dir } = sort;
      return [...out].sort((a, b) => {
        const va = a[key], vb = b[key];
        if (va == null && vb == null) return 0;
        if (va == null) return 1;
        if (vb == null) return -1;
        return (typeof va === "string" ? va.localeCompare(vb) : va - vb) * dir;
      });
    }, [rows, q, sector, preset, brkK, showEtf, sort, wlSet]);

    useEffect(() => setLimit(PAGE), [q, sector, preset, brkK, showEtf, sort]);

    const star = (symbol, want) => {
      fetch("/api/watchlist/star", { method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ symbol, starred: want }) })
        .then(r => r.json().then(d => ({ ok: r.ok, d })))
        .then(({ ok, d }) => {
          if (!ok || !d || !d.ok || !Array.isArray(d.watchlist)) {
            setMsg((d && d.error) || "Operazione non riuscita (serve un account admin)."); load(); return;
          }
          setWl(d.watchlist); setMsg(want ? `${symbol} ora è seguito dal vivo.` : `${symbol} non è più seguito.`);
        }).catch(e => { setMsg(String(e)); load(); });
      setTimeout(() => setMsg(null), 5000);
    };

    const th = (key, label, title) => (
      <th className={`sc-sortable ${sort.key === key ? "on" : ""}`} title={title}
          onClick={() => setSort(s => ({ key, dir: s.key === key ? -s.dir : (key === "symbol" ? 1 : -1) }))}>
        {label}{sort.key === key ? (sort.dir > 0 ? " ▲" : " ▼") : ""}
      </th>
    );

    if (err) return <div className="view-scroll sc-view"><div className="card">Errore: {err}</div></div>;
    if (!raw) return <div className="view-scroll sc-view"><div className="card">Caricamento scanner…</div></div>;
    if (!raw.date) return <div className="view-scroll sc-view"><div className="card">Nessuna analisi ancora: lo scanner gira ogni sera alle 23:00 (dopo la chiusura USA).</div></div>;

    return (
      <div className="view-scroll sc-view">
        <Thermometer market={raw.market || []} date={raw.date} spy={ctx.SPY} qqq={ctx.QQQ} />
        <div className="card sc-filters">
          <input className="mono sc-search" placeholder="Cerca ticker o nome…" value={q} onChange={e => setQ(e.target.value)} />
          <div className="sc-chips">
            {PRESETS.map(([k, l]) => (
              <button key={k} className={`btn btn-sm ${preset === k ? "btn-primary" : ""}`} onClick={() => setPreset(k)}>
                {l}{k === "stellati" ? ` (${wl.length}/${raw.max || 50})` : ""}
              </button>
            ))}
          </div>
          {preset === "rotture" && (
            <select className="sc-select" value={brkK} onChange={e => setBrkK(e.target.value)}>
              {RANGES.map(([k]) => <option key={k} value={k}>{RANGE_LABEL[k]}</option>)}
            </select>
          )}
          <select className="sc-select" value={sector} onChange={e => setSector(e.target.value)}>
            <option value="">Tutti i settori</option>
            {sectors.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <label className="muted sc-etf"><input type="checkbox" checked={showEtf} onChange={e => setShowEtf(e.target.checked)} /> ETF di contesto</label>
          <span className="muted">{filtered.length} titoli</span>
        </div>
        {msg && <div className="card sc-msg">{msg}</div>}
        <div className="table-wrap sc-table-wrap">
          <table className="tbl sc-table">
            <thead>
              <tr>
                <th></th>
                {th("symbol", "Titolo")}
                {th("close", "Prezzo")}
                {th("chg1d", "Oggi", "Variazione del giorno (×3 = a leva 3)")}
                <th title="Posizione del prezzo fra minimo e massimo delle sedute precedenti: 1 giorno, 1 e 2 settimane, 1, 4 e 6 mesi, 52 settimane. Verde = massimo rotto oggi, rosso = minimo rotto oggi.">
                  <span className="sc-rb-head">{RANGES.map(([k, l]) => <span key={k}>{l}</span>)}</span>
                </th>
                {th("dhi_52w", "Dal max 52s", "Distanza % dal massimo a 52 settimane")}
                {th("dlo_52w", "Dal min 52s", "Distanza % dal minimo a 52 settimane")}
                {th("dma200", "Medie", "Pallini: medie 20 · 50 · 100 · 200 (verde sopra, rosso sotto, cerchio = incrocio oggi). Ordina per distanza dalla media 200")}
                {th("vol_ratio", "Vol", "Volume rispetto alla media delle 20 sedute")}
                {th("earn_days", "Earn.", "Giorni ai prossimi risultati")}
              </tr>
            </thead>
            <tbody>
              {filtered.slice(0, limit).map(r => (
                <tr key={r.symbol} onClick={() => setSel(r.symbol)} className="sc-row">
                  <td className={`sc-star-cell ${wlSet.has(r.symbol) ? "on" : ""}`} title={wlSet.has(r.symbol) ? "Seguito dal vivo" : ""}>{wlSet.has(r.symbol) ? "★" : ""}</td>
                  <td><span className="mono sc-sym">{r.symbol}</span><div className="sc-name">{r.name || ""}</div></td>
                  <td className="mono">{fmtPx(r.close)}</td>
                  <td className="mono"><Lev3 v={r.chg1d} /></td>
                  <td><span className="sc-rbs">{RANGES.map(([k]) => <RangeBar key={k} pos={r[`pos_${k}`]} bhi={r[`bhi_${k}`]} blo={r[`blo_${k}`]} label={RANGE_LABEL[k]} />)}</span></td>
                  <td className={`mono ${r.bhi_52w ? "sc-up" : ""}`}>{r.bhi_52w ? "nuovo max" : fmtPct(r.dhi_52w)}{near(r, "hi") && <span className="sc-near" title="A meno di un movimento medio giornaliero dal massimo">●</span>}</td>
                  <td className={`mono ${r.blo_52w ? "sc-down" : ""}`}>{r.blo_52w ? "nuovo min" : fmtPct(r.dlo_52w)}{near(r, "lo") && <span className="sc-near down" title="A meno di un movimento medio giornaliero dal minimo">●</span>}</td>
                  <td><MaDots r={r} /></td>
                  <td className={`mono ${r.vol_ratio >= 2 ? "sc-hot" : ""}`}>{r.vol_ratio != null ? `×${r.vol_ratio.toFixed(1)}` : "—"}</td>
                  <td className="mono">{r.earn_days != null ? <span className={r.earn_days <= 2 ? "sc-earn-soon" : ""}>{r.earn_days} gg</span> : ""}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {filtered.length > limit && (
          <div style={{ textAlign: "center", margin: "12px 0" }}>
            <button className="btn btn-sm" onClick={() => setLimit(l => l + PAGE)}>Mostra altri {Math.min(PAGE, filtered.length - limit)}</button>
          </div>
        )}
        {sel && <Detail symbol={sel} onClose={() => setSel(null)} starred={wlSet.has(sel)} onStar={star} />}
      </div>
    );
  };
})();