/* Clear Mint — Financial Health · Overview (themed). window.FHOverview */
(function () {
  const I = window.CMIcon;
  const useC = () => React.useContext(window.FHTheme);
  const { FHCard, FHChip, FHPill, FHBar, FHGauge, FHLine, FHRadar, FHSpark, FHSelect, FHIcon } = window;
  const hexA = window.FHhexA;
  const go = t => { if (window.__fhGoTab) window.__fhGoTab(t); };

  function MiniStat({ label, value, change, up, good, data, color }) {
    const C = useC();
    const col = (good != null ? good : up) ? C.emerald : C.red;
    return React.createElement(FHCard, { pad: 16 },
      React.createElement('div', { style: { fontSize: 12.5, color: C.sub, fontWeight: 700, marginBottom: 6 } }, label),
      React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8 } },
        React.createElement('span', { className: 'num', style: { fontFamily: 'var(--font-serif)', fontSize: 21, fontWeight: 700, color: C.ink } }, value),
        React.createElement('span', { style: { fontSize: 12, fontWeight: 800, color: col, display: 'inline-flex', alignItems: 'center', gap: 2 } }, up ? React.createElement(I.ArrowUp, { size: 11 }) : React.createElement(I.ArrowDown, { size: 11 }), change)),
      React.createElement('div', { style: { height: 44, marginTop: 8 } }, React.createElement(FHSpark, { data: data, color: color || col, h: 44 })));
  }

  function FHOverview({ data, compare }) {
    const C = useC();
    const s = data.score, f = data.factors;
    const main = f.slice(0, 6);
    const radarAxes = main.map(x => ({ label: x.label }));
    const benchRows = data.benchmarks.cards.filter(b => b.key !== 'score');
    const trendRows = [
      { l: 'Cash Flow', v: '$' + Math.round(data.base.netCashFlow).toLocaleString(), c: 12, up: true, series: data.trends.cashFlow.net },
      { l: 'Savings Rate', v: Math.round(data.base.savingsRate) + '%', c: 5, up: true, series: data.trends.savings.series },
      { l: 'Debt Ratio', v: Math.round(data.base.debtRatio) + '%', c: 8, up: false, good: true, series: data.trends.debt.series },
      { l: 'Net Worth', v: '$' + Math.round(data.base.netWorth / 1000) + 'K', c: 15, up: true, series: data.trends.netWorth.series },
      { l: 'Investment Return', v: data.base.investReturnPct + '%', c: 1.3, up: true, series: data.trends.investment.series }
    ];
    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
      /* hero row */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 16 }, className: 'fh-3col' },
        React.createElement(FHCard, { title: 'Your Financial Health Score', info: true },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' } },
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 } },
              React.createElement(FHGauge, { value: s.value, size: 184, label: '/100' }),
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9 } },
                React.createElement('span', { style: { fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 700, color: C.emerald } }, s.grade),
                React.createElement('span', { style: { fontSize: 15, fontWeight: 700, color: C.ink } }, s.band))),
            React.createElement('div', { style: { flex: 1, minWidth: 180 } },
              React.createElement('div', { style: { fontFamily: 'var(--font-serif)', fontSize: 19, fontWeight: 700, color: C.ink } }, "Excellent! You're in great shape."),
              React.createElement('div', { style: { fontSize: 13, color: C.sub, margin: '8px 0 12px', lineHeight: 1.55 } }, "Your financial health is excellent. You're making smart choices and on track for financial freedom."),
              React.createElement(FHPill, { color: C.emerald }, React.createElement(I.ArrowUp, { size: 12 }), s.deltaMonth + ' points from last month')), React.createElement('img', { src: 'assets/illustrations/mountain-peak.png', alt: '', className: 'fh-hero-mtn', style: { width: 176, height: 'auto', flexShrink: 0, alignSelf: 'center' } }))),
        React.createElement(FHCard, { title: 'Score History', info: true, right: React.createElement(FHSelect, { options: ['6 Months', '1 Year'], value: '1 Year', onChange: () => {} }) },
          React.createElement(FHLine, { height: 200, x: s.historyX, series: [{ name: 'Score', data: s.history, color: C.emerald, dots: true }], yFmt: v => v })),
        React.createElement(FHCard, { title: 'Score Factors', info: true },
          React.createElement(FHRadar, { height: 240, axes: radarAxes, datasets: [{ name: 'You', values: main.map(x => x.score), color: C.emerald }] }))),
      /* four cards */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }, className: 'fh-4col' },
        React.createElement(FHCard, { title: 'Score Breakdown', info: true },
          main.map((x, i) => React.createElement('div', { key: i, style: { display: 'grid', gridTemplateColumns: '24px 1fr 40px', gap: 9, alignItems: 'center', padding: '6px 0' } },
            React.createElement('span', { style: { color: x.color, display: 'flex' } }, React.createElement(FHIcon, { name: x.icon, size: 17 })),
            React.createElement(FHBar, { pct: x.score, color: x.score >= 80 ? C.emerald : x.score >= 65 ? C.amber : C.red, height: 6 }),
            React.createElement('span', { className: 'num', style: { fontSize: 12, fontWeight: 800, color: C.ink, textAlign: 'right' } }, x.score))),
          React.createElement('button', { onClick: () => go('Score Breakdown'), style: linkBtn(C) }, 'View full breakdown', React.createElement(I.ChevR, { size: 13 }))),
        React.createElement(FHCard, { title: 'Top Recommendations', info: true, right: React.createElement('span', { onClick: () => go('Recommendations'), style: { fontSize: 12, color: C.emerald, fontWeight: 700, cursor: 'pointer' } }, 'View all') },
          data.recommendations.slice(0, 3).map((r, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 10, padding: '9px 0', borderBottom: i < 2 ? '1px solid ' + C.line : 'none' } },
            React.createElement(FHChip, { name: r.icon, color: r.color, size: 32, radius: 9 }),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement('div', { style: { fontWeight: 700, fontSize: 12.5, color: C.ink } }, r.title),
              React.createElement('div', { style: { fontSize: 11, color: C.sub, marginTop: 2, lineHeight: 1.4 } }, r.desc.slice(0, 54) + '\u2026')),
            React.createElement(FHPill, { color: r.impact === 'High' ? C.red : r.impact === 'Medium' ? C.amber : C.emerald, style: { alignSelf: 'flex-start' } }, r.impact)))),
        React.createElement(FHCard, { title: 'Trends', info: true, right: React.createElement('span', { onClick: () => go('Trends'), style: { fontSize: 12, color: C.emerald, fontWeight: 700, cursor: 'pointer' } }, 'View all') },
          trendRows.map((t, i) => { const col = (t.good != null ? t.good : t.up) ? C.emerald : C.red; return React.createElement('div', { key: i, style: { display: 'grid', gridTemplateColumns: '1fr 56px 50px', gap: 8, alignItems: 'center', padding: '7px 0' } },
            React.createElement('div', { style: { minWidth: 0 } }, React.createElement('div', { style: { fontSize: 12, color: C.ink, fontWeight: 600 } }, t.l), React.createElement('span', { style: { fontSize: 11.5, fontWeight: 800, color: col } }, (t.up ? '\u2191' : '\u2193') + ' ' + t.c + '%')),
            React.createElement('div', { style: { height: 24 } }, React.createElement(FHSpark, { data: t.series, color: col, h: 24, fill: false })),
            React.createElement('span', { className: 'num', style: { fontSize: 12, fontWeight: 700, color: C.ink, textAlign: 'right' } }, t.v)); })),
        React.createElement(FHCard, { title: 'Benchmarks', info: true, right: React.createElement('span', { onClick: () => go('Benchmarks'), style: { fontSize: 12, color: C.emerald, fontWeight: 700, cursor: 'pointer' } }, 'View all') },
          benchRows.map((b, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '8px 0', borderBottom: i < benchRows.length - 1 ? '1px solid ' + C.line : 'none' } },
            React.createElement('span', { style: { fontSize: 12, color: C.ink, fontWeight: 600 } }, b.label),
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
              React.createElement('span', { className: 'num', style: { fontSize: 12.5, fontWeight: 800, color: C.ink } }, b.youFmt),
              React.createElement(FHPill, { color: C.emerald }, b.top))))) ),
      /* mini stat charts */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14 }, className: 'fh-kpi6' },
        React.createElement(MiniStat, { label: 'Cash Flow', value: '$' + Math.round(data.base.netCashFlow).toLocaleString(), change: '12%', up: true, data: data.trends.cashFlow.net }),
        React.createElement(MiniStat, { label: 'Savings Rate', value: Math.round(data.base.savingsRate) + '%', change: '5%', up: true, data: data.trends.savings.series }),
        React.createElement(MiniStat, { label: 'Net Worth', value: '$' + Math.round(data.base.netWorth / 1000) + 'K', change: '15%', up: true, data: data.trends.netWorth.series }),
        React.createElement(MiniStat, { label: 'Debt Utilization', value: Math.round(data.base.utilization) + '%', change: '8%', up: false, good: true, data: data.trends.debt.series }),
        React.createElement(MiniStat, { label: 'Investment Return', value: data.base.investReturnPct + '%', change: '1.3%', up: true, data: data.trends.investment.series })));
  }
  function linkBtn(C) { return { width: '100%', marginTop: 12, background: 'transparent', border: '1px solid ' + C.line, borderRadius: 10, padding: '9px', color: C.emerald, fontWeight: 800, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }; }
  window.FHOverview = FHOverview;
})();