import { useEffect, useRef, useState } from 'react';
import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx';

const fmtEUR = n => {
  if (!n && n !== 0) return '';
  return new Intl.NumberFormat('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(n);
};

const fmtEURDec = n => {
  if (!n && n !== 0) return '';
  return new Intl.NumberFormat('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
};

/* ── Cellule du formulaire ── */
/* Layout : [code2561] [label + report 2042] [code2042 noir] [montant] */
function Cell({ label, code2561, code2042, value, filled, noReport }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'stretch',
      border: '1px solid #aaa',
      marginBottom: -1,
      background: filled ? '#fffbe6' : '#fff',
    }}>
      {/* Case 1 — code 2561 (ex: KR) */}
      <div style={{
        width: 44, flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        borderRight: '1px solid #aaa',
        background: '#f5f3ff',
        fontSize: 11, fontWeight: 700, color: '#7c3aed',
      }}>{code2561}</div>

      {/* Case 2 — désignation + report */}
      <div style={{
        flex: 1, padding: '5px 8px',
        fontSize: 11, color: '#222', lineHeight: 1.4,
        borderRight: '1px solid #aaa',
      }}>
        <div>{label}</div>
        <div style={{ fontSize: 10, color: noReport ? '#9a3412' : '#555', marginTop: 2 }}>
          {noReport ? 'Sans report sur la déclaration 2042' : 'Montant à reporter sur votre déclaration 2042'}
        </div>
      </div>

      {/* Case 3 — code 2042 (ex: 2TT) blanc sur noir */}
      <div style={{
        width: 48, flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        borderRight: '1px solid #aaa',
        background: noReport ? '#78716c' : (filled ? '#111' : '#555'),
        fontSize: 11, fontWeight: 700, color: '#fff',
      }}>{code2042 ?? '—'}</div>

      {/* Case 4 — montant */}
      <div style={{
        width: 90, flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        padding: '0 10px',
        fontSize: 12, fontWeight: filled ? 700 : 400,
        color: filled ? '#14532d' : '#bbb',
        background: filled ? '#f0fdf4' : '#fafafa',
      }}>
        {filled ? fmtEUR(value) + ' €' : '—'}
      </div>
    </div>
  );
}

function SectionTitle({ children }) {
  return (
    <div style={{
      background: '#5b21b6', color: '#fff',
      WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact',
      fontWeight: 700, fontSize: 11, textTransform: 'uppercase',
      letterSpacing: '.04em', padding: '4px 8px',
      marginTop: 10, marginBottom: 0,
    }}>{children}</div>
  );
}

function FieldRow({ label, code, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'stretch', border: '1px solid #aaa', marginBottom: -1 }}>
      <div style={{ width: 44, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '3px 4px', fontSize: 10, fontWeight: 600, color: '#7c3aed', borderRight: '1px solid #aaa', background: '#f5f3ff' }}>{code}</div>
      <div style={{ width: 120, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '3px 6px', fontSize: 11, color: '#222', borderRight: '1px solid #aaa' }}>{label}</div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '3px 8px', fontSize: 11, color: value ? '#111' : 'transparent', background: '#fff' }}>{value || ''}</div>
    </div>
  );
}

/* ── Cellule éditable en place ── */
function EditableFieldRow({ label, code, value, onSave }) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft]     = useState(value ?? '');
  const inputRef              = useRef(null);

  const startEdit = () => { setDraft(value ?? ''); setEditing(true); };
  const confirm   = () => { onSave(draft.trim() || null); setEditing(false); };
  const onKey     = e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') setEditing(false); };

  useEffect(() => { if (editing && inputRef.current) inputRef.current.focus(); }, [editing]);

  return (
    <div style={{ display: 'flex', alignItems: 'stretch', border: '1px solid #aaa', marginBottom: -1 }}>
      <div style={{ width: 44, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '3px 4px', fontSize: 10, fontWeight: 600, color: '#7c3aed', borderRight: '1px solid #aaa', background: '#f5f3ff' }}>{code}</div>
      <div style={{ width: 120, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '3px 6px', fontSize: 11, color: '#222', borderRight: '1px solid #aaa' }}>{label}</div>
      <div
        onClick={!editing ? startEdit : undefined}
        style={{
          flex: 1, display: 'flex', alignItems: 'center',
          background: editing ? '#f5f3ff' : '#fff',
          cursor: editing ? 'default' : 'text',
          position: 'relative',
        }}
      >
        {editing ? (
          <>
            <input
              ref={inputRef}
              value={draft}
              onChange={e => setDraft(e.target.value)}
              onKeyDown={onKey}
              style={{
                flex: 1, border: 'none', outline: 'none', background: 'transparent',
                fontSize: 11, padding: '3px 8px', color: '#111',
              }}
              placeholder="Saisir…"
            />
            <button
              onClick={confirm}
              title="Valider"
              style={{
                flexShrink: 0, border: 'none', background: 'none', cursor: 'pointer',
                padding: '0 8px', color: '#7c3aed', fontSize: 14, fontWeight: 700,
              }}
            >✓</button>
          </>
        ) : (
          <span style={{ padding: '3px 8px', fontSize: 11, color: value ? '#111' : '#bbb', fontStyle: value ? 'normal' : 'italic' }}>
            {value || 'Cliquer pour saisir'}
          </span>
        )}
      </div>
    </div>
  );
}

