// Dividend Calendar — wired to live Stacks JSE API
window.DividendsPage = ({ currency, setPage, setSelectedStock }) => {
  const { bySym, today } = JASTOCKS_DATA;
  const [tab, setTab] = React.useState('calendar'); // 'calendar' | 'growth'
  const [market, setMarket] = React.useState('all');
  const [monthOffset, setMonthOffset] = React.useState(0);
  const [divs, setDivs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const base = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1);
  const monthName = base.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });

  // Fetch dividend calendar for visible month + surrounding months
  React.useEffect(() => {
    setLoading(true);
    const start = new Date(base.getFullYear(), base.getMonth() - 1, 1);
    const end = new Date(base.getFullYear(), base.getMonth() + 2, 0);
    const fmt = d => d.toISOString().slice(0, 10);

    JaAPI.dividendCalendar(fmt(start), fmt(end))
      .then(res => {
        const transformed = (res.dividends || [])
          .map(d => JaAPI.transformDiv(d))
          .filter(Boolean);
        setDivs(transformed);
        setLoading(false);
      })
      .catch(() => {
        // Fallback to global dividends
        setDivs(JASTOCKS_DATA.dividends || []);
        setLoading(false);
      });
  }, [monthOffset]);

  const filtered = divs.filter(d => {
    const stock = bySym[d.sym];
    if (market !== 'all' && stock) {
      if (market === 'main' && stock.market !== 'Main') return false;
      if (market === 'junior' && stock.market !== 'Junior') return false;
    }
    return d.exDate.getMonth() === base.getMonth() && d.exDate.getFullYear() === base.getFullYear();
  });

  // Calendar grid
  const firstDay = new Date(base.getFullYear(), base.getMonth(), 1);
  const daysInMonth = new Date(base.getFullYear(), base.getMonth() + 1, 0).getDate();
  const startWeekday = firstDay.getDay();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) {
    const date = new Date(base.getFullYear(), base.getMonth(), d);
    const exEvents = divs.filter(dv => {
      const stock = bySym[dv.sym];
      if (market !== 'all' && stock) {
        if (market === 'main' && stock.market !== 'Main') return false;
        if (market === 'junior' && stock.market !== 'Junior') return false;
      }
      return dv.exDate.toDateString() === date.toDateString();
    });
    const payEvents = divs.filter(dv => {
      const stock = bySym[dv.sym];
      if (market !== 'all' && stock) {
        if (market === 'main' && stock.market !== 'Main') return false;
        if (market === 'junior' && stock.market !== 'Junior') return false;
      }
      return dv.payDate && dv.payDate.toDateString() === date.toDateString();
    });
    cells.push({ d, date, exEvents, payEvents });
  }

  const totalValue = filtered.reduce((sum, d) => sum + d.amount, 0);
  const yieldsArr = filtered.map(d => bySym[d.sym]?.yield).filter(Boolean);
  const avgYield = yieldsArr.length > 0 ? yieldsArr.reduce((a, b) => a + b, 0) / yieldsArr.length : 0;

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Dividends</h1>
          <div className="page-subtitle">Track ex-dividend dates, payment schedules, and dividend growth across the JSE</div>
        </div>
        <div className="flex gap-2 items-center">
          <div className="seg">
            <button className={tab==='calendar'?'active':''} onClick={()=>setTab('calendar')}>Calendar</button>
            <button className={tab==='growth'?'active':''} onClick={()=>setTab('growth')}>Growth</button>
          </div>
          {tab === 'calendar' && <>
            <div className="seg">
              <button className={market==='all'?'active':''} onClick={()=>setMarket('all')}>All markets</button>
              <button className={market==='main'?'active':''} onClick={()=>setMarket('main')}>Main</button>
              <button className={market==='junior'?'active':''} onClick={()=>setMarket('junior')}>Junior</button>
            </div>
            <div className="seg">
              <button onClick={()=>setMonthOffset(monthOffset-1)}>‹</button>
              <button className="active" style={{ minWidth: 130, textAlign: 'center' }}>{monthName}</button>
              <button onClick={()=>setMonthOffset(monthOffset+1)}>›</button>
            </div>
          </>}
        </div>
      </div>

      {tab === 'growth' && <DividendGrowthView bySym={bySym} setPage={setPage} setSelectedStock={setSelectedStock} currency={currency}/>}
      {tab === 'calendar' && <>

      {/* Summary row */}
      <div className="stat-row mb-4">
        <div className="stat">
          <div className="stat-label">Events this month</div>
          <div className="stat-value">{loading ? '—' : filtered.length}</div>
          <div className="stat-sub text-3">
            {filtered.filter(d=>bySym[d.sym]?.market==='Main').length} Main ·{' '}
            {filtered.filter(d=>bySym[d.sym]?.market==='Junior').length} Junior
          </div>
        </div>
        <div className="stat">
          <div className="stat-label">Total per-share value</div>
          <div className="stat-value">{loading ? '—' : fmtPrice(totalValue, currency)}</div>
          <div className="stat-sub text-3">Across {filtered.length} declarations</div>
        </div>
        <div className="stat">
          <div className="stat-label">Avg yield (trailing)</div>
          <div className="stat-value" style={{ color: 'var(--accent)' }}>{loading ? '—' : avgYield.toFixed(2) + '%'}</div>
          <div className="stat-sub text-3">Weighted by listed stocks</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
        {/* Calendar grid */}
        <div className="card">
          <div className="card-header">
            <div className="card-title">{monthName}</div>
            <div className="flex gap-2 items-center">
              <span className="flex items-center gap-2">
                <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent-2)' }}/>
                <span className="text-3" style={{ fontSize: 11 }}>Ex-date</span>
              </span>
              <span className="flex items-center gap-2">
                <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)' }}/>
                <span className="text-3" style={{ fontSize: 11 }}>Payment</span>
              </span>
            </div>
          </div>
          <div style={{ padding: 12 }}>
            {loading ? (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
                {Array.from({ length: 35 }).map((_, i) => (
                  <div key={i} style={{ minHeight: 78, borderRadius: 6, background: 'var(--bg-2)' }}/>
                ))}
              </div>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
                {['S','M','T','W','T','F','S'].map((d, i) => (
                  <div key={i} style={{ textAlign: 'center', padding: 6, fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-3)' }}>{d}</div>
                ))}
                {cells.map((c, i) => {
                  if (!c) return <div key={i} style={{ minHeight: 78 }}/>;
                  const isToday = c.date.toDateString() === today.toDateString();
                  return (
                    <div key={i} style={{
                      minHeight: 78, padding: 6,
                      background: isToday ? 'var(--bg-2)' : 'var(--bg-1)',
                      border: isToday ? '1px solid var(--accent)' : '1px solid var(--border)',
                      borderRadius: 6, position: 'relative',
                    }}>
                      <div className="mono" style={{ fontSize: 11, color: isToday ? 'var(--accent)' : 'var(--text-3)', fontWeight: isToday ? 700 : 400 }}>{c.d}</div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4 }}>
                        {c.exEvents.slice(0, 2).map((e, j) => (
                          <div key={`e${j}`}
                               onClick={()=>{setSelectedStock(e.sym); setPage('stock');}}
                               style={{ fontSize: 10, padding: '2px 4px', borderRadius: 3,
                                        background: 'var(--accent-2-dim)', color: 'var(--accent-2)',
                                        fontFamily: 'Geist Mono, monospace', fontWeight: 600, cursor: 'pointer' }}>
                            ✕ {e.sym}
                          </div>
                        ))}
                        {c.payEvents.slice(0, 2).map((e, j) => (
                          <div key={`p${j}`}
                               onClick={()=>{setSelectedStock(e.sym); setPage('stock');}}
                               style={{ fontSize: 10, padding: '2px 4px', borderRadius: 3,
                                        background: 'var(--accent-dim)', color: 'var(--accent)',
                                        fontFamily: 'Geist Mono, monospace', fontWeight: 600, cursor: 'pointer' }}>
                            ₵ {e.sym}
                          </div>
                        ))}
                        {(c.exEvents.length + c.payEvents.length) > 4 && (
                          <div style={{ fontSize: 10, color: 'var(--text-3)' }}>+{c.exEvents.length + c.payEvents.length - 4}</div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* Declaration list */}
        <div className="card">
          <div className="card-header">
            <div className="card-title">Declarations list</div>
            <span className="text-3 mono" style={{ fontSize: 11 }}>Sorted by ex-date</span>
          </div>
          <div style={{ maxHeight: 640, overflowY: 'auto' }}>
            {loading ? (
              <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[...Array(6)].map((_, i) => <Skeleton key={i} h={60}/>)}
              </div>
            ) : [...filtered].sort((a, b) => a.exDate - b.exDate).map((d, i) => {
              const stock = bySym[d.sym];
              // Use the stock's trailing annual yield — never annualise a single payment
              const yld = stock && stock.yield > 0 ? stock.yield : null;
              return (
                <div key={i} className="div-row" onClick={() => { setSelectedStock(d.sym); setPage('stock'); }}>
                  <div className="div-date ex">
                    <div className="day">{d.exDate.getDate()}</div>
                    <div className="mon">{d.exDate.toLocaleDateString('en-US', { month: 'short' })}</div>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="flex items-center gap-2">
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{d.sym}</span>
                      {stock && <span className={`tag ${stock.market === 'Junior' ? 'junior' : 'main'}`}>{stock.market}</span>}
                    </div>
                    <div className="text-3" style={{ fontSize: 11.5, marginTop: 2 }}>
                      {stock?.name || d.sym} · {d.type}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>
                      {d.currency === 'USD' ? 'US$' : 'J$'}{d.amount.toFixed(4)}
                    </div>
                    <div className="text-3" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>per share</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    {yld !== null ? (
                      <>
                        <div className="mono" style={{ color: 'var(--accent)', fontSize: 13, fontWeight: 600 }}>{yld.toFixed(2)}%</div>
                        <div className="text-3" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>est yield</div>
                      </>
                    ) : <span className="text-3">—</span>}
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    {d.payDate
                      ? <span className="tag pay">Pay {fmtDate(d.payDate)}</span>
                      : <span className="tag">Pay TBA</span>}
                  </div>
                </div>
              );
            })}
            {!loading && filtered.length === 0 && (
              <div style={{ padding: 30, textAlign: 'center' }} className="text-3">
                No declarations in this month/market.
              </div>
            )}
          </div>
        </div>
      </div>
    </>}
    </div>
  );
};

// ── Dividend Growth View ──────────────────────────────────────────────────────
function DividendGrowthView({ bySym, setPage, setSelectedStock, currency }) {
  const allDivs = JASTOCKS_DATA.dividends;
  const [sortBy, setSortBy] = React.useState('cagr'); // 'cagr' | 'streak' | 'yield' | 'latest'
  const [market, setMarket] = React.useState('all');

  // Build per-stock annual dividend totals from available history
  const growthData = React.useMemo(() => {
    const bySymYear = {};
    allDivs.forEach(d => {
      if (!d || d.amount <= 0 || d.currency === 'USD') return; // skip USD divs for comparability
      const yr = d.exDate.getFullYear();
      if (!bySymYear[d.sym]) bySymYear[d.sym] = {};
      bySymYear[d.sym][yr] = (bySymYear[d.sym][yr] || 0) + d.amount;
    });

    return Object.entries(bySymYear).map(([sym, yearMap]) => {
      const stock = bySym[sym];
      if (!stock) return null;
      if (market !== 'all') {
        if (market === 'main' && stock.market !== 'Main') return null;
        if (market === 'junior' && stock.market !== 'Junior') return null;
      }

      const years = Object.keys(yearMap).map(Number).sort((a, b) => a - b);
      if (years.length < 2) return null; // need at least 2 years to show trend

      const amounts = years.map(y => yearMap[y]);
      const latest = amounts[amounts.length - 1];
      const prev = amounts[amounts.length - 2];
      const yoyPct = prev > 0 ? ((latest - prev) / prev) * 100 : 0;

      // CAGR over available history
      const first = amounts[0];
      const n = years.length - 1;
      const cagr = first > 0 && n > 0 ? (Math.pow(latest / first, 1 / n) - 1) * 100 : 0;

      // Consecutive growth streak (how many years in a row it grew)
      let streak = 0;
      for (let i = amounts.length - 1; i > 0; i--) {
        if (amounts[i] > amounts[i - 1]) streak++;
        else break;
      }

      return { sym, stock, years, amounts, latest, yoyPct, cagr, streak };
    }).filter(Boolean);
  }, [allDivs, bySym, market]);

  const sorted = [...growthData].sort((a, b) => {
    if (sortBy === 'cagr')   return b.cagr - a.cagr;
    if (sortBy === 'streak') return b.streak - a.streak;
    if (sortBy === 'yield')  return (b.stock.yield || 0) - (a.stock.yield || 0);
    if (sortBy === 'latest') return b.latest - a.latest;
    return 0;
  });

  const growers  = growthData.filter(d => d.yoyPct > 0).length;
  const cutters  = growthData.filter(d => d.yoyPct < 0).length;
  const flat     = growthData.filter(d => d.yoyPct === 0).length;

  return (
    <>
      {/* Summary stats */}
      <div className="stat-row mb-4">
        <div className="stat">
          <div className="stat-label">Stocks with history</div>
          <div className="stat-value">{growthData.length}</div>
          <div className="stat-sub text-3">2+ years of data</div>
        </div>
        <div className="stat">
          <div className="stat-label">Dividend growers</div>
          <div className="stat-value up">{growers}</div>
          <div className="stat-sub up">{growthData.length > 0 ? ((growers/growthData.length)*100).toFixed(0) : 0}% of tracked stocks</div>
        </div>
        <div className="stat">
          <div className="stat-label">Dividend cutters</div>
          <div className="stat-value down">{cutters}</div>
          <div className="stat-sub down">{growthData.length > 0 ? ((cutters/growthData.length)*100).toFixed(0) : 0}% of tracked stocks</div>
        </div>
        <div className="stat">
          <div className="stat-label">Unchanged</div>
          <div className="stat-value">{flat}</div>
          <div className="stat-sub text-3">Same as prior year</div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="flex gap-2 items-center">
            <div className="card-title">Dividend Growth by Stock</div>
            <div className="seg">
              <button className={market==='all'?'active':''} onClick={()=>setMarket('all')}>All</button>
              <button className={market==='main'?'active':''} onClick={()=>setMarket('main')}>Main</button>
              <button className={market==='junior'?'active':''} onClick={()=>setMarket('junior')}>Junior</button>
            </div>
          </div>
          <div className="seg">
            <button className={sortBy==='cagr'?'active':''} onClick={()=>setSortBy('cagr')}>CAGR</button>
            <button className={sortBy==='streak'?'active':''} onClick={()=>setSortBy('streak')}>Streak</button>
            <button className={sortBy==='yield'?'active':''} onClick={()=>setSortBy('yield')}>Yield</button>
            <button className={sortBy==='latest'?'active':''} onClick={()=>setSortBy('latest')}>Amount</button>
          </div>
        </div>

        {sorted.length === 0 ? (
          <div style={{ padding: '40px 24px', textAlign: 'center', color: 'var(--text-3)' }}>
            No multi-year dividend history available yet.
          </div>
        ) : (
          <table className="data growth-table">
            <thead>
              <tr>
                <th>Stock</th>
                <th style={{ textAlign: 'right' }}>Latest (J$/yr)</th>
                <th style={{ textAlign: 'right' }}>YoY change</th>
                <th style={{ textAlign: 'right' }}>CAGR</th>
                <th style={{ textAlign: 'right' }}>Streak</th>
                <th style={{ textAlign: 'right' }}>Yield</th>
                <th style={{ minWidth: 160 }}>History</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map(({ sym, stock, years, amounts, latest, yoyPct, cagr, streak }) => {
                const maxAmt = Math.max(...amounts);
                return (
                  <tr key={sym} onClick={() => { setSelectedStock(sym); setPage('stock'); }} style={{ cursor: 'pointer' }}>
                    <td>
                      <div className="sym-cell">
                        <SymBadge sym={sym} size={28}/>
                        <div>
                          <div style={{ fontWeight: 600 }}>{sym}</div>
                          <div className="text-3" style={{ fontSize: 11 }}>{stock.name}</div>
                        </div>
                      </div>
                    </td>
                    <td className="mono" style={{ textAlign: 'right', fontWeight: 600 }}>
                      J${latest.toFixed(4)}
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <span className={`mono ${yoyPct > 0 ? 'up' : yoyPct < 0 ? 'down' : 'text-3'}`} style={{ fontWeight: 600 }}>
                        {yoyPct > 0 ? '+' : ''}{yoyPct.toFixed(1)}%
                      </span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <span className={`mono ${cagr > 0 ? 'up' : cagr < 0 ? 'down' : 'text-3'}`}>
                        {cagr > 0 ? '+' : ''}{cagr.toFixed(1)}%
                      </span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      {streak > 0
                        ? <span className="tag" style={{ background: 'var(--up-dim)', color: 'var(--up)' }}>{streak}yr {streak >= 3 ? '🔥' : '↑'}</span>
                        : <span className="text-3 mono">—</span>}
                    </td>
                    <td className="mono" style={{ textAlign: 'right', color: stock.yield > 0 ? 'var(--accent)' : 'var(--text-3)', fontWeight: 600 }}>
                      {stock.yield > 0 ? `${stock.yield.toFixed(2)}%` : '—'}
                    </td>
                    <td>
                      <DivHistoryBars years={years} amounts={amounts} maxAmt={maxAmt}/>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </>
  );
}

function DivHistoryBars({ years, amounts, maxAmt }) {
  if (!amounts.length) return null;
  const barW = Math.min(28, Math.floor(148 / amounts.length) - 3);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 36, padding: '4px 0' }}>
      {amounts.map((amt, i) => {
        const pct = maxAmt > 0 ? (amt / maxAmt) * 100 : 0;
        const isLatest = i === amounts.length - 1;
        const growing = i > 0 && amt > amounts[i - 1];
        const falling = i > 0 && amt < amounts[i - 1];
        const color = isLatest
          ? 'var(--accent)'
          : growing ? 'var(--up)' : falling ? 'var(--down)' : 'var(--border-strong)';
        return (
          <div key={i} title={`${years[i]}: J$${amt.toFixed(4)}`}
               style={{
                 width: barW, height: `${Math.max(pct, 8)}%`,
                 background: color, borderRadius: '2px 2px 0 0',
                 transition: 'height 0.3s', cursor: 'help',
                 opacity: isLatest ? 1 : 0.75,
               }}/>
        );
      })}
    </div>
  );
}