/* Clear Mint — Financial Health · Trends. window.FHTrends */
(function () {
  const I = window.CMIcon;
  const useC = () => React.useContext(window.FHTheme);
  const { FHCard, FHSegmented, FHSelect, FHLine, FHBars, FHSpark, FHHeatmap, FHChip } = window;
  const hexA = window.FHhexA;
  const KIC = { networth: 'Grow', cashflow: 'Transfer', savings: 'Goals', debt: 'Card', invret: 'Investments', score: 'Shield' };

  function KpiTile({ kpi }) {
    const C = useC();
    const up = kpi.up, good = kpi.good != null ? kpi.good : up;
    const col = good ? C.emerald : C.red;
    const spark = window.CMHealth.trendTo(100, 9, 0.12).map((v, i) => v + (up ? i : -i) * 2);
    return React.createElement(FHCard, { pad: 16 },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 } },
        React.createElement(FHChip, { name: KIC[kpi.key] || 'Grow', color: col, size: 30, radius: 9 }),
        React.createElement('span', { style: { fontSize: 12.5, color: C.sub, fontWeight: 700 } }, kpi.label)),
      React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 8 } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 700, color: C.ink, lineHeight: 1 } }, kpi.value, kpi.sub ? React.createElement('span', { style: { fontSize: 13, color: C.mut } }, kpi.sub) : null),
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 5, marginTop: 7 } },
            React.createElement('span', { style: { color: col, fontWeight: 800, fontSize: 12.5, display: 'inline-flex', alignItems: 'center', gap: 2 } }, up ? React.createElement(I.ArrowUp, { size: 12 }) : React.createElement(I.ArrowDown, { size: 12 }), Math.abs(kpi.change) + (kpi.pp ? ' pp' : '%')),
            React.createElement('span', { style: { fontSize: 11.5, color: C.mut } }, kpi.abs))),
        React.createElement('div', { style: { width: 84, height: 36, flexShrink: 0 } }, React.createElement(FHSpark, { data: spark, color: col, h: 36 }))));
  }

  function FHTrends({ data }) {
    const C = useC();
    const t = data.trends;
    const [tf, setTf] = React.useState('6M');
    const [cmp, setCmp] = React.useState('Previous 6 Months');
    const cut = { '1M': 2, '3M': 3, '6M': 6, 'YTD': 5, '1Y': 7, 'All': 7 }[tf] || 6;
    const lastN = (a, n) => a.slice(Math.max(0, a.length - n));
    const x7 = t.x7, x6 = t.x6;

    const insIcon = { good: ['Grow', C.emerald], warn: ['Card', C.amber], tip: ['Investments', C.blue] };

    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
      /* controls */
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' } },
        React.createElement(FHSegmented, { value: tf, onChange: setTf, options: ['1M', '3M', '6M', 'YTD', '1Y', 'All'] }),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, React.createElement('span', { style: { fontSize: 12.5, color: C.sub, fontWeight: 600 } }, 'Compare to:'), React.createElement(FHSelect, { options: ['Previous 6 Months', 'Previous Year', 'Same Period Last Year'], value: cmp, onChange: setCmp }))),
      /* KPIs */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 14 }, className: 'fh-kpi6' }, t.kpis.map(k => React.createElement(KpiTile, { key: k.key, kpi: k }))),
      /* net worth + cash flow */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }, className: 'fh-2col' },
        React.createElement(FHCard, { title: 'Net Worth Over Time', info: true, right: React.createElement(FHSelect, { options: ['6 Months', '1 Year'], value: '6 Months', onChange: () => {} }) },
          React.createElement('div', { style: { fontSize: 12.5, color: C.sub, marginBottom: 10 } }, 'Your net worth has increased ', React.createElement('b', { style: { color: C.emerald } }, '$17,070 (15.6%)'), ' over the last 6 months.'),
          React.createElement(FHLine, { height: 230, money: true, x: x7, series: [{ name: 'Net Worth', data: t.netWorth.series, color: C.emerald, dots: true }] })),
        React.createElement(FHCard, { title: 'Cash Flow Trend', info: true, right: React.createElement(FHSelect, { options: ['6 Months', '1 Year'], value: '6 Months', onChange: () => {} }) },
          React.createElement('div', { style: { fontSize: 12.5, color: C.sub, marginBottom: 10 } }, "You've had positive cash flow in ", React.createElement('b', { style: { color: C.emerald } }, '5 of the last 6 months'), '.'),
          React.createElement(FHBars, { height: 230, money: true, x: x6, stack: true, series: [{ name: 'Income', data: t.cashFlow.income, color: C.emerald }, { name: 'Expenses', data: t.cashFlow.expenses.map(v => -v), color: C.red }], line: { name: 'Net Cash Flow', data: t.cashFlow.net, color: C.gold } }))),
      /* spending + debt + investment */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }, className: 'fh-3col' },
        React.createElement(FHCard, { title: 'Spending by Category', info: true },
          React.createElement(FHLine, { height: 200, money: true, x: x7, area: true, series: t.spendingByCat.map(s => ({ name: s.label, data: s.series, color: s.color, fill: true })) })),
        React.createElement(FHCard, { title: 'Debt Balance Trend', info: true },
          React.createElement('div', { style: { fontSize: 12, color: C.sub, marginBottom: 8 } }, 'Total debt down ', React.createElement('b', { style: { color: C.emerald } }, '$8,420 (11.3%)'), ' over 6 months.'),
          React.createElement(FHLine, { height: 180, money: true, x: x7, series: [{ name: 'Debt', data: t.debt.series, color: C.red, dots: true }] })),
        React.createElement(FHCard, { title: 'Investment Growth', info: true },
          React.createElement('div', { style: { fontSize: 12, color: C.sub, marginBottom: 8 } }, 'Investments up ', React.createElement('b', { style: { color: C.emerald } }, '$9,530 (8.7%)'), ' over 6 months.'),
          React.createElement(FHLine, { height: 180, money: true, x: x7, series: [{ name: 'Portfolio', data: t.investment.series, color: C.emerald, dots: true }] }))),
      /* insights + score table */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 16 }, className: 'fh-2col' },
        React.createElement(FHCard, { title: 'Insights', info: true },
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
            t.insights.map((ins, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < t.insights.length - 1 ? '1px solid ' + C.line : 'none' } },
              React.createElement(FHChip, { name: insIcon[ins.type][0], color: insIcon[ins.type][1], size: 34, radius: 10 }),
              React.createElement('div', null, React.createElement('div', { style: { fontWeight: 800, fontSize: 13, color: C.ink } }, ins.title), React.createElement('div', { style: { fontSize: 12.5, color: C.sub, marginTop: 2, lineHeight: 1.5 } }, ins.text))))),
          React.createElement('div', { style: { display: 'flex', justifyContent: 'center', marginTop: 10 } }, React.createElement('button', { onClick: () => { location.hash = '#/ai'; }, style: { background: 'none', border: 0, color: C.emerald, fontWeight: 800, fontSize: 12.5, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 5 } }, 'View all insights', React.createElement(I.ChevR, { size: 14 })))),
        React.createElement(FHCard, { title: 'Financial Health Score Over Time', info: true },
          React.createElement('div', { style: { fontSize: 12.5, color: C.sub, marginBottom: 14 } }, 'See how your overall financial health score has changed.'),
          React.createElement('div', { style: { overflowX: 'auto' } },
            React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', minWidth: 460 } },
              React.createElement('tbody', null,
                React.createElement('tr', null, React.createElement('td', { style: { fontSize: 12, color: C.sub, fontWeight: 700, padding: '6px 8px' } }, 'Month'), t.scoreTable.map((r, i) => React.createElement('td', { key: i, style: { fontSize: 11.5, color: C.sub, fontWeight: 700, padding: '6px 8px', textAlign: 'center' } }, r.mo))),
                React.createElement('tr', null, React.createElement('td', { style: { fontSize: 12, color: C.sub, fontWeight: 700, padding: '10px 8px' } }, 'Score'), t.scoreTable.map((r, i) => React.createElement('td', { key: i, style: { padding: '8px', textAlign: 'center' } }, React.createElement('span', { className: 'num', style: { display: 'inline-block', minWidth: 34, padding: '6px 0', borderRadius: 8, background: hexA(C.emerald, 0.1 + (r.score - 70) / 100), color: C.ink, fontWeight: 800, fontSize: 14 } }, r.score)))),
                React.createElement('tr', null, React.createElement('td', { style: { fontSize: 12, color: C.sub, fontWeight: 700, padding: '8px' } }, 'Change'), t.scoreTable.map((r, i) => React.createElement('td', { key: i, style: { fontSize: 11.5, color: r.change === '\u2014' ? C.mut : C.emerald, fontWeight: 700, padding: '8px', textAlign: 'center' } }, r.change))),
                React.createElement('tr', null, React.createElement('td', { style: { fontSize: 12, color: C.sub, fontWeight: 700, padding: '8px' } }, 'Rating'), t.scoreTable.map((r, i) => React.createElement('td', { key: i, style: { fontSize: 11, color: C.ink, fontWeight: 600, padding: '8px', textAlign: 'center' } }, r.rating))))))) ),
      /* heatmap */
      React.createElement(FHCard, { title: 'Spending Heatmap', info: true, right: React.createElement('span', { style: { fontSize: 11.5, color: C.sub } }, 'Daily spend, last 26 weeks') },
        React.createElement('div', { style: { padding: '6px 2px' } }, React.createElement(FHHeatmap, { weeks: t.heatmap, color: C.emerald })),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, marginTop: 10, fontSize: 11, color: C.sub } }, 'Less', [0.1, 0.3, 0.55, 0.8, 1].map((v, i) => React.createElement('span', { key: i, style: { width: 12, height: 12, borderRadius: 3, background: hexA(C.emerald, 0.15 + v * 0.85) } })), 'More')));
  }
  window.FHTrends = FHTrends;
})();