// Counters, ticker, monthly bars
const { useRef: uR, useEffect: uE, useState: uS } = React;

function useInView(opts = { threshold: 0.2 }) {
  const ref = uR(null);
  const [inView, setInView] = uS(false);
  uE(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setInView(true);
      return;
    }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); io.disconnect(); }
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, inView];
}

function Counter({ value, decimals = 2, duration = 1500, suffix = "" }) {
  const [v, setV] = uS(0);
  uE(() => {
    let raf = 0;
    let t0 = null;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const e = 1 - Math.pow(1 - p, 3);
      setV(value * e);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  return <span>{v.toFixed(decimals)}{suffix}</span>;
}

const TICKER_LOGOS = {
  BTC:   'https://assets.coingecko.com/coins/images/1/small/bitcoin.png',
  ETH:   'https://assets.coingecko.com/coins/images/279/small/ethereum.png',
  SOL:   'https://assets.coingecko.com/coins/images/4128/small/solana.png',
  XMR:   'https://assets.coingecko.com/coins/images/69/small/monero_logo.png',
  DOGE:  'https://assets.coingecko.com/coins/images/5/small/dogecoin.png',
  AAVE:  'https://assets.coingecko.com/coins/images/12645/small/aave-token-round.png',
  ARB:   'https://assets.coingecko.com/coins/images/16547/small/photo_2023-03-29_21.47.00.jpeg',
};
const baseSym = (sym) => sym.replace(/USDT$|USDC$|USD$|PERP$/i, '');

function fmtPx(p) {
  if (p >= 1000) return p.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  if (p >= 10)   return p.toFixed(2);
  if (p >= 1)    return p.toFixed(3);
  return p.toFixed(4);
}
function fmtChg(c) {
  const v = Number(c);
  return `${v >= 0 ? '+' : ''}${v.toFixed(2)}%`;
}

function Ticker() {
  const seed = window.HS_DATA.tickers;
  const [items, setItems] = React.useState(seed);

  React.useEffect(() => {
    const liveSyms = seed.filter(t => !t.alt).map(t => t.sym);
    if (!liveSyms.length) return;
    let cancelled = false;

    const fetchOne = async (sym) => {
      const res = await fetch(`https://api.binance.com/api/v3/ticker/24hr?symbol=${sym}`);
      if (!res.ok) throw new Error(`${sym} ${res.status}`);
      return res.json();
    };

    const fetchLive = async () => {
      const results = await Promise.allSettled(liveSyms.map(fetchOne));
      if (cancelled) return;
      const bySym = {};
      results.forEach((r, i) => {
        if (r.status === 'fulfilled') bySym[liveSyms[i]] = r.value;
      });
      if (!Object.keys(bySym).length) return;
      setItems(prev => prev.map(t => {
        if (t.alt) return t;
        const d = bySym[t.sym];
        if (!d) return t;
        const px = parseFloat(d.lastPrice);
        const chg = parseFloat(d.priceChangePercent);
        return { ...t, px: fmtPx(px), chg: fmtChg(chg), up: chg >= 0 };
      }));
    };

    fetchLive();
    const id = setInterval(fetchLive, 20000);
    return () => { cancelled = true; clearInterval(id); };
  }, []);

  return (
    <div className="ticker-wrap">
      <div className="ticker-label">
        <span style={{width:5,height:5,borderRadius:'50%',background:'var(--accent)',boxShadow:'0 0 6px var(--accent)',animation:'pulse 2s ease-in-out infinite'}} />
        LIVE · HIGHSTAKE TERMINAL
      </div>
      <div className="ticker-viewport">
        <div className="ticker-track">
          {[...items, ...items].map((t, i) => {
            const logo = !t.alt ? TICKER_LOGOS[baseSym(t.sym)] : null;
            return (
              <span className="ticker-item" key={i}>
                {logo && (
                  <img
                    className="ticker-logo"
                    src={logo}
                    alt=""
                    aria-hidden="true"
                    loading="lazy"
                    width="14"
                    height="14"
                    onError={(e) => { e.target.style.display = 'none'; }}
                  />
                )}
                <span className="sym">{t.sym}</span>
                <span>{t.px}</span>
                <span className={t.up ? "up" : "dn"}>{t.chg}</span>
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function MonthlyBars() {
  const data = window.HS_DATA.monthly;
  const max = Math.max(...data.map(d => d.v));
  const min = Math.min(...data.map(d => d.v));
  const [ref, inView] = useInView();
  return (
    <div className="months-wrap">
      <div className="months" ref={ref}>
        {data.map((d, i) => {
          const h = (d.v / max) * 100;
          const intensity = (d.v - min) / (max - min || 1);
          return (
            <div className="month-col" key={i}>
              <div className="month-bar-wrap">
                <div
                  className="month-bar"
                  style={{
                    height: inView ? `${h}%` : "0%",
                    transition: `height 1.2s cubic-bezier(.2,.7,.2,1) ${i * 60}ms`,
                    '--mb-intensity': intensity.toFixed(3),
                  }}
                />
              </div>
              <div className="month-val">{d.v.toFixed(2)}%</div>
              <div className="month-lbl">{d.m}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function RequestAccessModal() {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState({
    name: '', firm: '', email: '', ticket: '', context: ''
  });
  const tickets = ['$500K – $1M', '$1M – $5M', '$5M+'];

  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setSubmitted(false); setError(''); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('open-request-form', onOpen);
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('open-request-form', onOpen);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || submitting) return;
    setError('');
    setSubmitting(true);
    try {
      const res = await fetch('/api/request-access', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || 'Submission failed');
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Please email invest@highstake.app directly.');
    } finally {
      setSubmitting(false);
    }
  };

  if (!open) return null;
  const valid = form.name.trim() && form.email.trim() && /\S+@\S+\.\S+/.test(form.email);

  return (
    <div className="ra-overlay" onClick={() => setOpen(false)}>
      <div className="ra-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="ra-h">
        <button className="ra-close" onClick={() => setOpen(false)} aria-label="Close">×</button>
        {!submitted ? (
          <>
            <div className="ra-head">
              <div className="sec-label" style={{ margin: 0 }}>// REQUEST ACCESS</div>
              <h3 id="ra-h" className="ra-h">A short note to <em>start the conversation</em>.</h3>
              <p className="ra-p">
                We review every request personally. If there's a fit, we'll send a secure
                onboarding link within 48 hours.
              </p>
            </div>
            <form className="ra-form" onSubmit={submit}>
              <div className="ra-row">
                <label>
                  <span>Full name <i>*</i></span>
                  <input type="text" required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Jane Doe" />
                </label>
                <label>
                  <span>Firm / Entity</span>
                  <input type="text" value={form.firm} onChange={e => update('firm', e.target.value)} placeholder="(Optional)" />
                </label>
              </div>
              <label className="ra-full">
                <span>Email <i>*</i></span>
                <input type="email" required value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@firm.com" />
              </label>
              <div className="ra-full">
                <span className="ra-lbl">Indicative ticket size</span>
                <div className="ra-segs">
                  {tickets.map(t => (
                    <button type="button" key={t}
                      className={`ra-seg ${form.ticket === t ? 'active' : ''}`}
                      onClick={() => update('ticket', form.ticket === t ? '' : t)}>
                      {t}
                    </button>
                  ))}
                </div>
              </div>
              <label className="ra-full">
                <span>Context</span>
                <textarea rows="3" value={form.context} onChange={e => update('context', e.target.value)}
                  placeholder="Briefly — who you are, what you're looking for, and any timing." />
              </label>
              {error && <div className="ra-error">{error}</div>}
              <div className="ra-actions">
                <button type="button" className="btn" onClick={() => setOpen(false)} disabled={submitting}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={!valid || submitting}>
                  {submitting ? 'Sending…' : 'Submit Request ↗'}
                </button>
              </div>
              <p className="ra-foot">
                Or email <a href="mailto:invest@highstake.app">invest@highstake.app</a> directly.
              </p>
            </form>
          </>
        ) : (
          <div className="ra-success">
            <div className="ra-success-mark">✓</div>
            <h3 className="ra-h">Request received.</h3>
            <p className="ra-p">
              Every inquiry is reviewed personally. A member of our team will respond within 48 hours.
            </p>
            <button className="btn btn-primary" onClick={() => setOpen(false)}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

function RequestTearSheetModal() {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState({ name: '', entity: '', email: '' });

  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setSubmitted(false); setError(''); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('open-tearsheet-form', onOpen);
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('open-tearsheet-form', onOpen);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || submitting) return;
    setError('');
    setSubmitting(true);
    try {
      const res = await fetch('/api/request-tearsheet', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || 'Submission failed');
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Please email invest@highstake.app directly.');
    }
    finally { setSubmitting(false); }
  };

  if (!open) return null;
  const valid = form.name.trim() && form.email.trim() && /\S+@\S+\.\S+/.test(form.email);

  return (
    <div className="ra-overlay" onClick={() => setOpen(false)}>
      <div className="ra-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="ts-h">
        <button className="ra-close" onClick={() => setOpen(false)} aria-label="Close">×</button>
        {!submitted ? (
          <>
            <div className="ra-head">
              <div className="sec-label" style={{ margin: 0 }}>// TEAR SHEET REQUEST</div>
              <h3 id="ts-h" className="ra-h">Request the <em>Q2 2026 tear sheet</em>.</h3>
              <p className="ra-p">
                The tear sheet is a confidential institutional document. Provide your details and we'll send it to your inbox.
              </p>
            </div>
            <form className="ra-form" onSubmit={submit}>
              <div className="ra-row">
                <label>
                  <span>Full name <i>*</i></span>
                  <input type="text" required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Jane Doe" />
                </label>
                <label>
                  <span>Firm / Entity</span>
                  <input type="text" value={form.entity} onChange={e => update('entity', e.target.value)} placeholder="(Optional)" />
                </label>
              </div>
              <label className="ra-full">
                <span>Email <i>*</i></span>
                <input type="email" required value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@firm.com" />
              </label>
              {error && <div className="ra-error">{error}</div>}
              <div className="ra-actions">
                <button type="button" className="btn" onClick={() => setOpen(false)} disabled={submitting}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={!valid || submitting}>
                  {submitting ? 'Sending…' : 'Send Tear Sheet ↗'}
                </button>
              </div>
              <p className="ra-foot">
                Or email <a href="mailto:invest@highstake.app">invest@highstake.app</a> to request directly.
              </p>
            </form>
          </>
        ) : (
          <div className="ra-success">
            <div className="ra-success-mark">✓</div>
            <h3 className="ra-h">Tear sheet sent.</h3>
            <p className="ra-p">
              Check your inbox — the document should arrive within seconds. If you don't see it, look in spam or contact us directly.
            </p>
            <button className="btn btn-primary" onClick={() => setOpen(false)}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Counter, Ticker, MonthlyBars, useInView, RequestAccessModal, RequestTearSheetModal });