// DOMAIN 03 — Expenses hub. Faithful to expenses_page.dart on main:
// CustomScrollView slivers → MonthSelector, SummaryStrip (Spent/Income/Net pills),
// DonutChart card (130px donut + legend + "N more"), Budgets rail (160px chips,
// horizontal), Bills rail, UncategorizedReviewBanner, Today's transactions, KoiFiFAB.
// Now customizable via expenses_edit_page (summary/donut/budgets/bills/today).
const E3 = () => window.KOI.light;
const E3S = "'Cormorant Garamond', serif", E3N = "'Inter', system-ui, sans-serif";
const E3GRAD = 'linear-gradient(135deg,#D8B098,#C9987E,#B08A6E)';

const ExMonthSel = () => {
  const c = E3();
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, padding: '12px 16px' }}>
      <div style={{ width: 28, height: 28, borderRadius: 99, background: c.n100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="chevL" size={18} color={c.ts} /></div>
      <div style={{ fontFamily: E3N, fontSize: 15, fontWeight: 500, color: c.tp }}>April 2026</div>
      <div style={{ width: 28, height: 28, borderRadius: 99, background: c.n100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="chevR" size={18} color={c.ts} /></div>
    </div>
  );
};
const ExPills = () => {
  const c = E3();
  return (
    <div style={{ display: 'flex', gap: 8, padding: '0 16px' }}>
      {[['SPENT', '₴32.1k', c.tp], ['INCOME', '₴54k', c.tp], ['NET', '+₴21.9k', c.tp]].map(([l, v, col]) => (
        <div key={l} style={{ flex: 1, padding: '12px', border: `1px solid ${c.border}`, borderRadius: 14, background: c.surfaceElevated, textAlign: 'center' }}>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.5px', color: c.ts }}>{l}</div>
          <div style={{ fontFamily: E3S, fontSize: 22, fontWeight: 500, color: col, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
        </div>
      ))}
    </div>
  );
};
const donutPaths = (segs) => {
  let a = 0; const els = [];
  segs.forEach((s, i) => {
    const st = a, en = a + s.v * Math.PI * 2, r = 65, ir = 40;
    const x1 = 65 + Math.cos(st - Math.PI / 2) * r, y1 = 65 + Math.sin(st - Math.PI / 2) * r;
    const x2 = 65 + Math.cos(en - Math.PI / 2) * r, y2 = 65 + Math.sin(en - Math.PI / 2) * r;
    const x3 = 65 + Math.cos(en - Math.PI / 2) * ir, y3 = 65 + Math.sin(en - Math.PI / 2) * ir;
    const x4 = 65 + Math.cos(st - Math.PI / 2) * ir, y4 = 65 + Math.sin(st - Math.PI / 2) * ir;
    const lg = s.v > 0.5 ? 1 : 0;
    els.push(<path key={i} d={`M ${x1} ${y1} A ${r} ${r} 0 ${lg} 1 ${x2} ${y2} L ${x3} ${y3} A ${ir} ${ir} 0 ${lg} 0 ${x4} ${y4} Z`} fill={s.c} />);
    a = en;
  });
  return els;
};
const ExDonut = () => {
  const c = E3();
  const segs = [{ v: 0.35, c: '#D8B098' }, { v: 0.22, c: '#B08A6E' }, { v: 0.18, c: '#908D85' }, { v: 0.14, c: '#6B9E8A' }, { v: 0.11, c: '#CCC9C4' }];
  const leg = [['Groceries', '₴11,200', '#D8B098'], ['Rent', '₴7,000', '#B08A6E'], ['Transport', '₴5,700', '#908D85'], ['Utilities', '₴4,500', '#6B9E8A']];
  return (
    <div style={{ margin: '16px 16px 0', padding: 16, background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14, display: 'flex', gap: 16 }}>
      <div style={{ width: 130, height: 130, position: 'relative', flexShrink: 0 }}>
        <svg width="130" height="130">{donutPaths(segs)}</svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: E3S, fontSize: 17, color: c.tp }}>₴32.1k</div>
      </div>
      <div style={{ flex: 1, alignSelf: 'center' }}>
        {leg.map(([n, v, col]) => (
          <div key={n} style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
            <div style={{ width: 8, height: 8, borderRadius: 99, background: col, marginRight: 8 }} />
            <div style={{ flex: 1, fontFamily: E3N, fontSize: 13, color: c.tp }}>{n}</div>
            <div style={{ fontFamily: E3N, fontSize: 13, color: c.ts, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
          </div>
        ))}
        <div style={{ fontFamily: E3N, fontSize: 12, color: c.koiGold, marginTop: 2 }}>1 more</div>
      </div>
    </div>
  );
};
const ExRail = ({ label, seeAll, children }) => {
  const c = E3();
  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '0 16px 8px' }}>
        <div style={{ fontFamily: E3N, fontSize: 13, fontWeight: 500, letterSpacing: '0.52px', color: c.n500 }}>{label}</div>
        <div style={{ flex: 1 }} />
        {seeAll && <div style={{ fontFamily: E3N, fontSize: 13, fontWeight: 500, color: c.koiGold }}>See All →</div>}
      </div>
      <div style={{ display: 'flex', gap: 8, padding: '0 16px', overflowX: 'auto' }}>{children}</div>
    </div>
  );
};
const ExBudgetChip = (n, s, l, r, col) => {
  const c = E3();
  return (
    <div key={n} style={{ minWidth: 160, width: 160, padding: 12, border: `1px solid ${r >= 1 ? c.danger : c.border}`, borderRadius: 14, background: c.surfaceElevated }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><CatIcon icon="cart" color={c.n100} size={28} /><div style={{ fontSize: 13, fontWeight: 500, color: c.tp }}>{n}</div></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}><div style={{ fontSize: 11, color: c.ts, fontVariantNumeric: 'tabular-nums' }}>{s} / {l}</div><div style={{ fontSize: 10, fontWeight: 600, color: col, background: col + '1f', padding: '2px 6px', borderRadius: 99 }}>{Math.round(r * 100)}%</div></div>
      <div style={{ height: 4, background: c.n100, borderRadius: 99, marginTop: 8, overflow: 'hidden' }}><div style={{ width: `${Math.min(r, 1) * 100}%`, height: '100%', background: col }} /></div>
      <div style={{ fontSize: 10, color: r >= 1 ? c.danger : c.ts, marginTop: 6 }}>{r >= 1 ? 'Exceeded by ₴1.2k' : `Left: ₴${(l.replace('₴','').replace('k','')-s.replace('₴','').replace('k','')).toFixed(1)}k`}</div>
    </div>
  );
};
const ExpensesAsis = () => {
  const c = E3();
  return (
    <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: E3N }}>
      <StatusBar color={c.tp} />
      {/* header w/ Expenses|Accounts segmented (inline, per current main) */}
      <div style={{ padding: '4px 16px 8px', background: c.surface }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ fontFamily: E3S, fontSize: 26, fontWeight: 400, color: c.tp, flex: 1 }}>Expenses</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: c.n100, borderRadius: 99, marginRight: 12 }}><Icon name="grid" size={14} color={c.koiGoldDark} /><Icon name="edit" size={12} color={c.ts} /></div>
          <Icon name="search" size={20} color={c.ts} /><div style={{ width: 14 }} /><Icon name="sliders" size={20} color={c.ts} />
        </div>
        <div style={{ display: 'flex', background: c.n100, borderRadius: 10, padding: 3, marginTop: 12 }}>
          <div style={{ flex: 1, textAlign: 'center', padding: '8px 0', background: '#fff', borderRadius: 8, fontSize: 13, fontWeight: 600, color: c.tp, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>Expenses</div>
          <div style={{ flex: 1, textAlign: 'center', padding: '8px 0', fontSize: 13, fontWeight: 500, color: c.ts }}>Accounts</div>
        </div>
      </div>
      <div style={{ position: 'absolute', top: 140, bottom: 80, left: 0, right: 0, overflowY: 'auto', paddingBottom: 16 }}>
        <ExMonthSel /><ExPills /><ExDonut />
        <ExRail label="BUDGETS · ₴18.5k / ₴25.0k" seeAll>
          {ExBudgetChip('Dining', '₴2.1k', '₴3.0k', 0.7, c.success)}
          {ExBudgetChip('Transport', '₴5.7k', '₴6.0k', 0.95, c.warning)}
          {ExBudgetChip('Groceries', '₴11.2k', '₴10.0k', 1.12, c.danger)}
        </ExRail>
        <ExRail label="BILLS · 3 DUE" seeAll>
          {[['Rent', 'Apr 25', '₴18,000'], ['Netflix', 'Apr 28', '₴299'], ['Internet', 'May 1', '₴450']].map(([n, d, a]) => (
            <div key={n} style={{ minWidth: 140, padding: 12, background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14 }}><div style={{ fontSize: 12, color: c.ts }}>{d}</div><div style={{ fontSize: 13, fontWeight: 600, color: c.tp, marginTop: 4 }}>{n}</div><div style={{ fontSize: 13, color: c.tp, marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>{a}</div></div>
          ))}
        </ExRail>
        {/* uncategorized review banner */}
        <div style={{ margin: '16px 16px 0', padding: 12, background: '#FEF5E8', border: '1px solid #F5DFB6', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 10 }}><Icon name="info" size={18} color={c.warning} /><div style={{ flex: 1, fontSize: 13, color: c.tp }}>7 transactions need a category</div><Icon name="chevR" size={16} color={c.ts} /></div>
        {/* today's transactions */}
        <div style={{ padding: '16px 16px 8px', fontSize: 13, fontWeight: 500, letterSpacing: '0.52px', color: c.n500 }}>TODAY</div>
        {[['Silpo', 'Groceries', 'cart', '−₴842'], ['Uber', 'Transport', 'car', '−₴185'], ['Monobank', 'Salary', 'arrowD', '+₴54,000']].map(([n, cat, ic, a], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 16px', gap: 12, borderBottom: `1px solid ${c.border}` }}><CatIcon icon={ic} color={c.n100} size={40} /><div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 500, color: c.tp }}>{n}</div><div style={{ fontSize: 12, color: c.ts }}>{cat}</div></div><div style={{ fontSize: 14, fontWeight: 500, color: a[0] === '+' ? c.success : c.tp, fontVariantNumeric: 'tabular-nums' }}>{a}</div></div>
        ))}
      </div>
      <div style={{ position: 'absolute', right: 20, bottom: 96, width: 56, height: 56, borderRadius: 99, background: E3GRAD, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 16px rgba(201,152,126,0.45)' }}><Icon name="plus" size={24} color="#fff" strokeWidth={2.2} /></div>
      <ExTabs active={1} />
    </div>
  );
};
const ExTabs = ({ active = 1 }) => {
  const c = E3();
  const tabs = [['Home', 'home'], ['Expenses', 'wallet'], ['Investments', 'trendingUp'], ['Goals', 'target'], ['Mascot', 'sparkle']];
  return (
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: '#fff', borderTop: `1px solid ${c.border}`, paddingBottom: 24 }}>
      <div style={{ display: 'flex', position: 'relative', height: 56 }}>
        <div style={{ position: 'absolute', top: 5, left: `calc(${active * 20}% + ${(20 - 7.12) / 2}%)`, width: '7.12%', height: 4, borderRadius: 99, background: E3GRAD }} />
        {tabs.map(([l, ic], i) => <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, paddingTop: 9, color: i === active ? c.koiGold : '#A8A49E' }}><Icon name={ic} size={22} strokeWidth={i === active ? 1.9 : 1.6} /><div style={{ fontSize: 10, fontWeight: 500 }}>{l}</div></div>)}
      </div>
    </div>
  );
};

