import { useEffect, useState } from 'react';
import { api } from '../api.js';

const MOIS_LABELS = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
const MOIS_NUMS   = ['01','02','03','04','05','06','07','08','09','10','11','12'];

// Taux par défaut (2026+) — remplacés par les données de /api/pfu
const DEFAULT_RATES = { pfo: 0.128, csg: 0.106, crds: 0.005, solidarite: 0.075 };

function getRatesForYear(annee, pfuList) {
  const yr = Number(annee);
  // Chercher l'année exacte, puis l'année précédente la plus proche
  const sorted = [...pfuList].sort((a, b) => b.annee - a.annee);
  const match = sorted.find(r => r.annee <= yr);
  if (!match) return DEFAULT_RATES;
  return {
    pfo:        (match.impot_revenu ?? 12.8) / 100,
    csg:        (match.csg         ??  9.2)  / 100,
    crds:       (match.crds        ??  0.5)  / 100,
    solidarite: (match.solidarite  ??  7.5)  / 100,
  };
}

const r = v => Math.round((v ?? 0) * 100) / 100;
const fmtEUR = v => {
  if (v == null || v === 0) return <span style={{ color: 'var(--text-muted)' }}>- €</span>;
  return `${Number(v).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`;
};
const fmtInt = v => {
  if (v == null || v === 0) return <span style={{ color: 'var(--text-muted)' }}>-</span>;
  return `${v} €`;
};

/* ── Simulation cases CERFA pour un montant brut ── */
function computeCases(ba, rates) {
  const R   = rates ?? DEFAULT_RATES;
  const BA  = Math.round(ba);
  const IA  = Math.round(BA * R.pfo);
  const PQ  = Math.round(BA * R.csg);
  const PV  = Math.round(BA * R.crds);
  const PF1 = PQ + PV;
  const PG1 = Math.round(BA * R.solidarite);
  const PU  = PF1;
  const PK  = PG1;
  const QR  = IA + PU + PK;
  const totalTax = R.pfo + R.csg + R.crds + R.solidarite;
  return { BA, IA, PQ, PV, PF1, PG1, PU, PK, QR, totalTax, pfo: R.pfo, csgRate: R.csg, crdsRate: R.crds, solidRate: R.solidarite };
}

