// DOMAIN 02 — Home. As-is reuses the code-faithful widget registry (proto-widgets.jsx,
// built card-by-card from the shipped dashboard). To-be adds the two deferred polish
// items from the audit: smart-default preset chooser + per-widget focus-tap detail sheet.
const H2 = () => window.KOI.light;
const H2GRAD = 'linear-gradient(135deg,#DFBBA1 0%,#C9987E 52%,#B0855F 100%)';

// Faithful home layout using the real WIDGETS registry + Balanced preset order.
const HomeAsis = () => {
  const c = H2();
  // Balanced: add(M) netWorth(L) [cash(S) health(S)] budget(M) goals(M) mascot(M) reports(M)
  return (
    <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: window.KOI.sans }}>
      <StatusBar color={c.tp} />
      {/* real header: space chip · preset chip · eye · bell · gear */}
      <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 16px', background: c.surface, gap: 12 }}>
        <div style={{ padding: '5px 8px', background: 'rgba(230,227,223,0.5)', borderRadius: 6, display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: c.ts }}>Personal <Icon name="chevD" size={13} color={c.ts} /></div>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', background: c.n100, borderRadius: 99, fontSize: 12, color: c.n700, fontWeight: 600 }}><Icon name="grid" size={13} color={c.koiGoldDark} /> Balanced <Icon name="edit" size={12} color={c.ts} /></div>
        </div>
        <Icon name="eye" size={21} color={c.n700} /><div style={{ position: 'relative' }}><Icon name="bell" size={21} color={c.n700} /><div style={{ position: 'absolute', top: 0, right: 0, width: 7, height: 7, borderRadius: 99, background: c.danger }} /></div><Icon name="sliders" size={21} color={c.n700} />
      </div>
      <div style={{ position: 'absolute', top: 106, bottom: 80, left: 0, right: 0, overflowY: 'auto', padding: '12px 16px 20px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, padding: '2px 2px 4px' }}><div style={{ fontFamily: window.KOI.serif, fontStyle: 'italic', fontSize: 24, fontWeight: 500, color: c.n900 }}>Good morning, Yuriy</div><div style={{ fontSize: 12, color: c.n400, fontWeight: 500 }}>· Tue, Apr 23</div></div>
          {window.WIDGETS.add_expense.render('M')}
          {window.WIDGETS.net_worth.render('L')}
          <div style={{ display: 'flex', gap: 12, alignItems: 'stretch' }}><div style={{ flex: 1, display: 'flex' }}>{window.WIDGETS.cash_flow.render('S')}</div><div style={{ flex: 1, display: 'flex' }}>{window.WIDGETS.financial_health.render('S')}</div></div>
          {window.WIDGETS.budget.render('M')}
          {window.WIDGETS.goals.render('M')}
          {window.WIDGETS.mascot.render('M')}
          {window.WIDGETS.reports.render('M')}
        </div>
      </div>
      <DashTabsMini active={0} />
    </div>
  );
};

const DashTabsMini = ({ active = 0 }) => {
  const c = H2();
  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: H2GRAD }} />
        {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: smart-default chooser overlay (first run) + focus-tap net-worth detail sheet
const HomeTobe = () => {
  const c = H2();
  return (
    <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: window.KOI.sans }}>
      <HomeAsis />
      {/* dim + focus-tap detail sheet rising from the Net worth tile */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,14,13,0.4)' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: c.surfaceElevated, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '10px 20px 28px', boxShadow: '0 -12px 40px rgba(0,0,0,0.25)' }}>
        <div style={{ width: 40, height: 5, borderRadius: 99, background: c.n200, margin: '0 auto 16px' }} />
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: c.ts }}>NET WORTH · DETAIL</div>
        <div style={{ fontFamily: window.KOI.serif, fontSize: 46, fontWeight: 300, color: c.n900, marginTop: 4, lineHeight: 1 }}><span style={{ fontSize: 24, color: c.ts }}>₴</span>142,800</div>
        <div style={{ marginTop: 10 }}><Sparkline color={c.success} h={60} fill /></div>
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          {[['Assets', '₴168,400', c.success], ['Liabilities', '₴25,600', c.danger]].map(([l, v, col]) => (
            <div key={l} style={{ flex: 1, padding: 12, background: c.n50, border: `1px solid ${c.border}`, borderRadius: 12 }}><div style={{ fontSize: 11, color: c.ts }}>{l}</div><div style={{ fontFamily: window.KOI.serif, fontSize: 20, color: col, marginTop: 2 }}>{v}</div></div>
          ))}
        </div>
        <div style={{ marginTop: 14, padding: '14px 0', borderRadius: 99, background: c.n900, color: '#fff', textAlign: 'center', fontSize: 15, fontWeight: 600 }}>Open full report</div>
        <div style={{ marginTop: 10, textAlign: 'center', fontSize: 12, color: c.n400 }}>Tap any widget on Home to open its detail — a deferred item from the audit.</div>
      </div>
    </div>
  );
};

// Reuse the Sparkline from mockup-kit if present, else a light fallback
const Sparkline = window.Sparkline || (({ color, h = 44, fill }) => (
  <svg width="100%" height={h} viewBox={`0 0 300 ${h}`} preserveAspectRatio="none"><path d={`M0 ${h - 6} C60 ${h - 10} 120 ${h - 20} 300 ${h - 34}`} fill="none" stroke={color} strokeWidth="2" /></svg>
));

Object.assign(window, { HomeAsis, HomeTobe });