// Page Rapport — résultat de simulation IR
// 794 × 1123 px · design system OF
// 3 KPIs (IR, TMI avec thermomètre, potentiel d'optimisation), projection d'économie, leviers prioritaires

const OFReport = ({
  ir = 8420,
  tmi = 30, // 0, 11, 30, 41, 45
  potential = "Important", // Faible / Modéré / Important / Fort
  potentialLevel = 3, // 1..4
  savingMin = 3200,
  savingMax = 5100,
  baseTax = 8420,
  optimizedTax = 5120,
  levers = [
  { name: 'Girardin Industriel', tag: 'Réduction one-shot' },
  { name: 'Plan Épargne Retraite', tag: 'Déduction du revenu' },
  { name: 'FCPI Innovation', tag: 'Réduction IR 25%' }]

}) => {
  const tmiBands = [0, 11, 30, 41, 45];
  const tmiIdx = tmiBands.indexOf(tmi);
  const fmt = (n) => new Intl.NumberFormat('fr-FR').format(n) + ' €';

  const styles = {
    page: {
      width: 794, height: 1123,
      background: '#FFFFFF',
      fontFamily: '"Poppins", sans-serif',
      color: '#1A1A1A',
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      overflow: 'hidden'
    },
    header: {
      padding: '36px 56px 18px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    },
    logo: {
      display: 'flex', alignItems: 'center', gap: 10,
      fontWeight: 700, fontSize: 14
    },
    logoMark: {
      width: 22, height: 22, borderRadius: 6, background: '#3340FA',
      color: '#fff', fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    },
    pagePill: {
      background: '#E8E9FF', color: '#3340FA',
      padding: '6px 14px', borderRadius: 999,
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase'
    },
    hero: {
      padding: '0 56px 14px'
    },
    eyebrow: {
      fontSize: 12, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 14,
      display: 'flex', alignItems: 'center', gap: 12
    },
    eyebrowDot: {
      width: 7, height: 7, borderRadius: '50%', background: '#3340FA'
    },
    title: {
      fontSize: 40, fontWeight: 700, lineHeight: 1.02,
      letterSpacing: '-1.5px', margin: 0
    },
    subtitle: {
      fontSize: 13, color: '#555', marginTop: 10, lineHeight: 1.5,
      maxWidth: 580
    },
    body: {
      padding: '14px 56px 16px',
      flex: 1,
      display: 'flex', flexDirection: 'column',
      gap: 18, minHeight: 0
    },
    // KPI row
    kpiRow: {
      display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 12
    },
    kpi: {
      background: '#fff',
      border: '1px solid #E8E9FF',
      borderRadius: 14,
      padding: '16px 18px',
      boxShadow: '0 8px 24px rgba(0,0,0,0.04)',
      display: 'flex', flexDirection: 'column'
    },
    kpiHi: {
      background: '#3340FA', color: '#fff', border: 'none',
      boxShadow: '0 12px 32px rgba(51,64,250,0.18)'
    },
    kpiLabel: {
      fontSize: 9.5, fontWeight: 700, letterSpacing: '1.5px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 8
    },
    kpiLabelHi: { color: 'rgba(255,255,255,0.78)' },
    kpiValue: {
      fontSize: 28, fontWeight: 700, letterSpacing: '-1px',
      lineHeight: 1, fontVariantNumeric: 'tabular-nums'
    },
    kpiSub: {
      fontSize: 10.5, color: '#777', marginTop: 8, lineHeight: 1.4
    },
    kpiSubHi: { color: 'rgba(255,255,255,0.78)' },
    // TMI thermometer
    thermo: {
      display: 'flex', flexDirection: 'column', gap: 6,
      marginTop: 10
    },
    thermoBar: {
      display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden',
      background: '#F1F2F8'
    },
    thermoSeg: (active) => ({
      flex: 1,
      background: active ? '#3340FA' : 'transparent',
      transition: 'background 0.2s'
    }),
    thermoLabels: {
      display: 'flex', justifyContent: 'space-between',
      fontSize: 9, fontWeight: 600, color: '#999',
      fontVariantNumeric: 'tabular-nums'
    },
    thermoLabelActive: { color: '#3340FA' },
    // Potential bars
    potBars: {
      display: 'flex', alignItems: 'flex-end', gap: 4,
      height: 28, marginTop: 10
    },
    potBar: (active, h) => ({
      width: 14, height: h,
      borderRadius: 3,
      background: active ? '#3340FA' : '#E8E9FF'
    }),
    // Projection block
    proj: {
      background: '#F4F5FB',
      borderRadius: 16,
      padding: '20px 24px',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24,
      alignItems: 'center'
    },
    projLeft: {
      display: 'flex', flexDirection: 'column', gap: 12
    },
    projTitle: {
      fontSize: 16, fontWeight: 700, letterSpacing: '-0.4px'
    },
    projDesc: {
      fontSize: 11.5, color: '#555', lineHeight: 1.5
    },
    projRow: {
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      paddingTop: 8, borderTop: '1px solid #E2E8F0'
    },
    projRowLabel: {
      fontSize: 10, fontWeight: 600, color: '#777',
      textTransform: 'uppercase', letterSpacing: '1px'
    },
    projRowValue: {
      fontSize: 15, fontWeight: 700, color: '#1A1A1A',
      fontVariantNumeric: 'tabular-nums'
    },
    projHi: {
      background: '#3340FA', color: '#fff',
      padding: '10px 14px', borderRadius: 10,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    },
    projHiLabel: {
      fontSize: 10, fontWeight: 700, letterSpacing: '1px',
      textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)'
    },
    projHiValue: {
      fontSize: 13, fontWeight: 700,
      fontVariantNumeric: 'tabular-nums',
      whiteSpace: 'nowrap'
    },
    // Chart
    chart: {
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around',
      gap: 24, height: 160,
      borderBottom: '1px solid #E2E8F0',
      paddingBottom: 6
    },
    barCol: {
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      gap: 6, flex: 1
    },
    barTop: {
      fontSize: 11, fontWeight: 700, color: '#1A1A1A',
      fontVariantNumeric: 'tabular-nums'
    },
    barBefore: {
      width: 56, background: '#D6D9FE', borderRadius: '8px 8px 0 0'
    },
    barAfter: {
      width: 56, background: '#3340FA', borderRadius: '8px 8px 0 0'
    },
    barLabel: {
      fontSize: 9.5, color: '#777', fontWeight: 600,
      textTransform: 'uppercase', letterSpacing: '1px'
    },
    // Levers
    leversBlock: {},
    leversTitle: {
      fontSize: 12, fontWeight: 700, letterSpacing: '2px',
      textTransform: 'uppercase', color: '#3340FA',
      marginBottom: 10
    },
    leversGrid: {
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10
    },
    leverCard: {
      background: '#fff',
      border: '1px solid #E8E9FF',
      borderRadius: 12,
      padding: '12px 14px',
      display: 'flex', flexDirection: 'column', gap: 4
    },
    leverNum: {
      fontSize: 10, fontWeight: 700, color: '#3340FA',
      letterSpacing: '1.5px', fontVariantNumeric: 'tabular-nums'
    },
    leverName: {
      fontSize: 13, fontWeight: 700, letterSpacing: '-0.2px'
    },
    leverTag: {
      fontSize: 10, color: '#777'
    },
    // Footer
    footer: {
      borderTop: '1px solid #E2E8F0',
      padding: '10px 56px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 10, color: '#999'
    },
    footerLogo: {
      display: 'flex', alignItems: 'center', gap: 8,
      fontSize: 11, fontWeight: 700, color: '#1A1A1A'
    },
    footerMark: {
      width: 22, height: 22, background: '#3340FA',
      borderRadius: 6, color: '#fff', fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }
  };

  // chart heights — proportional, max 130px
  const maxH = 130;
  const beforeH = maxH;
  const afterH = Math.max(20, Math.round(optimizedTax / baseTax * maxH));

  return (
    <div style={styles.page}>
      <div style={styles.header}>
        <div style={styles.logo}>
          <div style={styles.logoMark}>W</div>
          Wiz Tax
        </div>
        <div style={styles.pagePill}>VOTRE SIMULATION</div>
      </div>

      <div style={styles.hero}>
        <div style={styles.eyebrow}>
          <span style={styles.eyebrowDot} />
          Rapport personnalisé
        </div>
        <h1 style={styles.title}>Voici votre estimation fiscale 2026</h1>
        <p style={styles.subtitle}>
          Nos algorithmes ont analysé vos données pour identifier les leviers d'optimisation
          les plus performants pour votre situation patrimoniale.
        </p>
      </div>

      <div style={styles.body}>
        {/* KPI row */}
        <div style={styles.kpiRow}>
          {/* IR */}
          <div style={{ ...styles.kpi, ...styles.kpiHi }}>
            <div style={{ ...styles.kpiLabel, ...styles.kpiLabelHi }}>Impôt sur le revenu estimé</div>
            <div style={styles.kpiValue}>{fmt(ir)}</div>
            <div style={{ ...styles.kpiSub, ...styles.kpiSubHi }}>Calculé sur votre situation actuelle</div>
          </div>

          {/* TMI */}
          <div style={styles.kpi}>
            <div style={styles.kpiLabel}>Tranche marginale</div>
            <div style={styles.kpiValue}>{tmi}<span style={{ fontSize: 18 }}>%</span></div>
            <div style={styles.thermo}>
              <div style={styles.thermoBar}>
                {tmiBands.map((b, i) =>
                <div key={b} style={styles.thermoSeg(i <= tmiIdx)} />
                )}
              </div>
              <div style={styles.thermoLabels}>
                {tmiBands.map((b, i) =>
                <span key={b} style={i === tmiIdx ? styles.thermoLabelActive : null}>
                    {b}%
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Potential */}
          <div style={styles.kpi}>
            <div style={styles.kpiLabel}>Potentiel d'optimisation</div>
            <div style={{ ...styles.kpiValue, fontSize: 22 }}>{potential}</div>
            <div style={styles.potBars}>
              {[10, 16, 22, 28].map((h, i) =>
              <div key={i} style={styles.potBar(i < potentialLevel, h)} />
              )}
            </div>
          </div>
        </div>

        {/* Projection */}
        <div style={styles.proj}>
          <div style={styles.projLeft}>
            <div style={styles.projTitle}>Simulateur d'économie</div>
            <div style={styles.projDesc}>
              Sur la base d'une épargne disponible de 12 000 € allouée à un projet
              fiscal investi sur les solutions sélectionnées avec votre conseiller.
            </div>
            <div style={styles.projRow}>
              <span style={styles.projRowLabel}>Épargne disponible</span>
              <span style={styles.projRowValue}>12 000 €</span>
            </div>
            <div style={styles.projHi}>
              <span style={styles.projHiLabel}>Économie d'impôt estimée</span>
              <span style={styles.projHiValue}>{fmt(savingMin)} – {fmt(savingMax)}</span>
            </div>
          </div>

          <div>
            <div style={styles.chart}>
              <div style={styles.barCol}>
                <span style={styles.barTop}>{fmt(baseTax)}</span>
                <div style={{ ...styles.barBefore, height: beforeH }} />
                <span style={styles.barLabel}>Sans optim.</span>
              </div>
              <div style={styles.barCol}>
                <span style={{ ...styles.barTop, color: '#3340FA' }}>{fmt(optimizedTax)}</span>
                <div style={{ ...styles.barAfter, height: afterH }} />
                <span style={{ ...styles.barLabel, color: '#3340FA' }}>Avec optim.</span>
              </div>
            </div>
          </div>
        </div>

        {/* Leviers */}
        <div style={styles.leversBlock}>
          <div style={styles.leversTitle}>Vos leviers d'optimisation prioritaires</div>
          <div style={styles.leversGrid}>
            {levers.map((l, i) =>
            <div key={i} style={styles.leverCard}>
                <span style={styles.leverNum}>0{i + 1}</span>
                <span style={styles.leverName}>{l.name}</span>
                <span style={styles.leverTag}>{l.tag}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Footer */}
      <div style={styles.footer}>
        <div style={styles.footerLogo}>
          <div style={styles.footerMark}>W</div>
          Wiz Tax
        </div>
        <div>contact@wiztax.fr · wiztax.fr</div>
        <div>Édition 04 / 2026</div>
      </div>
    </div>);

};

window.OFReport = OFReport;