// Home / Market Overview
const { useState: _uS, useMemo: _uM } = React;

window.HomePage = ({ currency, setPage, setSelectedStock, livePrices }) => {
  const { stocks, dividends, breadth, today } = JASTOCKS_DATA;

  // Apply live prices to stock list for sorted views
  const liveStocks = _uM(() => stocks.map(s => {
    const lp = livePrices[s.sym];
    return lp ? { ...s, price: lp.price, change: lp.change, changePct: lp.changePct } : s;
  }), [stocks, livePrices]);

  const gainers = [...liveStocks].sort((a, b) => b.changePct - a.changePct).slice(0, 5);
  const losers  = [...liveStocks].sort((a, b) => a.changePct - b.changePct).slice(0, 5);
  const mostTraded = [...liveStocks].sort((a, b) => b.volume - a.volume).slice(0, 5);

  const upcomingDivs = [...dividends]
    .filter(d => d.exDate >= today)
    .sort((a, b) => a.exDate - b.exDate)
    .slice(0, 8);

  const sectorSumm = _uM(() => {
    const map = {};
    liveStocks.forEach(s => {
      const sector = s.sector || 'Other';
      if (sector === 'Other') return; // skip uncategorised
      if (!map[sector]) map[sector] = { change: 0, n: 0 };
      map[sector].change += s.changePct;
      map[sector].n += 1;
    });
    return Object.entries(map)
      .map(([k, v]) => ({ sector: k, avg: v.change / v.n, n: v.n }))
      .sort((a, b) => b.avg - a.avg);
  }, [liveStocks]);

  const goToStock = (sym) => { setSelectedStock(sym); setPage('stock'); };

  const hour = new Date().getHours();
  const greeting = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">{greeting}.</h1>
          <div className="page-subtitle">JSE Market · {fmtDateFull(today)}</div>
        </div>
        <div className="flex gap-2 items-center">
          <div className="seg">
            <button className="active">Overview</button>
          </div>
        </div>
      </div>

      {/* Market breadth — real counts from live stock data */}
      <div className="grid g-3 mb-4">
        {[
          { label: 'All Markets', b: breadth.all },
          { label: 'Main Market', b: breadth.main },
          { label: 'Junior Market', b: breadth.junior },
        ].map(({ label, b }) => {
          const advPct = b.total > 0 ? (b.advancers / b.total) * 100 : 0;
          const decPct = b.total > 0 ? (b.decliners / b.total) * 100 : 0;
          return (
            <div key={label} className="index-card">
              <div className="ix-name">{label}</div>
              <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 10 }}>{b.total} stocks listed</div>
              <div style={{ display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', marginBottom: 10 }}>
                <div style={{ width: `${advPct}%`, background: 'var(--up)', transition: 'width 0.4s' }}/>
                <div style={{ width: `${100 - advPct - decPct}%`, background: 'var(--border-strong)' }}/>
                <div style={{ flex: 1, background: 'var(--down)' }}/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span className="up mono">▲ {b.advancers} up</span>
                <span className="text-3 mono">— {b.unchanged} flat</span>
                <span className="down mono">▼ {b.decliners} down</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Upcoming dividends strip */}
      <div className="card mb-4">
        <div className="card-header">
          <div className="card-title">
            Upcoming Dividends <span className="hint">Next 30 days · Ex-dividend and payment dates</span>
          </div>
          <div className="flex gap-2 items-center">
            <button className="btn sm ghost" onClick={() => setPage('dividends')}>
              View all <Icons.ChevronRight/>
            </button>
          </div>
        </div>
        {upcomingDivs.length === 0 ? (
          <div className="text-3" style={{ padding: 24, textAlign: 'center', fontSize: 13 }}>
            No upcoming dividends in the next 30 days
          </div>
        ) : (
          <div className="scroll-x" style={{ padding: '6px 0' }}>
            <div style={{ display: 'flex', gap: 10, padding: '12px 16px', minWidth: 'max-content' }}>
              {upcomingDivs.map((d, i) => {
                const stock = JASTOCKS_DATA.bySym[d.sym];
                if (!stock) return null;
                const daysTo = Math.ceil((d.exDate - today) / 86400000);
                const lp = livePrices[d.sym];
                // Use the stock's trailing annual yield — never annualise a single payment amount
                const trailingYield = stock.yield > 0 ? stock.yield.toFixed(2) : null;
                return (
                  <div key={i} onClick={() => goToStock(d.sym)}
                       style={{
                         minWidth: 220,
                         background: 'var(--bg-2)', border: '1px solid var(--border)',
                         borderRadius: 10, padding: 14, cursor: 'pointer',
                       }}>
                    <div className="flex items-center gap-2 mb-3">
                      <SymBadge sym={d.sym}/>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{d.sym}</div>
                        <div className="text-3" style={{ fontSize: 11 }}>{stock.name}</div>
                      </div>
                      {trailingYield && <div className="mono" style={{ fontSize: 11.5, color: 'var(--accent)' }}>{trailingYield}%</div>}
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="text-3" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Ex-date</div>
                        <div className="mono" style={{ fontSize: 13, color: 'var(--accent-2)' }}>{fmtDate(d.exDate)}</div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div className="text-3" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Per share</div>
                        <div className="mono" style={{ fontSize: 13 }}>
                          {d.currency === 'USD' ? 'US$' : 'J$'}{d.amount.toFixed(4)}
                        </div>
                      </div>
                    </div>
                    <div className="hr" style={{ margin: '10px 0' }}/>
                    <div className="flex items-center justify-between">
                      <span className="tag ex">In {daysTo}d</span>
                      <span className="text-3 mono" style={{ fontSize: 11 }}>{d.payDate ? `Pay ${fmtDate(d.payDate)}` : 'Pay TBA'}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      {/* Gainers / Losers / Most Traded */}
      <div className="grid g-3 mb-4">
        <MoverCard title="Top Gainers" accent="up" stocks={gainers} currency={currency} onClick={goToStock}/>
        <MoverCard title="Top Losers" accent="down" stocks={losers} currency={currency} onClick={goToStock}/>
        <MoverCard title="Most Traded" accent="neutral" stocks={mostTraded} currency={currency} onClick={goToStock} showVolume/>
      </div>

      {/* Sector heatmap + market breadth */}
      <div className="grid mb-4" style={{ gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Sector Performance <span className="hint">Average % change today</span></div>
          </div>
          <div style={{ padding: 16 }}>
            {sectorSumm.length > 0 ? (
              <div className="heatmap">
                {sectorSumm.map(s => {
                  const intensity = Math.min(1, Math.abs(s.avg) / 2);
                  const up = s.avg >= 0;
                  const bg = up
                    ? `oklch(0.72 ${0.08 + intensity * 0.14} 145)`
                    : `oklch(0.65 ${0.1 + intensity * 0.13} 25)`;
                  return (
                    <div key={s.sector} className="hm" style={{ background: bg }}>
                      <div className="s">{s.sector}</div>
                      <div>
                        <div className="p">{s.n} stocks</div>
                        <div style={{ fontSize: 13 }}>{fmtPct(s.avg)}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="text-3" style={{ textAlign: 'center', padding: 20 }}>Loading sector data…</div>
            )}
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Market Breadth</div>
            <span className="text-3 mono" style={{ fontSize: 11 }}>{liveStocks.length} stocks</span>
          </div>
          <div style={{ padding: 20 }}>
            <BreadthBar stocks={liveStocks}/>
            <div className="hr"/>
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 0, rowGap: 14 }}>
              <MiniStat label="Advancers" value={liveStocks.filter(s => s.change > 0).length} color="up"/>
              <MiniStat label="Decliners" value={liveStocks.filter(s => s.change < 0).length} color="down"/>
              <MiniStat label="Unchanged" value={liveStocks.filter(s => s.change === 0).length} color=""/>
              <MiniStat label="Total stocks" value={liveStocks.length} color=""/>
              <MiniStat label="Div events" value={dividends.length} color="accent"/>
              <MiniStat label="Avg yield" value={
                (liveStocks.filter(s => s.yield > 0).reduce((sum, s) => sum + s.yield, 0) /
                 Math.max(1, liveStocks.filter(s => s.yield > 0).length)).toFixed(2) + '%'
              } color="accent"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

function MoverCard({ title, accent, stocks, currency, onClick, showVolume }) {
  return (
    <div className="card">
      <div className="card-header">
        <div className="card-title">{title}</div>
        <span className="text-3 mono" style={{ fontSize: 11 }}>Today</span>
      </div>
      <div>
        {stocks.map((s, i) => (
          <div key={s.sym} className="flex items-center justify-between"
               onClick={() => onClick(s.sym)}
               style={{ padding: '11px 16px', borderBottom: i < stocks.length - 1 ? '1px solid var(--border)' : 'none', cursor: 'pointer' }}>
            <div className="flex items-center gap-3">
              <SymBadge sym={s.sym} size={28}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{s.sym}</div>
                <div className="text-3" style={{ fontSize: 11 }}>{s.name}</div>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="mono" style={{ fontSize: 13 }}>{fmtPrice(s.price, currency)}</div>
              {showVolume
                ? <div className="text-3 mono" style={{ fontSize: 11 }}>{(s.volume / 1000).toFixed(0)}k vol</div>
                : <ChangeBadge change={s.change} pct={s.changePct} size="sm"/>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MiniStat({ label, value, color }) {
  const style = color === 'accent' ? { color: 'var(--accent)' } : {};
  const cls = color === 'up' ? 'up' : color === 'down' ? 'down' : '';
  return (
    <div>
      <div className="text-3" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</div>
      <div className={`mono ${cls}`} style={{ fontSize: 18, fontWeight: 600, marginTop: 3, ...style }}>{value}</div>
    </div>
  );
}

function BreadthBar({ stocks }) {
  const up = stocks.filter(s => s.change > 0).length;
  const flat = stocks.filter(s => s.change === 0).length;
  const down = stocks.filter(s => s.change < 0).length;
  const total = Math.max(stocks.length, 1);
  return (
    <div>
      <div style={{ display: 'flex', height: 10, borderRadius: 4, overflow: 'hidden', marginBottom: 10 }}>
        <div style={{ width: `${(up / total) * 100}%`, background: 'var(--up)' }}/>
        <div style={{ width: `${(flat / total) * 100}%`, background: 'var(--border-strong)' }}/>
        <div style={{ width: `${(down / total) * 100}%`, background: 'var(--down)' }}/>
      </div>
      <div className="flex justify-between mono" style={{ fontSize: 11 }}>
        <span className="up">▲ {up} up</span>
        <span className="text-3">— {flat} flat</span>
        <span className="down">▼ {down} down</span>
      </div>
    </div>
  );
}