/* ── Formulaire d'une ligne (plateforme × investisseur) ── */
function Cerfa2561Form({ ligne, index, total }) {
  const flatTax   = ligne.domiciliation === 'FR' && ligne.fiscalite === 'flat_tax';
  const use2TR    = ligne.type_produit_fiscal === '2TR';
  const hasPertes = ligne.case_2TY > 0;

  const [taxDetails, setTaxDetails] = useState(null);

  useEffect(() => {
    api.get(`/plateforme-tax/${ligne.plateforme_id}/${ligne.annee}`)
      .then(setTaxDetails)
      .catch(() => setTaxDetails({ raison_sociale: ligne.plateforme_nom, siret_n: null, siret_n1: null }));
  }, [ligne.plateforme_id, ligne.annee]); // eslint-disable-line

  const save = (field) => (val) => {
    if (!taxDetails) return;
    const updated = { ...taxDetails, [field]: val };
    setTaxDetails(updated);
    api.patch(`/plateforme-tax/${taxDetails.id}`, { [field]: val });
  };

  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      maxWidth: 900, margin: '0 auto 40px',
      border: '2px solid #5b21b6',
      pageBreakAfter: index < total - 1 ? 'always' : 'auto',
      colorScheme: 'light',
      background: '#fff',
      color: '#111',
    }}>
      {/* En-tête */}
      <div style={{ background: '#5b21b6', color: '#fff', padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.05em' }}>CERFA N°2561 — N°11428*27</div>
          <div style={{ fontSize: 11, marginTop: 2, opacity: .85 }}>Déclaration récapitulative des opérations sur valeurs mobilières et revenus de capitaux mobiliers</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 22, fontWeight: 700 }}>{ligne.annee}</div>
          <div style={{ fontSize: 10, opacity: .8 }}>Simulation — non officielle</div>
        </div>
      </div>

      <div style={{ padding: 10 }}>
        {/* Avertissement */}
        <div style={{ background: '#fff8e1', border: '1px solid #f59e0b', borderRadius: 4, padding: '6px 10px', fontSize: 10, color: '#92400e', marginBottom: 10 }}>
          ⚠ Ce document est une simulation générée par votre outil de suivi. Il ne remplace pas le formulaire officiel émis par la plateforme.
          Vérifiez les informations auprès de {ligne.plateforme_nom} avant toute déclaration.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {/* Colonne gauche */}
          <div>
            <SectionTitle>Désignation du payeur (plateforme)</SectionTitle>
            <EditableFieldRow label="Raison sociale" code="ZM"
              value={taxDetails?.raison_sociale ?? ligne.plateforme_nom}
              onSave={save('raison_sociale')} />
            <EditableFieldRow label={`N° SIRET au 31-12-${Number(ligne.annee) - 1}`} code="ZT"
              value={taxDetails?.siret_n1 ?? null}
              onSave={save('siret_n1')} />
            <EditableFieldRow label={`N° SIRET au 31-12-${ligne.annee}`} code="ZS"
              value={taxDetails?.siret_n ?? null}
              onSave={save('siret_n')} />

            <SectionTitle>Désignation du bénéficiaire (investisseur)</SectionTitle>
            <FieldRow label="Nom de famille" code="ZC" value={ligne.investisseur_nom} />
            <FieldRow label="Prénoms" code="ZD" value={ligne.investisseur_prenom} />
          </div>

          {/* Colonne droite — infos générales */}
          <div>
            <SectionTitle>Informations générales</SectionTitle>
            <FieldRow label="Période de référence" code="AQ" value={`0101 – 1231`} />
            <FieldRow label="Année fiscale" code="—" value={ligne.annee} />

            <SectionTitle>Récapitulatif fiscal</SectionTitle>
            <div style={{ border: '1px solid #aaa', padding: '6px 8px', background: '#f8faff', fontSize: 11 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                <span>Intérêts bruts</span><strong>{fmtEURDec(ligne.interets_bruts)} €</strong>
              </div>
              {flatTax && <>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3, color: '#dc2626' }}>
                  <span>− Prélèvements sociaux</span><span>−{fmtEURDec(ligne.prelev_sociaux)} €</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3, color: '#dc2626' }}>
                  <span>− PFNL (12,8%)</span><span>−{fmtEURDec(ligne.prelev_forfaitaire)} €</span>
                </div>
              </>}
              <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid #ccc', paddingTop: 3, fontWeight: 700 }}>
                <span>Intérêts nets</span><span>{fmtEURDec(ligne.interets_nets)} €</span>
              </div>
              <div style={{ marginTop: 4, fontSize: 10, color: '#666' }}>
                {flatTax
                  ? '✓ Plateforme française — PS et PFNL déjà prélevés à la source'
                  : '○ Plateforme étrangère — PS non prélevés, à régulariser'}
              </div>
            </div>
          </div>
        </div>

        {/* Cases fiscales */}
        <SectionTitle>Cases à remplir sur le formulaire 2561</SectionTitle>

        {/* Section produits — 2TT ou 2TR selon paramétrage plateforme */}
        {use2TR ? (
          <>
            <div style={{ background: '#ede9fe', padding: '4px 8px', fontSize: 10, fontWeight: 700, color: '#6d28d9', borderBottom: '1px solid #aaa', marginTop: 0 }}>
              PRODUITS DE PLACEMENT À REVENU FIXE
            </div>
            <Cell
              label="Gains — produits de placement à revenu fixe"
              code2561="AR" code2042="2TR" value={ligne.case_2TR} filled={ligne.case_2TR > 0}
            />
          </>
        ) : (
          <>
            <div style={{ background: '#ede9fe', padding: '4px 8px', fontSize: 10, fontWeight: 700, color: '#6d28d9', borderBottom: '1px solid #aaa', marginTop: 0 }}>
              PRODUITS DES MINIBONS ET DES PRÊTS DANS LE CADRE DU FINANCEMENT PARTICIPATIF
            </div>
            <Cell
              label="Produits des prêts dans le cadre du financement participatif"
              code2561="KR" code2042="2TT" value={ligne.case_2TT} filled={ligne.case_2TT > 0}
            />
          </>
        )}
        {use2TR ? (
          <Cell
            label="Pertes — produits de placement à revenu fixe"
            code2561="AS" code2042={null} value={ligne.case_2TY} filled={ligne.case_2TY > 0}
            noReport
          />
        ) : (
          <Cell
            label="Pertes sur prêts dans le cadre du financement participatif"
            code2561="KS" code2042="2TY" value={ligne.case_2TY} filled={ligne.case_2TY > 0}
          />
        )}

        {/* Section 2BH — si PS ont été prélevés */}
        {ligne.case_2BH > 0 && <>
          <div style={{ background: '#ede9fe', padding: '4px 8px', fontSize: 10, fontWeight: 700, color: '#5b21b6', borderBottom: '1px solid #aaa', marginTop: 6 }}>
            PRODUITS POUR LESQUELS LES PRÉLÈVEMENTS SOCIAUX ONT DÉJÀ ÉTÉ APPLIQUÉS
          </div>
          <Cell
            label="Produits susceptibles d'ouvrir droit à CSG déductible en cas d'option pour le barème progressif"
            code2561="DQ" code2042="2BH" value={ligne.case_2BH} filled={ligne.case_2BH > 0}
          />
        </>}

        {/* Section 2CK — flat-tax FR uniquement */}
        {flatTax && ligne.case_2CK > 0 && <>
          <div style={{ background: '#fef9c3', padding: '4px 8px', fontSize: 10, fontWeight: 700, color: '#854d0e', borderBottom: '1px solid #aaa', marginTop: 6 }}>
            CRÉDIT D'IMPÔT PRÉLÈVEMENT
          </div>
          <Cell
            label="Crédit d'impôt prélèvement — PFNL déjà versé (12,8%)"
            code2561="AD" code2042="2CK" value={ligne.case_2CK} filled={ligne.case_2CK > 0}
          />
        </>}

        {/* Nombre d'opérations — cliquable */}
        <RembDetail ligne={ligne} />
      </div>
    </div>
  );
}

