// Run-now cost confirmation modal — same shell as StrategyEditModal but
// smaller, gates the click on POST /api/strategies/:id/run-now.

window.RunNowModal = function RunNowModal({ strategy, onClose, onFired }) {
  const { useState } = React;
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);

  // Estimate cost client-side too so the modal renders instantly
  // (the server returns the authoritative figure but we use a fast
  // approximation for the confirmation question).
  const lastHits = strategy.last_hits_count ?? null;
  const estCost = strategy.mode === 'watchlist'
    ? (strategy.ticker_list || []).length * 0.32
    : (lastHits != null ? lastHits * 0.32 : null);

  const fire = async () => {
    setBusy(true); setError(null);
    try {
      const result = await window.EQ_API.runStrategyNow(strategy.id);
      onFired(result);
    } catch (e) {
      setError(e.message || 'Run-now failed');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} style={{
      position: 'fixed', inset: 0, zIndex: 60,
      background: 'rgba(10,22,40,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width: 440, maxWidth: '92vw',
        background: 'var(--paper)', borderRadius: 14,
        border: '1px solid var(--ink-150)', boxShadow: '0 24px 60px rgba(10,22,40,0.22)',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--ink-150)' }}>
          <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-900)' }}>
            Run strategy now
          </div>
        </div>

        <div style={{ padding: '18px 22px' }}>
          {error && <div style={{ marginBottom: 12 }}><window.ErrorBanner error={{ message: error }}/></div>}

          <div style={{ fontSize: 13.5, color: 'var(--ink-800)', marginBottom: 14, lineHeight: 1.5 }}>
            Fire the screen cycle for <b>{strategy.name}</b> right now? This bypasses the cron schedule but still respects the dedupe rules (already-recent tickers will skip).
          </div>

          <div style={{ background: 'var(--ink-50)', border: '1px solid var(--ink-150)', borderRadius: 8, padding: '12px 14px', marginBottom: 6 }}>
            <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700, marginBottom: 6 }}>
              Cost projection
            </div>
            {strategy.mode === 'watchlist' ? (
              <div style={{ fontSize: 13, color: 'var(--ink-800)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{(strategy.ticker_list || []).length} tickers</span>
                {' × ~$0.32 = '}
                <b style={{ fontFamily: 'var(--font-mono)' }}>~${estCost.toFixed(2)}</b>
              </div>
            ) : lastHits != null ? (
              <div style={{ fontSize: 13, color: 'var(--ink-800)' }}>
                Last screen produced <b style={{ fontFamily: 'var(--font-mono)' }}>{lastHits} hits</b>
                {' (~'}<b style={{ fontFamily: 'var(--font-mono)' }}>${estCost.toFixed(2)}</b>{')'}
                <div style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 4 }}>
                  Actual cost depends on dedupe — already-recent tickers skip.
                </div>
              </div>
            ) : (
              <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>
                Estimate unavailable (no prior screen). Cost depends on how many tickers match the filters AND aren't already in dedupe.
              </div>
            )}
          </div>
        </div>

        <div style={{
          padding: '12px 20px', borderTop: '1px solid var(--ink-150)', background: 'var(--ink-50)',
          display: 'flex', justifyContent: 'flex-end', gap: 8,
        }}>
          <button onClick={onClose} style={{
            padding: '8px 14px', fontSize: 12.5, fontWeight: 500,
            background: 'var(--ink-100)', color: 'var(--ink-700)',
            border: '1px solid var(--ink-200)', borderRadius: 7, cursor: 'pointer', fontFamily: 'inherit',
          }}>Cancel</button>
          <button onClick={fire} disabled={busy} style={{
            padding: '8px 14px', fontSize: 12.5, fontWeight: 500,
            background: 'var(--ink-900)', color: 'white',
            border: 'none', borderRadius: 7, cursor: 'pointer',
            fontFamily: 'inherit', opacity: busy ? 0.6 : 1,
            display: 'inline-flex', alignItems: 'center', gap: 7,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 3l14 9-14 9V3z" fill="white"/></svg>
            {busy ? 'Firing…' : 'Yes, run now'}
          </button>
        </div>
      </div>
    </div>
  );
};