import { useEffect, useMemo, useState } from 'react';
import { api } from '../api.js';
import { useInteretsChart } from '../context/InteretsChartContext.jsx';
import { fmtEUR, fmtDate } from '../utils/format.js';
import Modal from './Modal.jsx';

const MOIS_LONG = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];

function hexToRgba(hex, a) {
  if (!hex || hex.length < 7) return `rgba(79,168,232,${a})`;
  const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
  return `rgba(${r},${g},${b},${a})`;
}

const round2 = v => Math.round(v * 100) / 100;

/**
 * DrillCellPanel
 *
 * Props :
 *   cell            { platId, platNom, annee, mois, moisLabel } | null
 *                   platId peut être null → toutes les plateformes
 *   onClose         () => void  (masqué si alwaysOpen=true)
 *   alwaysOpen      bool        — cache le bouton Fermer, ajuste le style
 *   pfuRates        []
 *   activeView      'single'|'all'
 *   activeId        number|null
 *   plateformes     []          — pour le sélecteur (optionnel)
 *   investissements []          — pour le calcul bulk (optionnel)
 *   onBulkDone      () => void  — callback après validation en masse
 */
export default function DrillCellPanel({
  cell, onClose, alwaysOpen = false,
  pfuRates, activeView, activeId,
  onEditRecu, onEditProjet, refreshKey,
  investissements, plateformes, onBulkDone,
}) {
  const {
    inclureInterets, setInclureInterets,
    inclureCapital,  setInclureCapital,
    inclureCashback, setInclureCashback,
    netMode,
    showActual, showProjected,
    chartInterets, chartCapital, chartCashback,
  } = useInteretsChart();

  const [data,         setData]         = useState(null);
  const [loading,      setLoading]      = useState(false);
  /* filterPlatId : '' = toutes, sinon l'id (string) de la plateforme sélectionnée dans le dropdown */
  const [filterPlatId, setFilterPlatId] = useState('');
  const [showRecus,    setShowRecus]    = useState(showActual);
  const [showProjetes, setShowProjetes] = useState(showProjected);

  /* ── Bulk validation ── */
  const [bulkModal,      setBulkModal]      = useState(false);
  const [bulkItems,      setBulkItems]      = useState([]);
  const [bulkProcessing, setBulkProcessing] = useState(false);
  const [bulkProgress,   setBulkProgress]   = useState(0);
  const [bulkDone,       setBulkDone]       = useState(false);

  /* ── Reset filtres quand la cellule change ── */
  useEffect(() => {
    if (!cell) { setData(null); return; }
    setShowRecus(showActual);
    setShowProjetes(showProjected);
    /* Quand une cellule spécifique est cliquée, pré-sélectionner sa plateforme */
    setFilterPlatId(cell.platId ? String(cell.platId) : '');
  }, [cell?.platId, cell?.annee, cell?.mois]);

  /* ── Fetch quand cellule OU filterPlatId change ── */
  useEffect(() => {
    if (!cell) { setData(null); return; }
    setLoading(true);
    setData(null);
    const params = {
      annee: cell.annee,
      mois:  cell.mois,
      ...(filterPlatId ? { plateforme_id: filterPlatId } : {}),
      ...(activeView === 'all' ? { scope: 'all' } : {}),
    };
    api.get('/dashboard/detail-cellule', params)
      .then(d => setData(d))
      .catch(() => setData({ recus: [], projetes: [] }))
      .finally(() => setLoading(false));
  }, [cell?.annee, cell?.mois, filterPlatId, activeView, activeId, refreshKey]);

  /* ── Taux PFU pour l'année de la cellule ── */
  const pfuReduction = useMemo(() => {
    if (!pfuRates?.length || !cell) return 0;
    const r = pfuRates.find(r => r.annee === cell.annee)
      ?? pfuRates.reduce((best, r) => r.annee > best.annee ? r : best, pfuRates[0]);
    return (r.prelev_sociaux + r.impot_revenu) / 100;
  }, [pfuRates, cell]);

  /* ── Données filtrées (la plateforme est gérée côté fetch) ── */
  const recus = useMemo(() => {
    if (!data) return [];
    return [...data.recus].sort((a, b) => (b.date_remb || '').localeCompare(a.date_remb || ''));
  }, [data]);

  const projetes = useMemo(() => {
    if (!data) return [];
    return [...data.projetes].sort((a, b) => (a.date_prevue || '').localeCompare(b.date_prevue || ''));
  }, [data]);

  if (!cell) return null;

  /* ── Afficher la colonne Plateforme quand on est en mode "toutes" ── */
  const showPlatCol = !filterPlatId;
  const multiDetenteur = plateformes && new Set(plateformes.map(p => p.investisseur_id)).size > 1;

  /* ── Calcul valeur ligne reçue ── */
  const recuRowValue = (r) => {
    let v = 0;
    if (inclureInterets) v += netMode ? r.interets_nets : r.interets_bruts;
    if (inclureCashback) v += r.cashback ?? 0;
    if (inclureCapital)  v += r.capital ?? 0;
    return v;
  };

  /* ── Calcul valeur ligne projetée ── */
  const projRowValue = (p) => {
    let v = 0;
    if (inclureInterets) v += netMode ? p.interets_prevus * (1 - pfuReduction) : p.interets_prevus;
    if (inclureCapital)  v += p.capital_prevu ?? 0;
    return v;
  };

  /* ── Totaux ── */
  const totalRecus    = recus.reduce((s, r)  => s + recuRowValue(r), 0);
  const totalProjetes = projetes.reduce((s, p) => s + projRowValue(p), 0);
  const grandTotal    = (showRecus ? totalRecus : 0) + (showProjetes ? totalProjetes : 0);

  /* ── Colonnes dynamiques ── */
  const cols = [
    inclureInterets && { key: 'interets', label: netMode ? 'Intérêts nets' : 'Intérêts bruts', color: chartInterets },
    inclureCapital  && { key: 'capital',  label: 'Capital',         color: chartCapital  },
    inclureCashback && { key: 'cashback', label: 'Cashback',        color: chartCashback },
  ].filter(Boolean);

  /* Date + Plateforme(opt) + Projet + Détenteur + cols + Total */
  const colCount = 3 + (showPlatCol ? 1 : 0) + cols.length + 1;

  /* Titre du header */
  const headerTitle = filterPlatId
    ? `${plateformes?.find(p => String(p.id) === filterPlatId)?.nom ?? 'Plateforme'} — ${cell.moisLabel} ${cell.annee}`
    : `Toutes les plateformes — ${cell.moisLabel} ${cell.annee}`;

  /* ── Bulk : construction des payloads ── */
  const openBulkModal = () => {
    if (!projetes.length) return;
    const items = projetes.map(p => {
      const inv  = investissements?.find(i => i.id === p.investissement_id);
      const plat = inv ? plateformes?.find(pl => pl.id === inv.plateforme_id) : null;
      const bruts   = p.interets_prevus || 0;
      const year    = p.date_prevue ? Number(p.date_prevue.slice(0, 4)) : cell.annee;
      const rates   = pfuRates?.find(r => r.annee === year)
        ?? (pfuRates?.length ? pfuRates.reduce((best, r) => r.annee > best.annee ? r : best, pfuRates[0]) : null);
      const methode = plat && plat.methode_remboursement !== 'choix_investisseur'
        ? plat.methode_remboursement
        : (inv?.methode_remboursement || 'portefeuille');
      const hasLocalTax     = plat?.fiscalite === 'avec_fiscalite_locale' && plat?.taux_fiscalite_locale;
      const taxe_locale     = hasLocalTax ? round2(bruts * plat.taux_fiscalite_locale / 100) : 0;
      const brutsApresLocal = hasLocalTax ? round2(bruts - taxe_locale) : bruts;
      return {
        _label:    p.nom_projet,
        _plat:     p.plateforme_nom,
        _date:     p.date_prevue,
        _capital:  p.capital_prevu || 0,
        _interets: bruts,
        _total:    (p.capital_prevu || 0) + bruts,
        investissement_id:          p.investissement_id,
        date_remb:                  p.date_prevue,
        capital:                    p.capital_prevu || 0,
        cashback:                   0,
        interets_bruts_avant_local: hasLocalTax ? bruts : 0,
        taxe_locale,
        interets_bruts:             brutsApresLocal,
        prelev_sociaux:             rates ? round2(brutsApresLocal * rates.prelev_sociaux / 100) : 0,
        prelev_forfaitaire:         rates ? round2(brutsApresLocal * rates.impot_revenu   / 100) : 0,
        statut:                     'paye',
        notes:                      '',
        methode_remboursement:      methode,
        compte_id:                  methode === 'compte_courant' ? (inv?.compte_id || '') : '',
      };
    });
    setBulkItems(items);
    setBulkProgress(0);
    setBulkDone(false);
    setBulkProcessing(false);
    setBulkModal(true);
  };

  const runBulk = async () => {
    setBulkProcessing(true);
    let done = 0;
    for (const item of bulkItems) {
      const { _label, _plat, _date, _capital, _interets, _total, ...payload } = item;
      try { await api.post('/remboursements', payload); } catch (e) { /* continuer */ }
      done++;
      setBulkProgress(done);
    }
    setBulkProcessing(false);
    setBulkDone(true);
    if (onBulkDone) onBulkDone();
  };

  const closeBulkModal = () => {
    setBulkModal(false);
    setBulkItems([]);
    setBulkProgress(0);
    setBulkDone(false);
    setBulkProcessing(false);
  };

  /* ── Rendu ── */
  return (
    <div style={{
      margin: alwaysOpen ? '0 24px 28px' : '0 24px 28px',
      padding: 0,
      border: '2px solid var(--primary)',
      borderRadius: 10,
      overflow: 'hidden',
      overflowX: 'auto',
      background: 'var(--surface)',
    }}>

      {/* ── Header ── */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px',
        background: 'var(--primary)',
        color: '#fff',
      }}>
        <strong style={{ fontSize: '1rem' }}>{headerTitle}</strong>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {[
            { active: inclureInterets, toggle: () => setInclureInterets(v => !v), label: netMode ? 'Intérêts nets' : 'Intérêts bruts' },
            { active: inclureCapital,  toggle: () => setInclureCapital(v => !v),  label: 'Capital'          },
            { active: inclureCashback, toggle: () => setInclureCashback(v => !v), label: 'Cashback'         },
          ].map(btn => (
            <button key={btn.label} onClick={() => btn.toggle()} style={{
              border: `1px solid ${btn.active ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.3)'}`,
              background: btn.active ? 'rgba(255,255,255,0.2)' : 'transparent',
              borderRadius: 6, padding: '3px 10px',
              fontSize: '0.8rem', fontWeight: btn.active ? 700 : 400,
              color: '#fff', cursor: 'pointer', transition: 'all .15s',
            }}>{btn.label}</button>
          ))}
          {!alwaysOpen && (
            <button onClick={onClose} title="Fermer" style={{
              background: 'rgba(255,255,255,0.2)', border: '1px solid rgba(255,255,255,0.4)',
              borderRadius: 6, padding: '3px 10px', color: '#fff', cursor: 'pointer',
              fontSize: '0.85rem', fontWeight: 700,
            }}>✕</button>
          )}
        </div>
      </div>

      {/* ── Barre filtres ── */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        padding: '10px 16px', borderBottom: '1px solid var(--border)',
        background: 'var(--surface-2)',
      }}>
        {/* Sélecteur plateforme */}
        {plateformes && plateformes.length > 0 && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Plateforme</label>
            <select
              value={filterPlatId}
              onChange={e => setFilterPlatId(e.target.value)}
              style={{ fontSize: 'var(--fs-sm)', padding: '3px 8px', borderRadius: 6,
                border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
              <option value="">Toutes</option>
              {plateformes.map(p => <option key={p.id} value={String(p.id)}>{p.nom}{multiDetenteur && p.investisseur_nom ? ` — ${p.investisseur_nom}` : ''}</option>)}
            </select>
          </div>
        )}

        {/* Toggle Reçus / Projetés */}
        <div style={{ display: 'inline-flex', background: 'var(--surface)', borderRadius: 8, padding: 3, gap: 2, marginLeft: 'auto' }}>
          {[
            { key: 'recus',    label: 'Reçus',    active: showRecus,    toggle: () => setShowRecus(v => !v)    },
            { key: 'projetes', label: 'Projetés', active: showProjetes, toggle: () => setShowProjetes(v => !v) },
          ].map(btn => (
            <button key={btn.key} onClick={() => btn.toggle()} style={{
              border: 'none', cursor: 'pointer', padding: '4px 14px', borderRadius: 6,
              fontSize: 'var(--fs-sm)',
              fontWeight: btn.active ? 600 : 400,
              background: btn.active ? 'var(--primary)' : 'transparent',
              color:      btn.active ? '#fff' : 'var(--text-muted)',
              boxShadow:  btn.active ? '0 1px 3px rgba(0,0,0,0.13)' : 'none',
              transition: 'all .15s',
            }}>{btn.label}</button>
          ))}
        </div>
      </div>

      {/* ── Corps ── */}
      {loading && (
        <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-muted)' }}>Chargement…</div>
      )}

      {!loading && data && (
        <div>
          <table className="drill-table" style={{ width: '100%', minWidth: '100%', fontSize: 'var(--fs-sm)' }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                <th style={thStyle}>Date</th>
                {showPlatCol && <th style={thStyle}>Plateforme</th>}
                <th style={{ ...thStyle, width: "100%" }}>Projet</th>
                <th style={thStyle}>Détenteur</th>
                {cols.map(c => (
                  <th key={c.key} style={{ ...thStyle, ...numStyle, color: c.color }}>{c.label}</th>
                ))}
                <th style={{ ...thStyle, ...numStyle }}>Total ligne</th>
              </tr>
            </thead>

            {/* ── Section Reçus ── */}
            {showRecus && (
              <tbody>
                <tr>
                  <td colSpan={colCount} style={{
                    padding: '6px 12px', fontWeight: 700, fontSize: '0.78rem',
                    background: hexToRgba(chartInterets, 0.07),
                    color: 'var(--text-muted)', letterSpacing: '.04em', textTransform: 'uppercase',
                  }}>
                    Reçus ({recus.length})
                  </td>
                </tr>
                {recus.length === 0 ? (
                  <tr><td colSpan={colCount} style={{ padding: '10px 16px', color: 'var(--text-muted)', fontStyle: 'italic' }}>
                    Aucun remboursement reçu ce mois
                  </td></tr>
                ) : recus.map(r => (
                  <tr key={r.id}
                    style={{ borderBottom: '1px solid var(--border)', cursor: onEditRecu ? 'pointer' : 'default' }}
                    title={onEditRecu ? 'Modifier ce remboursement' : undefined}
                    onClick={() => onEditRecu && onEditRecu(r)}
                  >
                    <td style={tdStyle}>{fmtDate(r.date_remb)}</td>
                    {showPlatCol && <td style={{ ...tdStyle, fontWeight: 500 }}>{r.plateforme_nom || '—'}</td>}
                    <td style={tdStyle}>{r.nom_projet}</td>
                    <td style={{ ...tdStyle, color: 'var(--text-muted)', fontSize: '0.8em' }}>{r.detenteur_nom || '—'}</td>
                    {cols.map(c => {
                      let v;
                      if (c.key === 'interets') v = netMode ? r.interets_nets : r.interets_bruts;
                      else if (c.key === 'capital') v = r.capital ?? 0;
                      else v = r.cashback ?? 0;
                      return <td key={c.key} style={{ ...tdStyle, ...numStyle }}>{fmtEUR(v)}</td>;
                    })}
                    <td style={{ ...tdStyle, ...numStyle, fontWeight: 600 }}>{fmtEUR(recuRowValue(r))}</td>
                  </tr>
                ))}
                {recus.length > 0 && (
                  <tr className="drill-row-fixed" style={{ background: 'var(--surface-2)', fontWeight: 700 }}>
                    <td colSpan={3 + (showPlatCol ? 1 : 0)} style={{ ...tdStyle, color: 'var(--text-muted)', fontSize: '0.8em' }}>
                      Sous-total reçus
                    </td>
                    {cols.map(c => {
                      const sum = recus.reduce((s, r) => {
                        if (c.key === 'interets') return s + (netMode ? r.interets_nets : r.interets_bruts);
                        if (c.key === 'capital')  return s + (r.capital ?? 0);
                        return s + (r.cashback ?? 0);
                      }, 0);
                      return <td key={c.key} style={{ ...tdStyle, ...numStyle }}>{fmtEUR(sum)}</td>;
                    })}
                    <td style={{ ...tdStyle, ...numStyle }}>{fmtEUR(totalRecus)}</td>
                  </tr>
                )}
              </tbody>
            )}

            {/* ── Section Projetés ── */}
            {showProjetes && (
              <tbody>
                <tr>
                  <td colSpan={colCount} style={{
                    padding: '6px 12px', fontWeight: 700, fontSize: '0.78rem',
                    background: 'rgba(148,163,184,0.08)',
                    color: 'var(--text-muted)', letterSpacing: '.04em', textTransform: 'uppercase',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <span>Projetés ({projetes.length})</span>
                      {projetes.length > 0 && (
                        <button
                          onClick={() => openBulkModal()}
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 5,
                            padding: '3px 10px', borderRadius: 5, cursor: 'pointer',
                            fontSize: '0.75rem', fontWeight: 600, letterSpacing: 'normal',
                            textTransform: 'none',
                            border: '1px solid var(--primary)',
                            background: 'var(--primary)', color: '#fff',
                            transition: 'opacity .15s',
                          }}
                          onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
                          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
                        >
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                          </svg>
                          Valider en masse
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
                {projetes.length === 0 ? (
                  <tr><td colSpan={colCount} style={{ padding: '10px 16px', color: 'var(--text-muted)', fontStyle: 'italic' }}>
                    Aucune projection ce mois
                  </td></tr>
                ) : projetes.map(p => (
                  <tr key={p.id}
                    style={{ borderBottom: '1px solid var(--border)', opacity: 0.85, cursor: onEditProjet ? 'pointer' : 'default' }}
                    title={onEditProjet ? 'Saisir ce remboursement' : undefined}
                    onClick={() => onEditProjet && onEditProjet(p)}
                  >
                    <td style={{ ...tdStyle, fontStyle: 'italic', color: 'var(--text-muted)' }}>{fmtDate(p.date_prevue)}</td>
                    {showPlatCol && <td style={{ ...tdStyle, fontStyle: 'italic', fontWeight: 500 }}>{p.plateforme_nom || '—'}</td>}
                    <td style={{ ...tdStyle, fontStyle: 'italic' }}>{p.nom_projet}</td>
                    <td style={{ ...tdStyle, color: 'var(--text-muted)', fontSize: '0.8em' }}>{p.detenteur_nom || '—'}</td>
                    {cols.map(c => {
                      let v;
                      if (c.key === 'interets') v = netMode ? p.interets_prevus * (1 - pfuReduction) : p.interets_prevus;
                      else if (c.key === 'capital') v = p.capital_prevu ?? 0;
                      else v = 0;
                      return <td key={c.key} style={{ ...tdStyle, ...numStyle, fontStyle: 'italic', color: 'var(--text-muted)' }}>{fmtEUR(v)}</td>;
                    })}
                    <td style={{ ...tdStyle, ...numStyle, fontStyle: 'italic', color: 'var(--text-muted)' }}>{fmtEUR(projRowValue(p))}</td>
                  </tr>
                ))}
                {projetes.length > 0 && (
                  <tr className="drill-row-fixed" style={{ background: 'var(--surface-2)', fontWeight: 700 }}>
                    <td colSpan={3 + (showPlatCol ? 1 : 0)} style={{ ...tdStyle, color: 'var(--text-muted)', fontSize: '0.8em' }}>
                      Sous-total projetés
                    </td>
                    {cols.map(c => {
                      const sum = projetes.reduce((s, p) => {
                        if (c.key === 'interets') return s + (netMode ? p.interets_prevus * (1 - pfuReduction) : p.interets_prevus);
                        if (c.key === 'capital')  return s + (p.capital_prevu ?? 0);
                        return s;
                      }, 0);
                      return <td key={c.key} style={{ ...tdStyle, ...numStyle }}>{fmtEUR(sum)}</td>;
                    })}
                    <td style={{ ...tdStyle, ...numStyle }}>{fmtEUR(totalProjetes)}</td>
                  </tr>
                )}
              </tbody>
            )}

            {/* ── Grand total ── */}
            <tfoot>
              <tr className="drill-row-fixed" style={{
                background: 'var(--primary)', color: '#fff',
                fontWeight: 700, fontSize: '0.9rem', pointerEvents: 'none',
              }}>
                <td colSpan={3 + (showPlatCol ? 1 : 0)} style={{ ...tdStyle, color: '#fff' }}>Total</td>
                {cols.map(c => {
                  const sumR = showRecus    ? recus.reduce((s, r) => {
                    if (c.key === 'interets') return s + (netMode ? r.interets_nets : r.interets_bruts);
                    if (c.key === 'capital')  return s + (r.capital ?? 0);
                    return s + (r.cashback ?? 0);
                  }, 0) : 0;
                  const sumP = showProjetes ? projetes.reduce((s, p) => {
                    if (c.key === 'interets') return s + (netMode ? p.interets_prevus * (1 - pfuReduction) : p.interets_prevus);
                    if (c.key === 'capital')  return s + (p.capital_prevu ?? 0);
                    return s;
                  }, 0) : 0;
                  return <td key={c.key} style={{ ...tdStyle, ...numStyle, color: '#fff' }}>{fmtEUR(sumR + sumP)}</td>;
                })}
                <td style={{ ...tdStyle, ...numStyle, color: '#fff', fontSize: '1rem' }}>
                  {fmtEUR(grandTotal)}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}

      {/* ── Modale validation en masse ── */}
      {bulkModal && (
        <Modal
          open={bulkModal}
          title={bulkDone ? 'Validation terminée' : `Valider ${bulkItems.length} remboursement${bulkItems.length > 1 ? 's' : ''}`}
          onClose={bulkProcessing ? undefined : closeBulkModal}
          width={620}
          footer={
            bulkDone ? (
              <button className="btn-primary" onClick={() => closeBulkModal()}>Fermer</button>
            ) : bulkProcessing ? (
              <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>
                Traitement en cours… {bulkProgress}/{bulkItems.length}
              </span>
            ) : (
              <>
                <button className="btn-secondary" onClick={() => closeBulkModal()}>Annuler</button>
                <button className="btn-primary" onClick={() => runBulk()}>
                  Enregistrer {bulkItems.length} remboursement{bulkItems.length > 1 ? 's' : ''}
                </button>
              </>
            )
          }
        >
          {bulkProcessing && (
            <div style={{ marginBottom: 16 }}>
              <div style={{ height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
                <div style={{
                  height: '100%', borderRadius: 3, background: 'var(--primary)',
                  width: `${bulkItems.length > 0 ? (bulkProgress / bulkItems.length) * 100 : 0}%`,
                  transition: 'width .3s ease',
                }} />
              </div>
            </div>
          )}
          {bulkDone && (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '12px 0' }}>
              <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--success)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
              </div>
              <p style={{ margin: 0, fontWeight: 600, fontSize: '1rem' }}>
                {bulkItems.length} remboursement{bulkItems.length > 1 ? 's' : ''} enregistré{bulkItems.length > 1 ? 's' : ''}
              </p>
              <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.88rem' }}>
                {cell.moisLabel} {cell.annee}
              </p>
            </div>
          )}
          {!bulkDone && (
            <>
              <p style={{ margin: '0 0 12px', color: 'var(--text-muted)', fontSize: '0.88rem' }}>
                Les remboursements suivants vont être créés d'après les projections de <strong>{cell.moisLabel} {cell.annee}</strong>.
                Les prélèvements fiscaux sont estimés à partir des taux PFU de l'année.
              </p>
              <div>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.88rem' }}>
                  <thead>
                    <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                      {showPlatCol && <th style={thStyle}>Plateforme</th>}
                      <th style={{ ...thStyle, width: "100%" }}>Projet</th>
                      <th style={{ ...thStyle, ...numStyle }}>Date</th>
                      <th style={{ ...thStyle, ...numStyle }}>Capital</th>
                      <th style={{ ...thStyle, ...numStyle }}>Intérêts bruts</th>
                      <th style={{ ...thStyle, ...numStyle }}>Total brut</th>
                    </tr>
                  </thead>
                  <tbody>
                    {bulkItems.map((item, i) => (
                      <tr key={i} style={{ borderBottom: '1px solid var(--border)' }}>
                        {showPlatCol && <td style={tdStyle}>{item._plat || '—'}</td>}
                        <td style={tdStyle}>{item._label}</td>
                        <td style={{ ...tdStyle, ...numStyle }}>{fmtDate(item._date)}</td>
                        <td style={{ ...tdStyle, ...numStyle }}>{fmtEUR(item._capital)}</td>
                        <td style={{ ...tdStyle, ...numStyle }}>{fmtEUR(item._interets)}</td>
                        <td style={{ ...tdStyle, ...numStyle, fontWeight: 600 }}>{fmtEUR(item._total)}</td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot>
                    <tr style={{ background: 'var(--surface-2)', fontWeight: 700 }}>
                      <td colSpan={showPlatCol ? 5 : 4} style={{ ...tdStyle, color: 'var(--text-muted)', fontSize: '0.8em' }}>Total</td>
                      <td style={{ ...tdStyle, ...numStyle }}>{fmtEUR(bulkItems.reduce((s, i) => s + i._total, 0))}</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </>
          )}
        </Modal>
      )}
    </div>
  );
}

/* ── Styles partagés ── */
const thStyle = {
  padding: '7px 12px',
  textAlign: 'left',
  fontWeight: 600,
  fontSize: '0.78rem',
  letterSpacing: '.03em',
  color: 'var(--text-muted)',
  whiteSpace: 'nowrap',
  borderBottom: '1px solid var(--border)',
};
const tdStyle = { padding: '7px 12px', verticalAlign: 'middle', whiteSpace: 'nowrap' };
const numStyle = { textAlign: 'right' };