// stockcard.jsx — main grid card + ticker tape + signal feed + analyze overlay

const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

function fmtPx(n) { return n >= 100 ? n.toFixed(2) : n.toFixed(2); }
function fmtPct(n) { return (n >= 0 ? '+' : '') + n.toFixed(2) + '%'; }
function confBadgeColor(conf) {
  if (conf >= 85) return '#39ff7a';
  if (conf >= 70) return '#ffd700';
  if (conf >= 60) return '#ff8c00';
  return '#ff3b3b';
}

// ─── Stock Card ─────────────────────────────────────────────────
function StockCard({ stock, style = 'full', onAnalyze, scanning = false }) {
  const dirColor = stock.pattern.dir === 'BUY' ? '#39ff7a' : '#ff3b3b';
  const confColor = confBadgeColor(stock.confidence);
  const dirGlow = stock.pattern.dir === 'BUY' ? 'rgba(57,255,122,0.45)' : 'rgba(255,59,59,0.45)';

  if (style === 'compact') {
    return (
      <div className={`card compact ${scanning ? 'scanning' : ''}`} onClick={onAnalyze}>
        <div className="card-row">
          <div>
            <div className="sym">{stock.sym}</div>
            <div className="name">{stock.name}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="px">${fmtPx(stock.px)}</div>
            <div className="chg" style={{ color: stock.change >= 0 ? '#39ff7a' : '#ff3b3b' }}>{fmtPct(stock.change)}</div>
          </div>
        </div>
        <MiniChart series={stock.series} pattern={stock.patternKey} dir={stock.pattern.dir} w={300} h={56} />
        <div className="signal-row" style={{ borderColor: dirGlow }}>
          <span className="dir" style={{ color: dirColor, textShadow: `0 0 6px ${dirGlow}` }}>{stock.pattern.dir}</span>
          <span className="pat">{stock.pattern.name}</span>
          <span className="conf" style={{ color: confColor }}>{stock.confidence}%</span>
        </div>
      </div>
    );
  }

  if (style === 'log') {
    return (
      <div className={`card log ${scanning ? 'scanning' : ''}`} onClick={onAnalyze}>
        <div className="log-line">
          <span className="log-sym">{stock.sym}</span>
          <span className="log-px">${fmtPx(stock.px)}</span>
          <span className="dir" style={{ color: dirColor, textShadow: `0 0 6px ${dirGlow}` }}>▶ {stock.pattern.dir}</span>
        </div>
        <MiniChart series={stock.series} pattern={stock.patternKey} dir={stock.pattern.dir} w={300} h={64} />
        <div className="log-meta">
          <span>[{stock.pattern.name.toUpperCase()}]</span>
          <span style={{ color: stock.volRatio > 1.5 ? '#39ff7a' : 'rgba(57,255,122,0.55)' }}>
            VOL {stock.volRatio.toFixed(2)}x
          </span>
          <span style={{ color: confColor }}>CONF {stock.confidence}%</span>
        </div>
      </div>
    );
  }

  // full (default)
  return (
    <div className={`card full ${scanning ? 'scanning' : ''}`}>
      <div className="card-row">
        <div>
          <div className="sym">
            {stock.sym}
            <span className="sec-tag">{stock.sec}</span>
          </div>
          <div className="name">{stock.name}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="px">${fmtPx(stock.px)}</div>
          <div className="chg" style={{ color: stock.change >= 0 ? '#39ff7a' : '#ff3b3b' }}>{fmtPct(stock.change)}</div>
        </div>
      </div>
      <div className="chart-wrap">
        <MiniChart series={stock.series} pattern={stock.patternKey} dir={stock.pattern.dir} w={320} h={92} />
        <VolumeBars volume={stock.volume} w={320} h={26} />
      </div>
      <div className="signal-block" style={{ borderColor: dirGlow, background: stock.pattern.dir === 'BUY' ? 'rgba(57,255,122,0.06)' : 'rgba(255,59,59,0.06)' }}>
        <div className="signal-head">
          <span className="dir-pill" style={{ color: dirColor, borderColor: dirColor, textShadow: `0 0 8px ${dirGlow}` }}>
            ▶ {stock.pattern.dir}
          </span>
          <span className="pat-name">{stock.pattern.name}</span>
        </div>
        <div className="conf-bar">
          <div className="conf-fill" style={{ width: `${stock.confidence}%`, background: confColor, boxShadow: `0 0 8px ${confColor}44` }} />
          <span className="conf-label">{stock.pattern.name} · {stock.confidence}%</span>
        </div>
        <div className="signal-meta">
          <div><label>ENTRY</label><span>${fmtPx(stock.entry)}</span></div>
          <div><label>STOP</label><span style={{ color: '#ff7a7a' }}>${fmtPx(stock.stop)}</span></div>
          <div><label>TARGET</label><span style={{ color: '#7affa6' }}>${fmtPx(stock.target)}</span></div>
          <div><label>R:R</label><span>1:{stock.rr.toFixed(1)}</span></div>
          <div><label>VOL</label><span style={{ color: stock.volRatio > 1.5 ? '#39ff7a' : 'rgba(202,255,217,0.7)' }}>{stock.volRatio.toFixed(2)}x</span></div>
          <div><label>30D AVG</label><span>{stock.avgVol30.toFixed(2)}M</span></div>
        </div>
      </div>
      <button className="analyze-btn" onClick={onAnalyze}>
        ▸ ANALYZE
      </button>
    </div>
  );
}