/* ── Composant principal ── */
export default function Cerfa2778Preview({ annee, activeView }) {
  const LS_KEY = 'cl_2778_excluded_plats';

  const [data, setData]           = useState(null);
  const [loading, setLoading]     = useState(false);
  const [pfuList, setPfuList]     = useState([]);
  const [excluded, setExcluded]   = useState(() => {
    try { return new Set(JSON.parse(localStorage.getItem(LS_KEY)) ?? []); }
    catch { return new Set(); }
  });
  const [selectedMois, setSelectedMois] = useState(null);
  const [view, setView]           = useState('matrice'); // 'matrice' | 'cerfa'

  useEffect(() => {
    setLoading(true);
    setData(null);
    setSelectedMois(null);
    const scopeParams = activeView === 'all' ? { scope: 'all' } : {};
    Promise.all([
      api.get('/taxreport/2778', { annee, ...scopeParams }),
      pfuList.length === 0 ? api.get('/pfu') : Promise.resolve(null),
    ]).then(([d, pfu]) => {
      setData(d);
      if (pfu) setPfuList(pfu);
    }).then(([d]) => {
      // Auto-sélection du dernier mois avec données si vue cerfa active
      if (d?.plateformes) {
        const totaux = ['01','02','03','04','05','06','07','08','09','10','11','12'].map(m => {
          const stored = JSON.parse(localStorage.getItem('cl_2778_excluded_plats') ?? '[]');
          const excl = new Set(stored);
          return d.plateformes.filter(p => !excl.has(p.id)).reduce((s, p) => s + (p.mois[m] ?? 0), 0);
        });
        const last = totaux.reduce((idx, val, i) => val > 0 ? i : idx, null);
        if (last !== null) setSelectedMois(last);
      }
    }).finally(() => setLoading(false));
  }, [annee, activeView]); // eslint-disable-line

  if (loading || !data) return <div className="card text-muted">Chargement…</div>;

  const plateformes = data.plateformes;

  const rates = getRatesForYear(annee, pfuList);
  const TOTAL_TAX = rates.pfo + rates.csg + rates.crds + rates.solidarite;

  if (plateformes.length === 0) {
    return (
      <div className="card">
        <p className="text-muted" style={{ margin: 0 }}>
          Aucun remboursement de plateforme étrangère pour {annee}.
        </p>
      </div>
    );
  }

  /* ── Auto-sélection du dernier mois avec données ── */
  // (calculé après le rendu initial)

  /* ── Totaux mensuels des plateformes incluses ── */
  const totauxMois = MOIS_NUMS.map(m => {
    let sum = 0;
    for (const plat of plateformes) {
      if (!excluded.has(plat.id)) sum += plat.mois[m] ?? 0;
    }
    return r(sum);
  });

  const lastMoisWithData = totauxMois.reduce((last, val, i) => val > 0 ? i : last, null);

  /* ── Données du mois sélectionné pour simulation ── */
  const moisData = selectedMois !== null ? (() => {
    const mNum = MOIS_NUMS[selectedMois];
    const ba = totauxMois[selectedMois];
    const detail = plateformes
      .filter(p => !excluded.has(p.id) && (p.mois[mNum] ?? 0) > 0)
      .map(p => ({ nom: p.nom, montant: p.mois[mNum] }));
    return { ba, detail, cases: computeCases(ba, rates) };
  })() : null;

  /* ── Toggle plateforme + persistance localStorage ── */
  const togglePlat = (id) => {
    setExcluded(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      localStorage.setItem(LS_KEY, JSON.stringify([...next]));
      return next;
    });
  };

  const cellStyle = {
    textAlign: 'right',
    padding: '6px 10px',
    fontSize: 'var(--fs-sm)',
    whiteSpace: 'nowrap',
    borderBottom: '1px solid var(--border)',
  };
  const headStyle = {
    textAlign: 'center',
    padding: '6px 10px',
    fontSize: 'var(--fs-xs)',
    fontWeight: 600,
    color: 'var(--text-muted)',
    background: 'var(--surface-2)',
    borderBottom: '1px solid var(--border)',
    whiteSpace: 'nowrap',
  };

  return (
    <div className="card">
      {/* ── Navigation sidebar ── */}
      <div style={{ display: 'flex', gap: 0, alignItems: 'flex-start' }}>
        <nav style={{
          width: 200, flexShrink: 0, marginRight: 20,
          background: 'var(--surface)', border: '1px solid var(--border)',
          borderRadius: 10, padding: '8px 0', boxSizing: 'border-box',
        }}>
          <div style={{ padding: '6px 12px 8px', fontSize: 'var(--fs-xs)', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
            Sections
          </div>
          <button
            className={`account-nav-item${view === 'matrice' ? ' active' : ''}`}
            onClick={() => { setView('matrice'); }}
          >
            <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='1.8' strokeLinecap='round' strokeLinejoin='round'>
              <path d='M3 3h18v2H3V3zm0 7h12v2H3v-2zm0 7h18v2H3v-2z'/>
            </svg>
            Suivi mensuel
          </button>
          <button
            className={`account-nav-item${view === 'cerfa' ? ' active' : ''}`}
            onClick={() => { setView('cerfa'); if (selectedMois === null) setSelectedMois(lastMoisWithData); }}
          >
            <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='1.8' strokeLinecap='round' strokeLinejoin='round'>
              <path d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/>
            </svg>
            Données 2778-SD
          </button>
          <button
            className={`account-nav-item${view === 'report2042' ? ' active' : ''}`}
            onClick={() => { setView('report2042'); }}
          >
            <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='1.8' strokeLinecap='round' strokeLinejoin='round'>
              <path d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/>
            </svg>
            Report 2042
          </button>
          <div style={{ margin: '10px 12px 6px', borderTop: '1px solid var(--border)' }} />
          <div style={{ padding: '4px 12px', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', lineHeight: 1.5 }}>
            Plateformes non-françaises<br/>Base = intérêts bruts avant retenue locale
          </div>
        </nav>
        <div style={{ flex: 1, minWidth: 0 }}>
      {/* ── Vue Matrice ── */}
      {view === 'matrice' && (
        <>
        <div className="card" style={{ padding: 0, overflow: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, padding: '14px 14px 10px' }}>
            <h4 style={{ margin: 0, fontWeight: 700 }}>Suivi mensuel des intérêts bruts</h4>
            <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>Revenus {annee} — plateformes étrangères</span>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 900 }}>
            <thead>
              <tr>
                <th style={{ ...headStyle, textAlign: 'left', minWidth: 180, position: 'sticky', left: 0, background: 'var(--surface-2)' }}>
                  Plateforme — Détenteur
                </th>
                {MOIS_LABELS.map((m, i) => (
                  <th key={m} style={headStyle}>{m}</th>
                ))}
                <th style={{ ...headStyle, background: 'var(--surface-2)' }}>Total</th>
              </tr>
            </thead>
            <tbody>
              {plateformes.map(plat => {
                const isExcluded = excluded.has(plat.id);
                const total = Object.values(plat.mois).reduce((a, b) => a + b, 0);
                return (
                  <tr key={plat.id} style={{ opacity: isExcluded ? 0.4 : 1, transition: 'opacity .15s' }}>
                    <td style={{
                      ...cellStyle, textAlign: 'left',
                      position: 'sticky', left: 0,
                      background: 'var(--surface)',
                      fontWeight: 500,
                    }}>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', userSelect: 'none', fontSize: 'var(--fs-sm)', textTransform: 'none', letterSpacing: 'normal', color: 'var(--text)', fontWeight: 400, marginBottom: 0 }}>
                        <input
                          type="checkbox"
                          checked={!isExcluded}
                          onChange={() => togglePlat(plat.id)}
                          style={{ accentColor: 'var(--primary)', width: 14, height: 14, flexShrink: 0 }}
                        />
                        <span style={{ fontWeight: 500 }}>
                          {plat.nom}
                          {(plat.investisseur_nom || plat.investisseur_prenom) && (
                            <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginLeft: 6, fontWeight: 400 }}>
                              — {(() => { const n = plat.investisseur_nom ?? ''; const p = plat.investisseur_prenom ?? ''; return p && n.startsWith(p) ? n : [p, n].filter(Boolean).join(' '); })()}
                            </span>
                          )}
                        </span>
                      </label>
                    </td>
                    {MOIS_NUMS.map(m => (
                      <td key={m} style={cellStyle}>{fmtEUR(plat.mois[m] ?? null)}</td>
                    ))}
                    <td style={{ ...cellStyle, fontWeight: 600 }}>{fmtEUR(r(total))}</td>
                  </tr>
                );
              })}

              {/* ── Séparateur ── */}
              <tr><td colSpan={14} style={{ height: 4, background: 'var(--surface-2)' }} /></tr>

              {/* ── Total brut mensuel ── */}
              <tr style={{ background: 'var(--surface-2)' }}>
                <td style={{ ...cellStyle, textAlign: 'left', fontWeight: 600, position: 'sticky', left: 0, background: 'var(--surface-2)' }}>
                  Total intérêt brut
                </td>
                {totauxMois.map((t, i) => (
                  <td key={i} style={{ ...cellStyle, fontWeight: 600 }}>{fmtEUR(t || null)}</td>
                ))}
                <td style={{ ...cellStyle, fontWeight: 700 }}>
                  {fmtEUR(r(totauxMois.reduce((a, b) => a + b, 0)))}
                </td>
              </tr>

              {/* ── Taux Flat Tax ── */}
              <tr>
                <td style={{ ...cellStyle, textAlign: 'left', color: 'var(--text-muted)', position: 'sticky', left: 0, background: 'var(--surface)' }}>
                  Taux total prélevé ({(TOTAL_TAX * 100).toFixed(1)} %)
                </td>
                {MOIS_NUMS.map((_, i) => (
                  <td key={i} style={{ ...cellStyle, color: 'var(--text-muted)' }}>
                    {totauxMois[i] > 0 ? `${(TOTAL_TAX * 100).toFixed(2).replace('.', ',')} %` : '—'}
                  </td>
                ))}
                <td style={{ ...cellStyle, color: 'var(--text-muted)' }}>{`${(TOTAL_TAX * 100).toFixed(2).replace('.', ',')} %`}</td>
              </tr>

              {/* ── Total Flat Tax ── */}
              <tr style={{ background: 'rgba(239,68,68,0.06)' }}>
                <td style={{ ...cellStyle, textAlign: 'left', fontWeight: 600, color: 'var(--danger)', position: 'sticky', left: 0, background: 'rgba(239,68,68,0.06)' }}>
                  Montant total à payer (QR)
                </td>
                {totauxMois.map((t, i) => {
                  const { QR } = computeCases(t, rates);
                  return (
                    <td key={i} style={{ ...cellStyle, fontWeight: 600, color: t > 0 ? 'var(--danger)' : undefined }}>
                      {t > 0 ? fmtInt(QR) : <span style={{ color: 'var(--text-muted)' }}>-</span>}
                    </td>
                  );
                })}
                <td style={{ ...cellStyle, fontWeight: 700, color: 'var(--danger)' }}>
                  {fmtInt(computeCases(r(totauxMois.reduce((a, b) => a + b, 0)), rates).QR)}
                </td>
              </tr>

              {/* ── Intérêt net ── */}
              <tr style={{ background: 'rgba(16,185,129,0.05)' }}>
                <td style={{ ...cellStyle, textAlign: 'left', fontWeight: 600, color: 'var(--success)', position: 'sticky', left: 0, background: 'rgba(16,185,129,0.05)' }}>
                  Total intérêt net
                </td>
                {totauxMois.map((t, i) => (
                  <td key={i} style={{ ...cellStyle, fontWeight: 600, color: t > 0 ? 'var(--success)' : undefined }}>
                    {fmtEUR(t > 0 ? r(t * (1 - TOTAL_TAX)) : null)}
                  </td>
                ))}
                <td style={{ ...cellStyle, fontWeight: 700, color: 'var(--success)' }}>
                  {fmtEUR(r(totauxMois.reduce((a, b) => a + b, 0) * (1 - TOTAL_TAX)))}
                </td>
              </tr>
            </tbody>
          </table>

          <div style={{ padding: '10px 16px', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', borderTop: '1px solid var(--border)', display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <span>Taux {annee} : PFO {(rates.pfo*100).toFixed(1)} % + CSG {(rates.csg*100).toFixed(1)} % + CRDS {(rates.crds*100).toFixed(1)} % + Solidarité {(rates.solidarite*100).toFixed(1)} % = {(TOTAL_TAX*100).toFixed(1)} %</span>
            <span>·</span>
            <span>⏱ Déclaration et paiement dus dans les <strong>15 premiers jours du mois suivant</strong> l'encaissement</span>
            <span>·</span>
            <span>Base imposable : intérêts bruts <em>après</em> déduction de l'impôt prélevé à la source à l'étranger, <em>avant</em> déduction retenue "directive épargne"</span>
          </div>
        </div>

        </>
      )}

      {/* ── Vue Report 2042 ── */}
      {view === 'report2042' && (
        <Report2042Block annee={annee} totauxMois={totauxMois} rates={rates} plateformes={plateformes} excluded={excluded} />
      )}

      {/* ── Vue Données 2778-SD ── */}
      {view === 'cerfa' && (
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-start' }}>
          {/* Sélecteur de mois */}
          <div className="card" style={{ minWidth: 200, flexShrink: 0 }}>
            <h4 style={{ margin: '0 0 12px', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>Mois</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {MOIS_LABELS.map((label, i) => {
                const ba = totauxMois[i];
                const isActive = selectedMois === i;
                return (
                  <button
                    key={i}
                    onClick={() => setSelectedMois(i)}
                    style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '7px 12px', borderRadius: 6, border: 'none',
                      background: isActive ? 'var(--primary)' : (ba > 0 ? 'var(--surface-2)' : 'transparent'),
                      color: isActive ? '#fff' : (ba > 0 ? 'var(--text)' : 'var(--text-muted)'),
                      cursor: ba > 0 ? 'pointer' : 'default',
                      fontWeight: isActive ? 600 : 400,
                      fontSize: 'var(--fs-sm)',
                      opacity: ba > 0 ? 1 : 0.5,
                    }}
                    disabled={ba === 0}
                  >
                    <span>{label}</span>
                    {ba > 0 && <span style={{ fontSize: 'var(--fs-xs)' }}>{Math.round(ba)} €</span>}
                  </button>
                );
              })}
            </div>

          </div>

          {/* CERFA 2778-SD simulé */}
          {moisData && (
            <div style={{ flex: 1, minWidth: 400 }}>
              <div className="card" style={{ marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
                  <h4 style={{ margin: 0, fontWeight: 700 }}>
                    Formulaire 2778-SD — {MOIS_LABELS[selectedMois]} {annee}
                  </h4>
                  <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>Simulation indicative</span>
                </div>

                {/* Détail des plateformes incluses */}
                {moisData.detail.length > 1 && (
                  <div style={{ marginBottom: 14, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 8 }}>
                    <div style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginBottom: 6, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                      Plateformes incluses
                    </div>
                    {moisData.detail.map(d => (
                      <div key={d.nom} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--fs-sm)', marginBottom: 2 }}>
                        <span>{d.nom}</span>
                        <span style={{ fontWeight: 500 }}>{r(d.montant).toLocaleString('fr-FR', { minimumFractionDigits: 2 })} €</span>
                      </div>
                    ))}
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--fs-sm)', fontWeight: 700, borderTop: '1px solid var(--border)', marginTop: 6, paddingTop: 6 }}>
                      <span>Total</span>
                      <span>{r(moisData.ba).toLocaleString('fr-FR', { minimumFractionDigits: 2 })} €</span>
                    </div>
                  </div>
                )}

                <CerfaBlock cases={moisData.cases} ba_exact={moisData.ba} mois={selectedMois} annee={annee} />
              </div>
            </div>
          )}

          {selectedMois === null && (
            <div className="card" style={{ flex: 1, color: 'var(--text-muted)', textAlign: 'center', padding: 40 }}>
              Sélectionnez un mois pour simuler le formulaire.
            </div>
          )}
        </div>
      )}
      </div>
      </div>
    </div>
  );
}

/* ── Report annuel 2042 ── */
function Report2042Block({ annee, totauxMois, rates, plateformes, excluded }) {
  const totalBA = r(totauxMois.reduce((a, b) => a + b, 0));
  if (totalBA === 0) return null;

  const totalIA = computeCases(totalBA, rates).IA;

  // Détail par plateforme incluse (annuel)
  const platDetail = plateformes
    .filter(p => !excluded.has(p.id))
    .map(p => {
      const ba = r(Object.values(p.mois).reduce((a, b) => a + b, 0));
      return { nom: p.nom, ba, ia: computeCases(ba, rates).IA };
    })
    .filter(p => p.ba > 0);

  const Case2042 = ({ code, label, note, value, breakdown }) => (
    <div style={{ borderBottom: '1px solid var(--border)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '90px 1fr auto',
        gap: '0 12px', alignItems: 'center', padding: '10px 14px',
      }}>
        <div style={{
          fontFamily: 'monospace', fontWeight: 800, fontSize: 'var(--fs-base)',
          color: 'var(--primary)', background: 'rgba(99,102,241,0.07)',
          borderRadius: 6, padding: '2px 6px', textAlign: 'center', letterSpacing: '.04em',
        }}>{code}</div>
        <div>
          <div style={{ fontSize: 'var(--fs-sm)', fontWeight: 600 }}>{label}</div>
          {note && <div style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginTop: 2 }}>{note}</div>}
        </div>
        <div style={{ fontWeight: 800, fontSize: 'var(--fs-lg)', whiteSpace: 'nowrap', color: 'var(--text)' }}>
          {Number(value).toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} €
        </div>
      </div>
      {breakdown && breakdown.length > 1 && (
        <div style={{ padding: '0 14px 10px 118px', display: 'flex', flexDirection: 'column', gap: 3 }}>
          {breakdown.map(p => (
            <div key={p.nom} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
              <span>└ {p.nom}</span>
              <span style={{ fontWeight: 500 }}>
                {Number(p.val).toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} €
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="card">
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
        <h4 style={{ margin: 0, fontWeight: 700 }}>Report annuel — Déclaration 2042</h4>
        <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>Revenus {annee} à reporter sur la 2042 déposée en {Number(annee) + 1}</span>
      </div>

      <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', marginBottom: 14 }}>
        <Case2042
          code="2TR"
          label="Produits de placement à revenu fixe de source étrangère"
          note="Intérêts bruts totaux encaissés sur l'année (somme des cases BA)"
          value={Math.round(totalBA)}
          breakdown={platDetail.map(p => ({ nom: p.nom, val: Math.round(p.ba) }))}
        />
        <Case2042
          code="2BH"
          label="Produits soumis aux prélèvements sociaux (idem 2TR)"
          note="Même montant que 2TR — évite la double imposition aux prélèvements sociaux"
          value={Math.round(totalBA)}
          breakdown={platDetail.map(p => ({ nom: p.nom, val: Math.round(p.ba) }))}
        />
        <Case2042
          code="2CK"
          label="Prélèvement forfaitaire non libératoire déjà versé (acompte)"
          note="Somme des cases IA de vos 2778-SD — s'impute sur l'IR définitif, l'excédent est restitué"
          value={totalIA}
          breakdown={platDetail.map(p => ({ nom: p.nom, val: p.ia }))}
        />
      </div>

      <div style={{
        padding: '10px 14px', borderRadius: 8,
        background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.15)',
        fontSize: 'var(--fs-xs)', lineHeight: 1.6, color: 'var(--text-muted)',
      }}>
        <strong style={{ color: 'var(--text)', display: 'block', marginBottom: 4 }}>Comment fonctionne le PFO ?</strong>
        Le prélèvement forfaitaire obligatoire (PFO, case 2CK) versé via la 2778-SD est un <em>acompte</em> sur l'impôt sur le revenu, non libératoire.
        L'imposition définitive est calculée lors de votre 2042 : par défaut au taux de <strong>{(rates.pfo * 100).toFixed(1)} %</strong> (Flat Tax),
        ou sur option expresse au barème progressif. L'acompte déjà versé (2CK) s'impute sur l'IR définitif — tout excédent vous est restitué.
        Le montant 2BH est déclaré en sus de 2TR uniquement pour neutraliser les prélèvements sociaux déjà prélevés via la 2778-SD.
      </div>
    </div>
  );
}

/* ── Bloc cases CERFA ── */
function CerfaBlock({ cases, ba_exact, mois, annee }) {
  const { BA, IA, PQ, PV, PF1, PG1, PU, PK, QR } = cases;

  const Row = ({ label, code, value, highlight, note, caseSup, base, taux, noUnit }) => (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr 90px 90px 90px 90px 90px',
      gap: '0 8px',
      alignItems: 'baseline',
      padding: '8px 12px',
      borderBottom: '1px solid var(--border)',
      background: highlight ? 'rgba(239,68,68,0.05)' : 'transparent',
    }}>
      <div style={{ fontSize: 'var(--fs-sm)', whiteSpace: 'pre-line' }}>
        {label}
        {note && <span style={{ display: 'block', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginTop: 1 }}>{note}</span>}
      </div>
      <div style={{ fontSize: 'var(--fs-sm)', textAlign: 'center', color: 'var(--text-muted)' }}>{base != null ? `${base} €` : ''}</div>
      <div style={{ fontSize: 'var(--fs-xs)', textAlign: 'center', color: 'var(--text-muted)' }}>{taux ?? ''}</div>
      <div style={{ fontFamily: 'monospace', fontWeight: 700, fontSize: 'var(--fs-sm)', color: 'var(--primary)', textAlign: 'center' }}>{code}</div>
      <div style={{
        fontWeight: highlight ? 700 : 600,
        textAlign: 'center',
        color: highlight ? 'var(--danger)' : 'var(--text)',
        fontSize: highlight ? 'var(--fs-base)' : 'var(--fs-sm)',
      }}>{value != null ? (noUnit ? value : `${value} €`) : ''}</div>
      <div style={{ fontFamily: 'monospace', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', alignSelf: 'center', textAlign: 'center' }}>{caseSup ?? ''}</div>
    </div>
  );

  const SectionHeader = ({ title }) => (
    <div style={{
      padding: '6px 12px',
      background: 'var(--surface-2)',
      fontSize: 'var(--fs-xs)', fontWeight: 600,
      color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.06em',
    }}>{title}</div>
  );

  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
      {/* En-tête */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 90px 90px 90px 90px 90px', gap: '0 8px',
        padding: '6px 12px', background: 'var(--surface-2)',
        fontSize: 'var(--fs-xs)', fontWeight: 600, color: 'var(--text-muted)',
        borderBottom: '1px solid var(--border)',
      }}>
        <span>Libellé</span><span style={{ textAlign: 'center' }}>Base imposable (BA)</span><span style={{ textAlign: 'center' }}>Taux</span><span style={{ textAlign: 'center' }}>Case</span><span style={{ textAlign: 'center' }}>Montant</span><span></span>
      </div>

      <SectionHeader title="Page de garde (page 1)" />
      <Row label="Mois concerné par la déclaration" note="Mois au cours duquel les revenus ont été encaissés" code="" value={mois != null ? `${MOIS_LABELS[mois]} ${annee ?? new Date().getFullYear()}` : '—'} noUnit />
      <Row label="Paiement" note="Somme à payer — reporter le montant déterminé en dernière page, case QR" code="QR" value={QR} highlight />
      <SectionHeader title="Prélèvement forfaitaire obligatoire non libératoire (page 2)" />
      <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)' }}>
        <span style={{ fontSize: 'var(--fs-sm)', fontWeight: 600 }}>Produits de placement à revenu fixe de source étrangère soumis au prélèvement forfaitaire obligatoire non libératoire</span>
      </div>
      <Row
        label={`Intérêts et produits des obligations, créances, dépôts, cautionnements, comptes courants, fonds communs de créances, bons de caisse.\nPrélèvement forfaitaire non libératoire (BA × ${(cases.pfo*100||12.8).toFixed(1)} %)` }
        code="IA"
        value={IA}
        base={BA}
        taux={`${(cases.pfo*100||12.8).toFixed(1)} %`}
        note={ba_exact !== BA ? `Montant exact : ${r(ba_exact).toLocaleString('fr-FR', { minimumFractionDigits: 2 })} € → arrondi à ${BA} €` : null}
      />
      <Row label="Total prélèvement forfaitaire non libératoire (IA + …)" code="" value={IA} caseSup="A422" />

      <SectionHeader title="Prélèvements sociaux (page 3)" />
      <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)' }}>
        <span style={{ fontSize: 'var(--fs-sm)', fontWeight: 600 }}>Produits de placements à revenu fixe et produits afférents aux versements déductibles faisant l'objet d'un retrait en capital des PER de source étrangère</span>
      </div>
      <Row label={`CSG (BA × ${(cases.csgRate*100||10.6).toFixed(1)} %)`} code="PQ" value={PQ} base={BA} taux={`${(cases.csgRate*100||10.6).toFixed(1)} %`} />
      <Row label={`CRDS (BA × ${(cases.crdsRate*100||0.5).toFixed(1)} %)`} code="PV" value={PV} base={BA} taux={`${(cases.crdsRate*100||0.5).toFixed(1)} %`} />
      <Row label="Total prélèvements sociaux hors solidarité (PQ + PV) → PF1" code="PF1" value={PF1} />
      <Row label={`Prélèvement de solidarité (BA × ${(cases.solidRate*100||7.5).toFixed(1)} %)`} code="PG1" value={PG1} base={BA} taux={`${(cases.solidRate*100||7.5).toFixed(1)} %`} />

      <SectionHeader title="Totaux à reporter (page 4)" />
      <Row label="Total prélèvements sociaux hors solidarité (PF1 + …)" code="PU" value={PU} caseSup="0701" />
      <Row label="Total prélèvement de solidarité (PG1 + …)" code="PK" value={PK} caseSup="A392" />

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 90px 90px 90px 90px 90px', gap: '0 8px',
        padding: '12px 12px',
        background: 'linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04))',
        borderTop: '2px solid var(--danger)',
      }}>
        <div style={{ fontWeight: 700, fontSize: 'var(--fs-sm)' }}>
          MONTANT TOTAL À PAYER (IA + PU + PK)
          <div style={{ fontSize: 'var(--fs-xs)', fontWeight: 400, color: 'var(--text-muted)', marginTop: 2 }}>
            À reporter en première page du formulaire
          </div>
        </div>
        <div></div><div></div>
        <div style={{ fontFamily: 'monospace', fontWeight: 700, color: 'var(--danger)', fontSize: 'var(--fs-base)', alignSelf: 'center', textAlign: 'center' }}>QR</div>
        <div style={{ fontWeight: 800, fontSize: '1.4rem', textAlign: 'center', color: 'var(--danger)', alignSelf: 'center' }}>{QR} €</div>
        <div></div>
      </div>
    </div>
  );
}