/* ── Panneau remboursements dépliable ── */
function RembDetail({ ligne }) {
  const [open, setOpen]     = useState(false);
  const [rows, setRows]     = useState(null);
  const [loading, setLoading] = useState(false);
  const { activeView }      = useInvestisseur();

  const load = () => {
    if (rows !== null) { setOpen(o => !o); return; }
    setLoading(true);
    const params = {
      annee:          ligne.annee,
      plateforme_id:  ligne.plateforme_id,
      investisseur_id: ligne.investisseur_id,
      ...(activeView === 'all' ? { scope: 'all' } : {}),
    };
    api.get('/taxreport/cerfa2561/remboursements', params)
      .then(data => { setRows(data); setOpen(true); })
      .finally(() => setLoading(false));
  };

  const fmtDate = d => d ? d.slice(0, 10) : '—';

  return (
    <>
      <div
        onClick={load}
        style={{
          marginTop: 8, fontSize: 10, textAlign: 'right',
          color: '#7c3aed', cursor: 'pointer', userSelect: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 4,
        }}
      >
        {loading ? 'Chargement…' : (
          <>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
              strokeLinecap="round" strokeLinejoin="round"
              style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s', flexShrink: 0 }}>
              <polyline points="6 9 12 15 18 9"/>
            </svg>
            {ligne.nb_remboursements} remboursement{ligne.nb_remboursements > 1 ? 's' : ''} pris en compte
          </>
        )}
      </div>

      {open && rows && (
        <div className="no-print" style={{ marginTop: 6, border: '1px solid #ccc', borderRadius: 4, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 10 }}>
            <thead>
              <tr style={{ background: '#5b21b6' }}>
                {[['Date','left'],['Projet','left'],['Capital','right'],['Intérêts bruts','right'],['Prélèv. sociaux','right'],['PFNL (2CK)','right'],['Intérêts nets','right']].map(([label, align]) => (
                  <th key={label} style={{ padding: '4px 8px', textAlign: align, fontWeight: 600, color: '#fff' }}>{label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.id} style={{ background: i % 2 === 0 ? '#fff' : '#f8faff', borderBottom: '1px solid #e5e7eb' }}>
                  <td style={{ padding: '3px 8px', whiteSpace: 'nowrap' }}>{fmtDate(r.date_remb)}</td>
                  <td style={{ padding: '3px 8px', color: '#444' }}>{r.nom_projet}</td>
                  <td style={{ padding: '3px 8px', textAlign: 'right' }}>{fmtEURDec(r.capital)} €</td>
                  <td style={{ padding: '3px 8px', textAlign: 'right', fontWeight: 600 }}>{fmtEURDec(r.interets_bruts)} €</td>
                  <td style={{ padding: '3px 8px', textAlign: 'right', color: '#dc2626' }}>{r.prelev_sociaux ? `−${fmtEURDec(r.prelev_sociaux)} €` : '—'}</td>
                  <td style={{ padding: '3px 8px', textAlign: 'right', color: '#dc2626' }}>{r.prelev_forfaitaire ? `−${fmtEURDec(r.prelev_forfaitaire)} €` : '—'}</td>
                  <td style={{ padding: '3px 8px', textAlign: 'right', fontWeight: 600, color: '#14532d' }}>{fmtEURDec(r.interets_nets)} €</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr style={{ background: '#f5f3ff', fontWeight: 700, borderTop: '2px solid #5b21b6' }}>
                <td colSpan={3} style={{ padding: '4px 8px', fontSize: 10 }}>Total</td>
                <td style={{ padding: '4px 8px', textAlign: 'right' }}>{fmtEURDec(rows.reduce((s, r) => s + r.interets_bruts, 0))} €</td>
                <td style={{ padding: '4px 8px', textAlign: 'right', color: '#dc2626' }}>−{fmtEURDec(rows.reduce((s, r) => s + r.prelev_sociaux, 0))} €</td>
                <td style={{ padding: '4px 8px', textAlign: 'right', color: '#dc2626' }}>−{fmtEURDec(rows.reduce((s, r) => s + r.prelev_forfaitaire, 0))} €</td>
                <td style={{ padding: '4px 8px', textAlign: 'right', color: '#14532d' }}>{fmtEURDec(rows.reduce((s, r) => s + r.interets_nets, 0))} €</td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </>
  );
}


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'];
const r2 = v => Math.round((v ?? 0) * 100) / 100;

/* ── Report 2042 pour plateformes françaises ── */
function Report2042Block2561({ lignes }) {
  const frLignes = (lignes ?? []).filter(l => l.domiciliation === 'FR');
  if (frLignes.length === 0) return (
    <div className="card"><p className="text-muted" style={{ margin: 0 }}>Aucune plateforme française avec des remboursements.</p></div>
  );

  const total2TT = frLignes.reduce((s, l) => s + (l.case_2TT ?? 0), 0);
  const total2TR = frLignes.reduce((s, l) => s + (l.case_2TR ?? 0), 0);
  const total2BH = frLignes.reduce((s, l) => s + (l.case_2BH ?? 0), 0);
  const total2CK = frLignes.reduce((s, l) => s + (l.case_2CK ?? 0), 0);
  const total2TY = frLignes.reduce((s, l) => s + (l.case_2TY ?? 0), 0);

  const fmt = v => Number(v).toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
  const fullName = l => { const n = l.investisseur_nom ?? ''; const p = l.investisseur_prenom ?? ''; return p && n.startsWith(p) ? n : [p, n].filter(Boolean).join(' '); };

  const Case2042 = ({ code, label, note, value, breakdown }) => {
    if (!value) return null;
    return (
      <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)' }}>{fmt(value)} €</div>
        </div>
        {breakdown && breakdown.length > 0 && (
          <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 }}>{fmt(p.val)} €</span>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  const annee = frLignes[0]?.annee;

  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="2TT"
          label="Produits des prêts participatifs (financement participatif)"
          note="Intérêts bruts — plateformes françaises avec case KR (2TT)"
          value={total2TT}
          breakdown={frLignes.filter(l => l.case_2TT > 0).map(l => ({ nom: `${l.plateforme_nom} — ${fullName(l)}`, val: l.case_2TT }))}
        />
        <Case2042
          code="2TR"
          label="Produits de placement à revenu fixe"
          note="Intérêts bruts — plateformes françaises avec case AR (2TR)"
          value={total2TR}
          breakdown={frLignes.filter(l => l.case_2TR > 0).map(l => ({ nom: `${l.plateforme_nom} — ${fullName(l)}`, val: l.case_2TR }))}
        />
        <Case2042
          code="2BH"
          label="Produits pour lesquels les prélèvements sociaux ont déjà été appliqués"
          note="Même montant que 2TT/2TR — évite la double imposition aux prélèvements sociaux"
          value={total2BH}
          breakdown={frLignes.filter(l => l.case_2BH > 0).map(l => ({ nom: `${l.plateforme_nom} — ${fullName(l)}`, val: l.case_2BH }))}
        />
        <Case2042
          code="2CK"
          label="Crédit d'impôt — PFNL déjà versé (12,8 %)"
          note="Prélèvement forfaitaire non libératoire déjà retenu à la source — s'impute sur l'IR définitif"
          value={total2CK}
          breakdown={frLignes.filter(l => l.case_2CK > 0).map(l => ({ nom: `${l.plateforme_nom} — ${fullName(l)}`, val: l.case_2CK }))}
        />
        <Case2042
          code="2TY"
          label="Pertes en capital sur prêts participatifs"
          note="Capital non remboursé sur prêts en défaut ou clôturés"
          value={total2TY}
          breakdown={frLignes.filter(l => l.case_2TY > 0).map(l => ({ nom: `${l.plateforme_nom} — ${fullName(l)}`, val: l.case_2TY }))}
        />
      </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 PFU sur les plateformes françaises ?</strong>
        Les plateformes françaises soumises à la Flat Tax retiennent à la source les prélèvements sociaux (17,2 %) et l'impôt forfaitaire (12,8 %).
        Le montant 2CK correspond à l'acompte IR déjà versé — il s'impute sur l'impôt définitif calculé lors de votre 2042.
        Le montant 2BH est déclaré en sus de 2TT/2TR pour neutraliser les prélèvements sociaux déjà prélevés.
      </div>
    </div>
  );
}

/* ── Composant principal ── */
export default function Cerfa2561Preview({ annee, activeView, onClose, inline = false, expanded = false, onToggleExpand }) {
  const { activeId } = useInvestisseur();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [filterPlat, setFilterPlat] = useState('all');
  const [view, setView] = useState('matrice');
  const contentRef = useRef(null);

  const handlePrint = () => {
    const content = contentRef.current;
    if (!content) return;
    const platName = data?.lignes?.find(l => `${l.plateforme_id}_${l.investisseur_id}` === filterPlat)?.plateforme_nom ?? 'Plateforme';
    const printWin = window.open('', '_blank', 'width=900,height=700');
    printWin.document.write(`<!DOCTYPE html><html><head>
      <meta charset="utf-8"/>
      <title>CERFA 2561 — ${annee} — ${platName}</title>
      <style>
        * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: white; color: #111; }
        @media print { body { padding: 0; } }
        .no-print { display: none !important; }
      </style>
    </head><body>${content.innerHTML}</body></html>`);
    printWin.document.close();
    printWin.focus();
    setTimeout(() => { printWin.print(); printWin.close(); }, 400);
  };

  useEffect(() => {
    const scopeParams = activeView === 'all' ? { scope: 'all' } : {};
    api.get('/taxreport/cerfa2561', { annee, ...scopeParams })
      .then(d => {
        setData(d);
        const firstFr = d.lignes.find(l => l.domiciliation === 'FR') ?? d.lignes[0];
        if (firstFr) setFilterPlat(`${firstFr.plateforme_id}_${firstFr.investisseur_id}`);
      })
      .finally(() => setLoading(false));
  }, [annee, activeView]); // eslint-disable-line

  const frLignes = (data?.lignes ?? []).filter(l => l.domiciliation === 'FR');

  /* ── Tableau mensuel ── */
  const matriceView = (
    <div style={{ overflowX: 'auto' }}>
      {loading && <div className="card text-muted">Chargement…</div>}
      {!loading && frLignes.length === 0 && (
        <div className="card"><p className="text-muted" style={{ margin: 0 }}>Aucune plateforme française avec des remboursements pour {annee}.</p></div>
      )}
      {!loading && frLignes.length > 0 && (
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <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 françaises</span>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--fs-xs)' }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                <th style={{ padding: '8px 12px', textAlign: 'left', fontWeight: 600, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Plateforme — Détenteur</th>
                {MOIS_LABELS.map(m => (
                  <th key={m} style={{ padding: '6px 8px', textAlign: 'right', fontWeight: 600, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{m}</th>
                ))}
                <th style={{ padding: '6px 12px', textAlign: 'right', fontWeight: 600, color: 'var(--text-muted)' }}>Total</th>
              </tr>
            </thead>
            <tbody>
              {frLignes.map((l, idx) => {
                const total = r2(Object.values(l.mois ?? {}).reduce((s, m) => s + (m.interets_bruts ?? 0), 0));
                return (
                  <tr key={`${l.plateforme_id}_${l.investisseur_id}`} style={{ borderBottom: '1px solid var(--border)', background: 'transparent' }}>
                    <td style={{ padding: '6px 12px', fontWeight: 500, whiteSpace: 'nowrap' }}>
                      {l.plateforme_nom}
                      <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginLeft: 6 }}>— {(() => { const n = l.investisseur_nom ?? ''; const p = l.investisseur_prenom ?? ''; return p && n.startsWith(p) ? n : [p, n].filter(Boolean).join(' '); })()}</span>
                    </td>
                    {MOIS_NUMS.map(m => {
                      const v = l.mois?.[m]?.interets_bruts ?? 0;
                      return (
                        <td key={m} style={{ padding: '6px 8px', textAlign: 'right', color: v > 0 ? 'var(--text)' : 'var(--text-muted)' }}>
                          {v > 0 ? v.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €' : '—'}
                        </td>
                      );
                    })}
                    <td style={{ padding: '6px 12px', textAlign: 'right', fontWeight: 700 }}>
                      {total > 0 ? total.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €' : '—'}
                    </td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              {/* Total intérêt brut */}
              <tr style={{ borderTop: '2px solid var(--border)', background: 'var(--surface-2)' }}>
                <td style={{ padding: '6px 12px', fontWeight: 700 }}>Total intérêt brut</td>
                {MOIS_NUMS.map(m => {
                  const v = r2(frLignes.reduce((s, l) => s + (l.mois?.[m]?.interets_bruts ?? 0), 0));
                  return (
                    <td key={m} style={{ padding: '6px 8px', textAlign: 'right', fontWeight: 700, color: v > 0 ? 'var(--text)' : 'var(--text-muted)' }}>
                      {v > 0 ? v.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '—'}
                    </td>
                  );
                })}
                <td style={{ padding: '6px 12px', textAlign: 'right', fontWeight: 700 }}>
                  {r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + (m.interets_bruts ?? 0), 0)), 0)).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €
                </td>
              </tr>
              {/* Taux prélevé */}
              <tr style={{ background: 'transparent' }}>
                <td style={{ padding: '4px 12px', color: 'var(--text-muted)', fontSize: 'var(--fs-xs)' }}>
                  Taux total prélevé ({(() => {
                    const totalBrut = r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + (m.interets_bruts ?? 0), 0)), 0));
                    const totalPrelev = r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + ((m.prelev_sociaux ?? 0) + (m.prelev_forfaitaire ?? 0)), 0)), 0));
                    return totalBrut > 0 ? (totalPrelev / totalBrut * 100).toFixed(1) : '—';
                  })()} %)
                </td>
                {MOIS_NUMS.map(m => {
                  const brut = r2(frLignes.reduce((s, l) => s + (l.mois?.[m]?.interets_bruts ?? 0), 0));
                  const prelev = r2(frLignes.reduce((s, l) => s + ((l.mois?.[m]?.prelev_sociaux ?? 0) + (l.mois?.[m]?.prelev_forfaitaire ?? 0)), 0));
                  const taux = brut > 0 ? (prelev / brut * 100).toFixed(1) + ' %' : '—';
                  return (
                    <td key={m} style={{ padding: '4px 8px', textAlign: 'right', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
                      {taux}
                    </td>
                  );
                })}
                <td style={{ padding: '4px 12px', textAlign: 'right', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
                  {(() => {
                    const totalBrut = r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + (m.interets_bruts ?? 0), 0)), 0));
                    const totalPrelev = r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + ((m.prelev_sociaux ?? 0) + (m.prelev_forfaitaire ?? 0)), 0)), 0));
                    return totalBrut > 0 ? (totalPrelev / totalBrut * 100).toFixed(1) + ' %' : '—';
                  })()}
                </td>
              </tr>
              {/* Total intérêt net */}
              <tr style={{ background: 'rgba(22,163,74,0.06)', borderTop: '1px solid var(--border)' }}>
                <td style={{ padding: '6px 12px', fontWeight: 700, color: 'var(--success)' }}>Total intérêt net</td>
                {MOIS_NUMS.map(m => {
                  const net = r2(frLignes.reduce((s, l) => {
                    const mo = l.mois?.[m];
                    return s + ((mo?.interets_bruts ?? 0) - (mo?.prelev_sociaux ?? 0) - (mo?.prelev_forfaitaire ?? 0));
                  }, 0));
                  return (
                    <td key={m} style={{ padding: '6px 8px', textAlign: 'right', fontWeight: 700, color: net > 0 ? 'var(--success)' : 'var(--text-muted)' }}>
                      {net > 0 ? net.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '—'}
                    </td>
                  );
                })}
                <td style={{ padding: '6px 12px', textAlign: 'right', fontWeight: 700, color: 'var(--success)' }}>
                  {r2(frLignes.reduce((s, l) => s + r2(Object.values(l.mois ?? {}).reduce((ss, m) => ss + ((m.interets_bruts ?? 0) - (m.prelev_sociaux ?? 0) - (m.prelev_forfaitaire ?? 0)), 0)), 0)).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €
                </td>
              </tr>
              {/* Note de bas de tableau */}
              <tr style={{ background: 'var(--surface-2)' }}>
                <td colSpan={14} style={{ padding: '8px 12px', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', borderTop: '1px solid var(--border)' }}>
                  Taux {annee} : PFO 12,8 % + CSG 10,6 % + CRDS 0,5 % + Solidarité 7,5 % = 31,4 % &nbsp;·&nbsp; Prélèvements effectués à la source par les plateformes &nbsp;·&nbsp; Report automatique sur la déclaration de revenus 2042
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </div>
  );

  /* ── Barre outils (vue cerfa) ── */
  const toolbar = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
      {data && frLignes.length > 0 && (
        <select
          value={filterPlat}
          onChange={e => setFilterPlat(e.target.value)}
          style={{ fontSize: 'var(--fs-sm)', padding: '4px 8px', width: 240 }}
        >
          {frLignes.map(l => (
            <option key={`${l.plateforme_id}_${l.investisseur_id}`} value={`${l.plateforme_id}_${l.investisseur_id}`}>
              {l.plateforme_nom} — {(() => { const n = l.investisseur_nom ?? ''; const p = l.investisseur_prenom ?? ''; return p && n.startsWith(p) ? n : [p, n].filter(Boolean).join(' '); })()}
            </option>
          ))}
        </select>
      )}
      <div style={{ flex: 1 }} />
      {inline && onToggleExpand && (
        <button className="icon-btn" onClick={() => onToggleExpand()} title={expanded ? 'Réduire' : 'Agrandir'}>
          {expanded ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/>
              <line x1="10" y1="14" x2="3" y2="21"/><line x1="21" y1="3" x2="14" y2="10"/>
            </svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
              <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
            </svg>
          )}
        </button>
      )}
      <button className="icon-btn" onClick={handlePrint} disabled={loading || !frLignes.length} title="Imprimer / Enregistrer en PDF">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6 9 6 2 18 2 18 9"/>
          <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
          <rect x="6" y="14" width="12" height="8"/>
        </svg>
      </button>
      {!inline && (
        <button className="icon-btn" onClick={onClose} title="Fermer">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      )}
    </div>
  );

  /* ── Vue cerfa ── */
  const cerfaView = (
    <div ref={contentRef}>
      {toolbar}
      {loading && <div style={{ textAlign: 'center', color: '#666', paddingTop: 20 }}>Chargement…</div>}
      {!loading && frLignes.length === 0 && (
        <div style={{ textAlign: 'center', color: '#666', paddingTop: 20 }}>Aucune plateforme française avec des remboursements pour {annee}.</div>
      )}
      {!loading && data?.lignes
        ?.filter(l => `${l.plateforme_id}_${l.investisseur_id}` === filterPlat)
        .map((ligne, i, arr) => (
          <Cerfa2561Form key={`${ligne.plateforme_id}_${ligne.investisseur_id}`} ligne={ligne} index={i} total={arr.length} />
        ))}
    </div>
  );

  if (inline) {
    return (
      <div className="card">
        <div style={{ display: 'flex', gap: 0, alignItems: 'flex-start' }}>
          {/* Sidebar nav */}
          <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')}>
              <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 2561
            </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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
              Report 2042
            </button>
          </nav>

          {/* Contenu */}
          <div style={{ flex: 1, minWidth: 0 }}>
            {view === 'matrice'    && matriceView}
            {view === 'cerfa'      && cerfaView}
            {view === 'report2042' && <Report2042Block2561 lignes={data?.lignes} />}
          </div>
        </div>
      </div>
    );
  }

  /* ── Vue modale (non-inline) ── */
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.6)', display: 'flex', flexDirection: 'column' }}>
      <div className="no-print" style={{ background: 'var(--surface)', borderBottom: '1px solid var(--border)', padding: '8px 16px', flexShrink: 0 }}>
        {toolbar}
      </div>
      <div ref={contentRef} style={{ flex: 1, overflowY: 'auto', padding: '24px 20px', background: '#e5e7eb' }}>
        {loading && <div style={{ textAlign: 'center', color: '#666', paddingTop: 40 }}>Chargement…</div>}
        {!loading && data?.lignes?.length === 0 && (
          <div style={{ textAlign: 'center', color: '#666', paddingTop: 40 }}>Aucun remboursement trouvé pour {annee}.</div>
        )}
        {!loading && data?.lignes
          ?.filter(l => `${l.plateforme_id}_${l.investisseur_id}` === filterPlat)
          .map((ligne, i, arr) => (
            <Cerfa2561Form key={`${ligne.plateforme_id}_${ligne.investisseur_id}`} ligne={ligne} index={i} total={arr.length} />
          ))}
      </div>
    </div>
  );
}
