/* Clear Mint — Financial Health · Score Breakdown page. window.FHScore */
(function () {
  const I = window.CMIcon;
  const useC = () => React.useContext(window.FHTheme);
  const { FHCard, FHChip, FHPill, FHBar, FHSegmented, FHSelect, FHLine, FHDonut, FHIcon } = window;
  const hexA = window.FHhexA;

  function FactorRow({ f, active, onClick }) {
    const C = useC();
    const col = f.status === 'Excellent' ? C.emerald : f.status === 'Very Good' ? C.teal : f.status === 'Good' ? C.amber : C.red;
    return React.createElement('button', { onClick,
      style: { display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
        background: active ? hexA(f.color, C.name === 'dark' ? 0.12 : 0.08) : 'transparent', border: '1px solid ' + (active ? hexA(f.color, 0.4) : C.line),
        borderRadius: 14, padding: '13px 14px', transition: '.15s' } },
      React.createElement(FHChip, { name: f.icon, color: f.color, size: 40, radius: 11 }),
      React.createElement('div', { style: { flex: 1, minWidth: 0 } },
        React.createElement('div', { style: { fontWeight: 700, fontSize: 13.5, color: C.ink } }, f.label),
        React.createElement('div', { style: { fontSize: 12, color: col, fontWeight: 700, marginTop: 1 } }, f.status)),
      React.createElement('div', { style: { width: 64, height: 30, flexShrink: 0 } }, React.createElement(window.FHSpark, { data: f.trend, color: col, h: 30, fill: false })),
      React.createElement('div', { style: { textAlign: 'right', flexShrink: 0, minWidth: 52 } },
        React.createElement('span', { className: 'num', style: { fontSize: 18, fontWeight: 800, color: C.ink } }, f.score),
        React.createElement('span', { className: 'num', style: { fontSize: 11, color: C.mut } }, '/100')),
      React.createElement(I.ChevR, { size: 15, style: { color: C.mut, flexShrink: 0 } }));
  }

  function summaryRows(f, b) {
    const m = n => '$' + Math.round(n).toLocaleString();
    if (f.key === 'cashflow') return [['Total Income', m(b.income), 'pos'], ['Total Expenses', m(b.expenses), 'neg'], ['Net Cash Flow', m(b.netCashFlow), 'pos'], ['Cash Flow Margin', Math.round(b.netCashFlow / Math.max(1, b.income) * 100) + '%', 'ink'], ['Monthly Trend', '↑ Improving', 'pos']];
    if (f.key === 'savings') return [['Savings Rate', Math.round(b.savingsRate) + '%', 'pos'], ['Monthly Saved', m(b.netCashFlow), 'pos'], ['Target Rate', '20%', 'ink'], ['Status', 'On Track', 'pos']];
    if (f.key === 'debt') return [['Card Utilization', Math.round(b.utilization) + '%', b.utilization > 30 ? 'neg' : 'pos'], ['Debt-to-Income', Math.round(b.debtRatio) + '%', 'ink'], ['Card Debt', m(b.cardDebt), 'neg'], ['Trend', '↓ Decreasing', 'pos']];
    if (f.key === 'emergency') return [['Months Saved', b.emergencyMonths.toFixed(1), 'pos'], ['Target', '6.0 months', 'ink'], ['Monthly Expenses', m(b.expenses), 'ink'], ['Status', 'Well Funded', 'pos']];
    if (f.key === 'invest') return [['Portfolio Value', m(b.invest), 'pos'], ['Return', b.investReturnPct + '%', 'pos'], ['Diversification', 'Good', 'pos'], ['Trend', '↑ Growing', 'pos']];
    return f.sub.slice(0, 4).map(s => [s.label, s.score + '/100', s.score >= 80 ? 'pos' : s.score >= 65 ? 'ink' : 'neg']);
  }

  function Detail({ f, compare, base }) {
    const C = useC();
    const [hist, setHist] = React.useState('6 Months');
    const [bench, setBench] = React.useState('6 Months');
    const x6 = window.CMHealth.monthsBack(6);
    const col = f.status === 'Excellent' ? C.emerald : f.status === 'Very Good' ? C.teal : f.status === 'Good' ? C.amber : C.red;
    const colourOf = v => v === 'pos' ? C.emerald : v === 'neg' ? C.red : C.ink;
    const youSeries = window.CMHealth.trendTo(f.benchmark.you, 6, 0.06);
    const canSeries = window.CMHealth.trendTo(f.benchmark.canadian, 6, 0.05);
    const topSeries = window.CMHealth.trendTo(f.benchmark.top, 6, 0.03);
    const statusList = ['Excellent', 'Very Good', 'Good', 'Fair', 'Poor'];

    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
      /* header strip */
      React.createElement(FHCard, { pad: 22 },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'center' } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 16, minWidth: 0 } },
            React.createElement('div', { style: { width: 64, height: 64, borderRadius: 18, background: hexA(f.color, C.name === 'dark' ? 0.18 : 0.13), color: f.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, React.createElement(FHIcon, { name: f.icon, size: 30 })),
            React.createElement('div', { style: { minWidth: 0 } },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
                React.createElement('span', { style: { fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 700, color: C.ink } }, f.label),
                React.createElement(FHPill, { color: col }, f.status)),
              React.createElement('div', { style: { fontSize: 13, color: C.sub, marginTop: 5, lineHeight: 1.5, maxWidth: 460 } }, f.desc))),
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 26, flexShrink: 0 } },
            React.createElement('div', { style: { textAlign: 'right' } },
              React.createElement('div', null, React.createElement('span', { className: 'num', style: { fontFamily: 'var(--font-serif)', fontSize: 44, fontWeight: 700, color: C.ink } }, f.score), React.createElement('span', { className: 'num', style: { fontSize: 16, color: C.mut } }, ' /100')),
              React.createElement('div', { style: { fontSize: 12.5, color: C.emerald, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' } }, React.createElement(I.ArrowUp, { size: 13 }), f.delta + ' points from last month')),
            React.createElement('div', { style: { textAlign: 'center', borderLeft: '1px solid ' + C.line, paddingLeft: 24 } },
              React.createElement('div', { style: { fontSize: 11.5, color: C.sub, fontWeight: 700, marginBottom: 8 } }, 'Weight in Overall Score'),
              React.createElement(FHDonut, { value: f.weight * 3, size: 96, label: f.weight + '%', color: f.color }),
              React.createElement('div', { style: { fontSize: 11, color: C.mut, marginTop: 6, fontWeight: 600 } }, f.impact + ' Impact'))))),
      /* history + benchmark */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }, className: 'fh-2col' },
        React.createElement(FHCard, { title: 'Score History', right: React.createElement(FHSelect, { options: ['3 Months', '6 Months', '1 Year'], value: hist, onChange: setHist }) },
          React.createElement(FHLine, { height: 210, x: x6, series: [{ name: f.label, data: f.history, color: f.color, dots: true }], yFmt: v => v })),
        React.createElement(FHCard, { title: 'Score vs. Benchmark', right: React.createElement(FHSelect, { options: ['3 Months', '6 Months', '1 Year'], value: bench, onChange: setBench }) },
          React.createElement('div', { style: { display: 'flex', gap: 16 } },
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 9, paddingTop: 4, flexShrink: 0 } },
              [['You', f.benchmark.you, C.emerald, false], [compare, f.benchmark.canadian, C.gold, true], ['Top 20%', f.benchmark.top, C.sub, false]].map((r, i) =>
                React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 } },
                  React.createElement('span', { style: { width: 16, height: 0, borderTop: '2px ' + (r[3] ? 'dashed ' : 'solid ') + r[2] } }),
                  React.createElement('span', { style: { color: C.sub, flex: 1 } }, r[0]),
                  React.createElement('span', { className: 'num', style: { color: C.ink, fontWeight: 800 } }, r[1])))),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement(FHLine, { height: 200, x: x6, series: [
                { name: 'You', data: youSeries, color: C.emerald, fill: true, dots: true },
                { name: compare, data: canSeries, color: C.gold, dashed: true, fill: false },
                { name: 'Top 20%', data: topSeries, color: C.sub, fill: false }
              ], yFmt: v => v }))))),
      /* drivers + summary */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 16 }, className: 'fh-2col' },
        React.createElement(FHCard, { title: "What's driving your score", info: true },
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16, marginTop: 4 } },
            f.sub.map((s, i) => { const sc = s.score >= 90 ? C.emerald : s.score >= 80 ? C.teal : s.score >= 65 ? C.amber : C.red; const st = window.CMHealth.statusFor(s.score);
              return React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 13 } },
                React.createElement(FHChip, { name: f.icon, color: s.score >= 80 ? C.emerald : s.score >= 65 ? C.amber : C.red, size: 34, radius: 10 }),
                React.createElement('div', { style: { flex: 1, minWidth: 0 } },
                  React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 10, marginBottom: 5 } },
                    React.createElement('div', { style: { minWidth: 0 } }, React.createElement('div', { style: { fontWeight: 700, fontSize: 13, color: C.ink } }, s.label), React.createElement('div', { style: { fontSize: 11.5, color: C.sub, marginTop: 1 } }, s.desc)),
                    React.createElement('div', { style: { textAlign: 'right', flexShrink: 0 } }, React.createElement('span', { className: 'num', style: { fontWeight: 800, fontSize: 14, color: C.ink } }, s.score), React.createElement('span', { className: 'num', style: { fontSize: 11, color: C.mut } }, '/100'))),
                  React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
                    React.createElement(FHBar, { pct: s.score, color: sc, height: 7 }),
                    React.createElement('span', { style: { fontSize: 11, fontWeight: 700, color: sc, flexShrink: 0, width: 66, textAlign: 'right' } }, st)))); }))),
        React.createElement(FHCard, { title: f.label + ' Summary' },
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
            summaryRows(f, base).map((r, i, arr) => React.createElement('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '11px 0', borderBottom: i < arr.length - 1 ? '1px solid ' + C.line : 'none' } },
              React.createElement('span', { style: { fontSize: 12.5, color: C.sub, fontWeight: 600 } }, r[0]),
              React.createElement('span', { className: 'num', style: { fontSize: 13.5, fontWeight: 800, color: colourOf(r[2]) } }, r[1])))),
          React.createElement('div', { style: { marginTop: 14, background: hexA(C.emerald, C.name === 'dark' ? 0.1 : 0.08), border: '1px solid ' + hexA(C.emerald, 0.25), borderRadius: 13, padding: '13px 15px', display: 'flex', gap: 11 } },
            React.createElement(I.Spark, { size: 17, style: { color: C.emerald, flexShrink: 0, marginTop: 1 } }),
            React.createElement('div', null,
              React.createElement('div', { style: { fontWeight: 800, fontSize: 12.5, color: C.ink, marginBottom: 2 } }, f.score >= 85 ? 'Keep it up!' : 'Room to grow'),
              React.createElement('div', { style: { fontSize: 12, color: C.sub, lineHeight: 1.5 } }, f.improvement.pts ? ('Acting on this factor could add up to +' + f.improvement.pts + ' points to your score.') : 'Maintain your current habits to hold this strong position.'))))));
  }

  function FHScore({ data, compare }) {
    const C = useC();
    const [sel, setSel] = React.useState('cashflow');
    const f = data.factors.find(x => x.key === sel) || data.factors[0];
    return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18, alignItems: 'start' }, className: 'fh-score-grid' },
      /* left list */
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
        data.factors.map(fc => React.createElement(FactorRow, { key: fc.key, f: fc, active: fc.key === sel, onClick: () => setSel(fc.key) })),
        React.createElement('button', { onClick: () => { location.hash = '#/health'; }, style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 12, background: C.panel2, border: '1px solid ' + C.line, borderRadius: 14, padding: '14px', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' } },
          React.createElement('span', { style: { width: 38, height: 38, borderRadius: 10, background: hexA(C.blue, 0.14), color: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, React.createElement(I.Info, { size: 18 })),
          React.createElement('div', null, React.createElement('div', { style: { fontWeight: 700, fontSize: 13, color: C.ink } }, 'How we calculate your score'), React.createElement('div', { style: { fontSize: 11.5, color: C.sub, marginTop: 1 } }, 'Learn about our scoring methodology')))),
      /* detail */
      React.createElement('div', { style: { minWidth: 0 } }, React.createElement(Detail, { f, compare, base: data.base }),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 16, background: hexA(C.gold, C.name === 'dark' ? 0.1 : 0.1), border: '1px solid ' + hexA(C.gold, 0.3), borderRadius: 14, padding: '14px 18px', flexWrap: 'wrap' } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: C.ink } }, React.createElement(I.Spark, { size: 17, style: { color: C.gold } }), React.createElement('span', null, React.createElement('b', null, 'Tip:'), ' Try to keep your ' + f.label.toLowerCase() + ' score above 80 to maintain financial flexibility.')),
          React.createElement('button', { onClick: () => { location.hash = '#/health'; window.__fhGoTab && window.__fhGoTab('Recommendations'); }, style: { background: 'none', border: 0, color: C.emerald, fontWeight: 800, fontSize: 13, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5, fontFamily: 'inherit' } }, 'View ' + f.label.toLowerCase() + ' recommendations', React.createElement(I.ChevR, { size: 15 })))));
  }
  window.FHScore = FHScore;
})();