// ─── Ticker Tape ────────────────────────────────────────────────
function TickerTape({ stocks }) {
  const items = [...stocks, ...stocks]; // duplicate for seamless scroll
  return (
    <div className="ticker-tape">
      <div className="ticker-track">
        {items.map((s, i) => (
          <span key={i} className="ticker-item">
            <span className="t-sym">{s.sym}</span>
            <span className="t-px">${fmtPx(s.px)}</span>
            <span className="t-chg" style={{ color: s.change >= 0 ? '#39ff7a' : '#ff3b3b' }}>{fmtPct(s.change)}</span>
            <span className="t-sep">·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Signal Feed ────────────────────────────────────────────────
function SignalFeed({ feed }) {
  const ref = useR(null);
  useE(() => {
    if (ref.current) ref.current.scrollTop = 0;
  }, [feed.length]);
  return (
    <div className="feed">
      <div className="panel-head">
        <span>▣ SIGNAL FEED</span>
        <span className="live-dot">● LIVE</span>
      </div>
      <div className="feed-list" ref={ref}>
        {feed.length === 0 && <div className="feed-empty">// awaiting market events...</div>}
        {feed.map((f, i) => (
          <div key={f.id} className={`feed-line ${f.dir.toLowerCase()} ${i === 0 ? 'fresh' : ''}`}>
            <span className="feed-time">{f.time}</span>
            <span className="feed-arrow" style={{ color: f.dir === 'BUY' ? '#39ff7a' : '#ff3b3b' }}>▶</span>
            <span className="feed-sym">{f.sym}</span>
            <span className="feed-dir" style={{ color: f.dir === 'BUY' ? '#39ff7a' : '#ff3b3b' }}>{f.dir}</span>
            <span className="feed-px">@${fmtPx(f.px)}</span>
            <span className="feed-pat">[{f.pattern}]</span>
            <span className="feed-conf">{f.confidence}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Pattern Legend ─────────────────────────────────────────────
function PatternLegend() {
  const sorted = Object.entries(window.PATTERNS).sort((a, b) => (b[1].success || 0) - (a[1].success || 0));
  return (
    <div className="legend">
      <div className="panel-head"><span>⊞ PATTERN LEGEND</span><span style={{ fontSize: 9, color: 'rgba(202,255,217,0.5)', letterSpacing: '0.1em' }}>SORT: SUCCESS%</span></div>
      <div className="legend-list">
        {sorted.map(([k, p]) => (
          <div key={k} className="legend-item">
            <span className="legend-dir" style={{ color: p.dir === 'BUY' ? '#39ff7a' : '#ff3b3b' }}>{p.dir}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="legend-name">
                {p.name}
                {p.success != null && (
                  <span style={{ float: 'right', fontSize: 9, color: p.success >= 80 ? '#39ff7a' : 'rgba(202,255,217,0.6)', letterSpacing: '0.05em' }}>
                    {p.success}%{p.target != null ? ` · ${p.target > 0 ? '+' : ''}${p.target}%` : ''}
                  </span>
                )}
              </div>
              <div className="legend-desc">{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Trade Journal ──────────────────────────────────────────────
function Journal({ entries }) {
  return (
    <div className="journal">
      <div className="panel-head"><span>◈ TRADE JOURNAL</span><span className="journal-count">{entries.length}</span></div>
      <div className="journal-list">
        {entries.length === 0 && <div className="feed-empty">// no trades logged yet</div>}
        {entries.map((e, i) => (
          <div key={i} className="journal-row">
            <span className="j-time">{e.time}</span>
            <span className="j-sym">{e.sym}</span>
            <span className="j-dir" style={{ color: e.dir === 'BUY' ? '#39ff7a' : '#ff3b3b' }}>{e.dir}</span>
            <span className="j-px">${fmtPx(e.px)}</span>
            <span className="j-pat">{e.pattern}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Analyze Overlay ────────────────────────────────────────────
function AnalyzeOverlay({ stock, onClose, onLogTrade }) {
  const [phase, setPhase] = useS(0); // 0=scanning, 1=results
  const [scanLines, setScanLines] = useS([]);

  useE(() => {
    setPhase(0); setScanLines([]);
    const lines = [
      `> Loading 60d historical data for ${stock.sym}...`,
      `> Computing pivot points (peaks/troughs)...`,
      `> Running pattern recognition [14 models]...`,
      `> Cross-referencing volume profile vs 30d avg...`,
      `> Calculating support/resistance levels...`,
      `> Match found: ${stock.pattern.name.toUpperCase()} (${stock.confidence}%)`,
      `> Generating risk/reward parameters...`,
      `> Signal verified. Releasing to feed.`,
    ];
    let i = 0;
    const id = setInterval(() => {
      if (i < lines.length) {
        setScanLines(s => [...s, lines[i]]);
        i++;
      } else {
        clearInterval(id);
        setTimeout(() => setPhase(1), 250);
      }
    }, 180);
    return () => clearInterval(id);
  }, [stock.sym]);

  const dirColor = stock.pattern.dir === 'BUY' ? '#39ff7a' : '#ff3b3b';
  const dirGlow = stock.pattern.dir === 'BUY' ? 'rgba(57,255,122,0.45)' : 'rgba(255,59,59,0.45)';

  return (
    <div className="overlay" onClick={onClose}>
      <div className="overlay-card" onClick={e => e.stopPropagation()}>
        <div className="overlay-head">
          <div>
            <span className="overlay-sym">{stock.sym}</span>
            <span className="overlay-name">{stock.name}</span>
          </div>
          <button className="overlay-close" onClick={onClose}>✕ CLOSE</button>
        </div>

        <div className="overlay-body">
          {phase === 0 ? (
            <div className="scan-block">
              <div className="scan-title">▣ ANALYZING TARGET <span className="cursor">█</span></div>
              <div className="scan-lines">
                {scanLines.map((l, i) => <div key={i}>{l}</div>)}
              </div>
              <div className="scan-bar"><div className="scan-bar-fill" style={{ width: `${(scanLines.length / 8) * 100}%` }} /></div>
            </div>
          ) : (
            <div className="results">
              <div className="results-left">
                <div className="big-chart-wrap">
                  <MiniChart series={stock.series} pattern={stock.patternKey} dir={stock.pattern.dir} w={620} h={280} animated={true} />
                  <VolumeBars volume={stock.volume} w={620} h={50} />
                </div>
                <div className="annot-tip">
                  <strong>// Pattern annotation:</strong> {stock.pattern.desc}
                </div>
              </div>
              <div className="results-right">
                <div className="verdict" style={{ borderColor: dirColor, background: stock.pattern.dir === 'BUY' ? 'rgba(57,255,122,0.08)' : 'rgba(255,59,59,0.08)' }}>
                  <div className="verdict-label">VERDICT</div>
                  <div className="verdict-dir" style={{ color: dirColor, textShadow: `0 0 12px ${dirGlow}` }}>
                    ▶ {stock.pattern.dir}
                  </div>
                  <div className="verdict-pat">{stock.pattern.name}</div>
                  <div className="conf-bar big">
                    <div className="conf-fill" style={{ width: `${stock.confidence}%`, background: confBadgeColor(stock.confidence), boxShadow: `0 0 8px ${confBadgeColor(stock.confidence)}44` }} />
                    <span className="conf-label">{stock.pattern.name} · {stock.confidence}%</span>
                  </div>
                </div>

                <div className="reasons">
                  <div className="reasons-head">// EVIDENCE STACK</div>
                  <ReasonRow label="Pattern" value={stock.pattern.name} />
                  <ReasonRow label="Setup" value={stock.pattern.desc} small />
                  {stock.evidence && stock.evidence.length > 0 && stock.evidence.map((e, i) => (
                    <ReasonRow key={i} label={i === 0 ? 'Detection' : ''} value={e} small />
                  ))}
                  <ReasonRow label="Volume" value={`${stock.volRatio.toFixed(2)}x 30d avg`} status={stock.volRatio > 1.5 ? 'good' : 'neutral'} />
                  <ReasonRow label="Trend" value={stock.change >= 0 ? `+${stock.change.toFixed(2)}% over 60d` : `${stock.change.toFixed(2)}% over 60d`} />
                  <ReasonRow label="Strength" value={stock.confidence >= 85 ? 'HIGH' : stock.confidence >= 70 ? 'MEDIUM' : stock.confidence >= 60 ? 'LOW' : 'VERY LOW'} status={stock.confidence >= 70 ? 'good' : 'neutral'} />
                </div>

                <div className="trade-params">
                  <div className="reasons-head">// TRADE PARAMETERS</div>
                  <div className="param-grid">
                    <div><label>ENTRY</label><span>${fmtPx(stock.entry)}</span></div>
                    <div><label>STOP</label><span style={{ color: '#ff7a7a' }}>${fmtPx(stock.stop)}</span></div>
                    <div><label>TARGET</label><span style={{ color: '#7affa6' }}>${fmtPx(stock.target)}</span></div>
                    <div><label>R:R</label><span>1:{stock.rr.toFixed(1)}</span></div>
                    <div><label>RISK</label><span>{Math.abs(((stock.stop - stock.entry) / stock.entry) * 100).toFixed(2)}%</span></div>
                    <div><label>REWARD</label><span>{Math.abs(((stock.target - stock.entry) / stock.entry) * 100).toFixed(2)}%</span></div>
                  </div>
                </div>

                <button className="log-btn" onClick={() => onLogTrade(stock)}>
                  ◈ LOG TO JOURNAL
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ReasonRow({ label, value, status, small }) {
  return (
    <div className="reason-row">
      <div className="reason-label">{label}</div>
      <div className={`reason-value ${small ? 'small' : ''}`} style={status === 'good' ? { color: '#39ff7a' } : {}}>{value}</div>
    </div>
  );
}

window.StockCard = StockCard;
window.TickerTape = TickerTape;
window.SignalFeed = SignalFeed;
window.PatternLegend = PatternLegend;
window.Journal = Journal;
window.AnalyzeOverlay = AnalyzeOverlay;