// TO-BE: one hero figure, merged "needs attention" strip, woven uncategorized prompt
const ExpensesTobe = () => {
  const c = E3();
  return (
    <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: E3N }}>
      <StatusBar color={c.tp} />
      <div style={{ position: 'absolute', top: 44, bottom: 0, left: 0, right: 0, overflowY: 'auto', padding: '2px 22px 100px' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}><div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', color: c.ts, flex: 1 }}>EXPENSES · APRIL</div><Icon name="search" size={19} color={c.n700} /><div style={{ width: 14 }} /><Icon name="sliders" size={19} color={c.n700} /></div>
        {/* ONE hero */}
        <div style={{ fontFamily: E3S, fontSize: 60, fontWeight: 300, lineHeight: 1, color: c.n900, letterSpacing: '-0.02em', marginTop: 12 }}><span style={{ fontSize: 30, color: c.ts }}>₴</span>32,140</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, fontSize: 13 }}><span style={{ color: c.success, fontWeight: 600 }}>▼ 12% vs March</span><span style={{ color: c.n300 }}>·</span><span style={{ color: c.ts }}>day 23 of 30</span></div>
        {/* category drill chips (replaces donut+pills) */}
        <div style={{ display: 'flex', gap: 8, marginTop: 18, overflowX: 'auto' }}>
          {[['Groceries', '11.2k', '#C9987E'], ['Rent', '7.0k', '#B57A5C'], ['Transport', '5.7k', '#908D85'], ['Other', '8.2k', '#B8B3AC']].map(([k, v, col]) => (
            <div key={k} style={{ minWidth: 110, padding: '12px 14px', background: '#fff', borderRadius: 14, border: `1px solid ${c.border}` }}><div style={{ width: 18, height: 2, background: col, borderRadius: 99, marginBottom: 10 }} /><div style={{ fontSize: 12, color: c.ts }}>{k}</div><div style={{ fontFamily: E3S, fontSize: 22, color: c.n900, marginTop: 2 }}>{v}</div></div>
          ))}
        </div>
        {/* merged needs-attention strip */}
        <div style={{ marginTop: 20, background: '#fff', border: `1px solid ${c.border}`, borderRadius: 14, overflow: 'hidden' }}>
          <div style={{ padding: '14px 16px', borderBottom: `1px solid ${c.border}`, display: 'flex', alignItems: 'center', gap: 12 }}><div style={{ flex: 1 }}><div style={{ fontSize: 12, fontWeight: 500, color: c.n700 }}>Budgets · 2 of 4 on track</div><div style={{ display: 'flex', gap: 2, height: 6, marginTop: 8 }}><div style={{ flex: 0.35, background: c.success, borderRadius: 2 }} /><div style={{ flex: 0.3, background: c.success, borderRadius: 2 }} /><div style={{ flex: 0.2, background: c.warning, borderRadius: 2 }} /><div style={{ flex: 0.15, background: c.danger, borderRadius: 2 }} /></div></div><Icon name="chevR" size={16} color={c.ts} /></div>
          <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}><div style={{ flex: 1 }}><div style={{ fontSize: 12, fontWeight: 500, color: c.n700 }}>Next bill · Rent in 2 days</div><div style={{ fontSize: 11, color: c.ts, marginTop: 4 }}>₴18,000 · Monobank</div></div><div style={{ padding: '6px 12px', background: c.n100, borderRadius: 99, fontSize: 12, fontWeight: 500, color: c.n700 }}>Pay</div></div>
        </div>
        {/* today */}
        <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline' }}><div style={{ fontFamily: E3S, fontStyle: 'italic', fontSize: 17, color: c.n700 }}>Today</div><div style={{ flex: 1, height: 1, background: c.border, marginLeft: 14 }} /></div>
        {[['Silpo', 'Groceries', 'cart', '−842'], ['Uber', 'Transport', 'car', '−185']].map(([n, cat, ic, a], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '12px 0', gap: 14 }}><CatIcon icon={ic} color="#F2EDE6" size={40} /><div style={{ flex: 1 }}><div style={{ fontSize: 14.5, fontWeight: 500, color: c.n900 }}>{n}</div><div style={{ fontSize: 12, color: c.ts }}>{cat}</div></div><div style={{ fontSize: 14.5, fontWeight: 500, color: c.n900, fontVariantNumeric: 'tabular-nums' }}>{a}</div></div>
        ))}
        {/* woven uncategorized prompt */}
        <div style={{ marginTop: 10, padding: '14px 16px', border: `1px dashed ${c.koiGold}`, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12, background: 'rgba(201,152,126,0.04)' }}><div style={{ width: 32, height: 32, borderRadius: 99, background: 'rgba(201,152,126,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="sparkle" size={16} color={c.koiGold} /></div><div style={{ flex: 1, fontSize: 13, color: c.n700 }}>7 need a category — Mascot can auto-sort</div><div style={{ fontSize: 13, fontWeight: 600, color: c.koiGold }}>Review</div></div>
      </div>
      <div style={{ position: 'absolute', right: 20, bottom: 24, width: 56, height: 56, borderRadius: 99, background: '#1A1917', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 20px rgba(0,0,0,0.28)' }}><Icon name="plus" size={24} color="#fff" strokeWidth={2.2} /></div>
    </div>
  );
};

Object.assign(window, { ExpensesAsis, ExpensesTobe });