import { useEffect, useState, useRef, useMemo } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import PageIcon from '../components/PageIcon.jsx';
import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import { useUi } from '../context/UiContext.jsx';
import { fmtEUR, fmtPct, fmtDate, fmtStatut, memberLabel } from '../utils/format.js';
import InteretsMensuelsChart from '../components/InteretsMensuelsChart.jsx';
import InteretsDonutChart from '../components/InteretsDonutChart.jsx';
import { InteretsChartProvider, useInteretsChart } from '../context/InteretsChartContext.jsx';
import TableauInteretsPlateforme from '../components/TableauInteretsPlateforme.jsx';
import DrillCellPanel from '../components/DrillCellPanel.jsx';
import EmptyState from '../components/EmptyState.jsx';

/* ── Sélecteur d'année — doit être enfant de InteretsChartProvider ── */
function YearSelectorKpi() {
  const { annee, setAnnee, availableYears, modeGlobal, toggleModeGlobal } = useInteretsChart();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const handler = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  const handleSelect = (value) => {
    if (value === 'all') {
      if (!modeGlobal) toggleModeGlobal();
    } else {
      if (modeGlobal) toggleModeGlobal();
      setAnnee(value);
    }
    setOpen(false);
  };

  // Années récentes en premier (desc), puis "Depuis le début" en tête
  const options = [
    { value: 'all', label: 'Depuis le début' },
    ...availableYears.map(y => ({ value: y, label: String(y) })),
  ];

  return (
    <div ref={ref} style={{ position: 'relative', flexShrink: 0, width: 200 }}>
      <div
        onClick={() => setOpen(v => !v)}
        style={{
          height: '100%', boxSizing: 'border-box',
          background: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
          borderRadius: 10,
          padding: '16px 20px',
          boxShadow: open
            ? '0 6px 28px rgba(109,40,217,0.45)'
            : '0 4px 20px rgba(109,40,217,0.30)',
          cursor: 'pointer',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          userSelect: 'none',
          transition: 'box-shadow .15s',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{
            fontSize: 'var(--fs-xs)', textTransform: 'uppercase',
            letterSpacing: '.06em', color: 'rgba(255,255,255,0.7)', fontWeight: 500,
          }}>
            Période
          </span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="rgba(255,255,255,0.7)" strokeWidth="2.5"
            strokeLinecap="round" strokeLinejoin="round"
            style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s', flexShrink: 0 }}>
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </div>
        <div style={{
          color: '#fff',
          fontSize: modeGlobal ? '1.1rem' : '2rem',
          fontWeight: 700,
          lineHeight: 1.1,
          marginTop: 8,
        }}>
          {modeGlobal ? 'Depuis le début' : String(annee)}
        </div>
      </div>

      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 200,
          background: 'var(--surface)', border: '1px solid var(--border)',
          borderRadius: 10, boxShadow: '0 8px 28px rgba(0,0,0,0.15)',
          minWidth: 200, overflow: 'hidden',
        }}>
          {options.map((opt, i) => {
            const isActive = opt.value === 'all' ? modeGlobal : (!modeGlobal && annee === opt.value);
            return (
              <div
                key={opt.value}
                onClick={() => handleSelect(opt.value)}
                style={{
                  padding: '10px 16px',
                  cursor: 'pointer',
                  background: isActive ? 'rgba(109,40,217,0.08)' : 'transparent',
                  color: isActive ? '#7c3aed' : 'var(--text)',
                  fontWeight: isActive ? 700 : 400,
                  fontSize: 'var(--fs-sm)',
                  borderBottom: i < options.length - 1 ? '1px solid var(--border)' : 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  transition: 'background .1s',
                }}
                onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--surface-2)'; }}
                onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
              >
                <span>{opt.label}</span>
                {isActive && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                    stroke="#7c3aed" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}


/* ── Badge de tendance ── */
function TrendBadge({ current, prev, invert = false }) {
  if (prev == null || prev === 0) return null;
  const diff = current - prev;
  const pct  = (diff / prev) * 100;
  const up   = diff > 0;
  const neutral = diff === 0;
  // invert=true : une hausse est mauvaise (ex. capital en risque)
  const good = neutral ? null : (invert ? !up : up);
  const color = neutral ? 'var(--text-muted)' : good ? '#16a34a' : '#dc2626';
  const bg    = neutral ? 'var(--surface-2)' : good ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)';
  const arrow = neutral ? '→' : up ? '↗' : '↘';
  const label = `${up ? '+' : ''}${Math.abs(pct) < 10 ? pct.toFixed(1) : Math.round(pct)}%`;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      padding: '2px 8px', borderRadius: 20,
      background: bg, color, fontSize: '0.76em', fontWeight: 600,
      whiteSpace: 'nowrap',
    }}>
      {arrow} {label}
    </span>
  );
}

/* ── Carte KPI individuelle ── */
function KpiCard({ title, value, badge, refValue, onClick }) {
  return (
    <div
      className="kpi"
      onClick={onClick}
      style={onClick ? { cursor: 'pointer', transition: 'box-shadow 0.15s, opacity 0.15s' } : undefined}
      onMouseEnter={onClick ? (e) => { e.currentTarget.style.boxShadow = '0 0 0 2px var(--primary)'; e.currentTarget.style.opacity = '0.88'; } : undefined}
      onMouseLeave={onClick ? (e) => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.opacity = ''; } : undefined}
    >
      <div className="label">{title}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 0 0' }}>
        <span style={{ fontSize: '1.35rem', fontWeight: 700 }}>{value}</span>
        {badge}
      </div>
      {refValue && (
        <div style={{ fontSize: '0.8em', color: 'var(--text-muted)', marginTop: 5 }}>{refValue}</div>
      )}
    </div>
  );
}

/* ── KPI filtrés par année ── */
function DashboardKpis({ portfolio, netMode, pfuRates, capitalMensuelData }) {
  const {
    annee, modeGlobal, rawDataGlobal, rawData, currentYear, currentMonth,
    setInclureInterets, setInclureCapital, setInclureCashback,
  } = useInteretsChart();

  const isCurrentYear = !modeGlobal && Number(annee) === currentYear;
  const isFutureYear  = !modeGlobal && Number(annee) > currentYear;

  // Capital de référence pour l'année sélectionnée
  // Pour les années passées : dernier mois de capitalMensuel (= capital déployé fin décembre)
  // Pour l'année courante / mode global : capital actuellement déployé (portfolio)
  const capitalAnnee = useMemo(() => {
    if (modeGlobal || isCurrentYear) return portfolio.encours + portfolio.en_defaut;
    // Année passée : prendre la valeur de fin décembre depuis capitalMensuel
    const anneeStr = String(annee);
    const moisAnnee = (capitalMensuelData ?? []).filter(c => c.mois?.startsWith(anneeStr));
    if (moisAnnee.length > 0) {
      // Prendre le dernier mois disponible (normalement décembre)
      const last = moisAnnee[moisAnnee.length - 1];
      return last.capital ?? 0;
    }
    return portfolio.encours + portfolio.en_defaut;
  }, [modeGlobal, isCurrentYear, annee, capitalMensuelData, portfolio]);

  // Capital souscrit par année (pour référence performance N-1, données manquantes, etc.)
  const capitalParAnneeMap = useMemo(() => {
    const list = rawDataGlobal.capitalParAnnee ?? [];
    return Object.fromEntries(list.map(r => [r.annee, r.capital_souscrit]));
  }, [rawDataGlobal]);

  // ── Estimation réduction PFU pour une année donnée ──
  const getPfuReduction = (yr) => {
    if (!pfuRates.length) return 0;
    const rate = pfuRates.find(r => r.annee === yr)
      ?? pfuRates.reduce((best, r) => r.annee > best.annee ? r : best, pfuRates[0]);
    return (rate.prelev_sociaux + rate.impot_revenu) / 100;
  };

  // ── Données consolidées pour une année (actuel + projeté selon le cas) ──
  const getYearData = (yr) => {
    const remRow  = (rawDataGlobal.rembourses  ?? []).find(r => Number(r.annee) === yr);
    const projRow = (rawDataGlobal.projections ?? []).find(r => Number(r.annee) === yr);
    if (yr > currentYear) {
      // Année future : projections uniquement
      const bruts = projRow?.interets_prevus || 0;
      const red   = getPfuReduction(yr);
      return { interets_bruts: bruts, interets_nets: bruts * (1 - red), capital: projRow?.capital_prevu || 0, cashback: 0 };
    }
    if (yr === currentYear) {
      // Année en cours : actuel reçu + reste projeté
      const bruts_act  = remRow?.interets_bruts || 0;
      const bruts_proj = projRow?.interets_prevus || 0;
      const red        = getPfuReduction(yr);
      return {
        interets_bruts: bruts_act + bruts_proj,
        interets_nets:  (remRow?.interets_nets || 0) + bruts_proj * (1 - red),
        capital:        (remRow?.capital || 0) + (projRow?.capital_prevu || 0),
        cashback:       remRow?.cashback || 0,
      };
    }
    // Année passée : actuel uniquement
    return {
      interets_bruts: remRow?.interets_bruts || 0,
      interets_nets:  remRow?.interets_nets  || 0,
      capital:        remRow?.capital        || 0,
      cashback:       remRow?.cashback       || 0,
    };
  };

  // ── Données mensuelles (mois en cours + M-1) — uniquement si année courante ──
  const { thisMonthRow, prevMonthRow, prevMonthLabel, capitalCurrent, capitalPrev, enDefautCurrent, enDefautPrev } = useMemo(() => {
    const MOIS_FR = ['jan.','fév.','mar.','avr.','mai','juin','juil.','août','sep.','oct.','nov.','déc.'];
    const rows = rawData.rembourses ?? [];
    const thisStr = String(currentYear) + '-' + String(currentMonth).padStart(2, '0');
    const curr = rows.find(r => r.mois === thisStr) ?? null;
    const prevDate = new Date(currentYear, currentMonth - 2, 1);
    const prevStr  = String(prevDate.getFullYear()) + '-' + String(prevDate.getMonth() + 1).padStart(2, '0');
    const prev = rows.find(r => r.mois === prevStr) ?? null;
    const label = MOIS_FR[prevDate.getMonth()] + ' ' + prevDate.getFullYear();

    // Capital investi et en risque M vs M-1 depuis capitalMensuelData
    const capRows = capitalMensuelData ?? [];
    const capCurr = capRows.find(c => c.mois === thisStr);
    const capPrev = capRows.find(c => c.mois === prevStr);

    return {
      thisMonthRow: curr, prevMonthRow: prev, prevMonthLabel: label,
      capitalCurrent:  capCurr?.capital   ?? null,
      capitalPrev:     capPrev?.capital   ?? null,
      enDefautCurrent: capCurr?.en_defaut ?? null,
      enDefautPrev:    capPrev?.en_defaut ?? null,
    };
  }, [rawData, currentYear, currentMonth, capitalMensuelData]);

  // ── Données annuelles (année sélectionnée + N-1) ──
  const { annualData, prevAnnualData } = useMemo(() => {
    if (modeGlobal) {
      const total = (rawDataGlobal.rembourses ?? []).reduce((acc, r) => ({
        interets_bruts: acc.interets_bruts + (r.interets_bruts || 0),
        interets_nets:  acc.interets_nets  + (r.interets_nets  || 0),
        capital:        acc.capital        + (r.capital        || 0),
        cashback:       acc.cashback       + (r.cashback       || 0),
      }), { interets_bruts: 0, interets_nets: 0, capital: 0, cashback: 0 });
      return { annualData: total, prevAnnualData: null };
    }
    return {
      annualData:     getYearData(Number(annee)),
      prevAnnualData: getYearData(Number(annee) - 1),
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [rawDataGlobal, annee, modeGlobal, pfuRates]);

  // ── Valeur affichée ──
  const getValue = (field) => {
    if (isCurrentYear) return thisMonthRow?.[field] || 0;
    return annualData[field] || 0;
  };

  // ── Badge et référence ──
  const mkBadge = (field) => {
    if (modeGlobal) return null;
    if (isCurrentYear) {
      if (!thisMonthRow || !prevMonthRow) return null;
      return <TrendBadge current={thisMonthRow[field] || 0} prev={prevMonthRow[field] || 0} />;
    }
    if (!prevAnnualData) return null;
    return <TrendBadge current={annualData[field] || 0} prev={prevAnnualData[field] || 0} />;
  };

  const mkRef = (field) => {
    if (modeGlobal) return null;
    if (isCurrentYear) {
      if (!prevMonthRow) return null;
      return fmtEUR(prevMonthRow[field] || 0) + ' en ' + prevMonthLabel;
    }
    if (!prevAnnualData) return null;
    const prevYr = Number(annee) - 1;
    const suffix = prevYr >= currentYear ? ' (proj.)' : '';
    return fmtEUR(prevAnnualData[field] || 0) + ' en ' + prevYr + suffix;
  };

  const interetsField = netMode ? 'interets_nets' : 'interets_bruts';

  // ── Performance annualisée ──────────────────────────────────────
  const calcPerfRatio = (interetsVal, capital) =>
    capital > 0 && interetsVal != null ? interetsVal / capital : null;

  // Mensuelle annualisée (mode année courante)
  const capitalDeploye = portfolio.encours + portfolio.en_defaut;

  const perfCurrent = isCurrentYear && thisMonthRow && capitalDeploye > 0
    ? calcPerfRatio(thisMonthRow[interetsField] || 0, capitalDeploye) * 12
    : null;
  const perfPrev = isCurrentYear && prevMonthRow && capitalDeploye > 0
    ? calcPerfRatio(prevMonthRow[interetsField] || 0, capitalDeploye) * 12
    : null;

  // Annuelle (mode année passée/future) — même formule que le tableau :
  // (interets + cashback) / capital souscrit cette année-là
  const perfInteretsAnnee = (annualData[interetsField] || 0) + (annualData.cashback || 0);
  const perfAnnual = !modeGlobal && !isCurrentYear && capitalAnnee > 0
    ? calcPerfRatio(perfInteretsAnnee, capitalAnnee)
    : null;
  const prevCapitalAnnee = modeGlobal || isCurrentYear
    ? capitalDeploye
    : (capitalParAnneeMap[Number(annee) - 1] ?? capitalDeploye);
  const perfInteretsPrevAnnee = ((prevAnnualData?.[interetsField] || 0) + (prevAnnualData?.cashback || 0));
  const perfAnnualPrev = !modeGlobal && !isCurrentYear && prevAnnualData && prevCapitalAnnee > 0
    ? calcPerfRatio(perfInteretsPrevAnnee, prevCapitalAnnee)
    : null;

  const perfValue    = modeGlobal ? null : (isCurrentYear ? perfCurrent    : perfAnnual);
  const perfPrevVal  = modeGlobal ? null : (isCurrentYear ? perfPrev       : perfAnnualPrev);

  const perfLabel = netMode ? 'Performance nette annualisée' : 'Performance brute annualisée';
  const perfRefLabel = isCurrentYear
    ? (perfPrevVal != null ? fmtPct(perfPrevVal * 100) + ' en ' + prevMonthLabel : null)
    : (perfAnnualPrev != null ? fmtPct(perfAnnualPrev * 100) + ' en ' + (Number(annee) - 1) : null);

  return (
    <div className="kpi-grid" style={{ flex: 1, marginBottom: 0 }}>
      <KpiCard
        title="Capital investi"
        value={fmtEUR(capitalAnnee)}
        badge={isCurrentYear && capitalCurrent != null && capitalPrev != null && capitalPrev > 0
          ? <TrendBadge current={capitalCurrent} prev={capitalPrev} />
          : null}
        refValue={isCurrentYear && capitalPrev != null
          ? fmtEUR(capitalPrev) + ' en ' + prevMonthLabel
          : null}
      />
      <KpiCard
        title="Capital en risque"
        value={fmtEUR(portfolio.en_defaut)}
        badge={isCurrentYear && enDefautCurrent != null && enDefautPrev != null && enDefautPrev > 0
          ? <TrendBadge current={enDefautCurrent} prev={enDefautPrev} invert={true} />
          : null}
        refValue={isCurrentYear && enDefautPrev != null && enDefautPrev > 0
          ? fmtEUR(enDefautPrev) + ' en ' + prevMonthLabel
          : null}
      />
      <KpiCard
        title={perfLabel + (isFutureYear ? ' (proj.)' : '')}
        value={perfValue != null ? fmtPct(perfValue * 100) : '—'}
        badge={perfValue != null && perfPrevVal != null
          ? <TrendBadge current={perfValue} prev={perfPrevVal} />
          : null}
        refValue={perfRefLabel}
      />
      <KpiCard
        title={(netMode ? 'Intérêts nets' : 'Intérêts bruts') + (isFutureYear ? ' (proj.)' : '')}
        value={fmtEUR(getValue(interetsField))}
        badge={mkBadge(interetsField)}
        refValue={mkRef(interetsField)}
        onClick={() => { setInclureInterets(true); setInclureCapital(false); setInclureCashback(false); }}
      />
      <KpiCard
        title={'Capital remboursé' + (isFutureYear ? ' (proj.)' : '')}
        value={fmtEUR(getValue('capital'))}
        badge={mkBadge('capital')}
        refValue={mkRef('capital')}
        onClick={() => { setInclureInterets(false); setInclureCapital(true); setInclureCashback(false); }}
      />
      <KpiCard
        title="Cashback reçu"
        value={fmtEUR(getValue('cashback'))}
        badge={mkBadge('cashback')}
        refValue={mkRef('cashback')}
        onClick={() => { setInclureInterets(false); setInclureCapital(false); setInclureCashback(true); }}
      />
    </div>
  );
}


export default function Dashboard() {
  const { activeId, activeView, activeViewMember, investisseurs } = useInvestisseur();
  const { displayMode } = useUi();
  const netMode = displayMode === 'net';
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const [data, setData] = useState(null);
  const [pfuRates, setPfuRates] = useState([]);
  const [loading, setLoading] = useState(false);
  const [capitalMensuelData, setCapitalMensuelData] = useState([]);
  const [plateformes, setPlateformes] = useState([]);
  const [platLoaded, setPlatLoaded] = useState(false);

  /* ── drillCell : cellule sélectionnée dans le TIP — par défaut mois courant toutes plateformes ── */
  const _now = new Date();
  const _moisLabels = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];

  /* Restaure le drillCell depuis les params URL (retour depuis Remboursements) */
  const _initDrillCell = () => {
    const ba = searchParams.get('drill-annee');
    const bm = searchParams.get('drill-mois');
    const bp = searchParams.get('drill-plat');
    if (ba && bm) {
      const annee = Number(ba), mois = Number(bm);
      return {
        platId:    bp ? Number(bp) : null,
        platNom:   null,
        annee,
        mois,
        moisLabel: _moisLabels[mois - 1],
      };
    }
    return {
      platId:    null,
      platNom:   null,
      annee:     _now.getFullYear(),
      mois:      _now.getMonth() + 1,
      moisLabel: _moisLabels[_now.getMonth()],
    };
  };
  const [drillCell, setDrillCell] = useState(_initDrillCell);

  /* Nettoie les params URL de retour dès le premier rendu */
  useEffect(() => {
    if (searchParams.get('drill-annee')) {
      setSearchParams({}, { replace: true });
    }
  }, []); /* eslint-disable-next-line */

  useEffect(() => {
    api.get('/pfu').then(setPfuRates).catch(() => {});
    api.get('/plateformes').then(d => { setPlateformes(d); setPlatLoaded(true); }).catch(() => { setPlatLoaded(true); });
  }, []);

  useEffect(() => {
    if (!activeId && activeView !== 'all') return;
    setData(null);
    setLoading(true);
    const params = activeView === 'all' ? { scope: 'all' } : undefined;
    api.get('/dashboard', params).then(setData).finally(() => setLoading(false));
  }, [activeView, activeId]);

  const ready = activeView === 'all' ? investisseurs.length > 0 : !!activeId;
  if (!ready) return <div className="card text-muted">Sélectionnez un compte investisseur.</div>;
  if (loading || !data) return <div className="card text-muted">Chargement…</div>;
  if (platLoaded && plateformes.length === 0) return (
    <>
      <div className="topbar"><h2>Tableau de bord</h2></div>
      <EmptyState />
    </>
  );

  const { cash, cashByPlatform, portfolio, interets, interetsParAnnee } = data;
  const viewTitle = activeView === 'all'
    ? 'Famille et entreprises'
    : memberLabel(activeViewMember);

  return (
    <>
      <div className="topbar"><h2><PageIcon name="dashboard" />Tableau de bord — {viewTitle}</h2></div>

      <InteretsChartProvider netMode={netMode} pfuRates={pfuRates} activeView={activeView} activeId={activeId}>

        {/* ── KPI + sélecteur année ── */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'stretch', marginBottom: 16 }}>
          <DashboardKpis portfolio={portfolio} netMode={netMode} pfuRates={pfuRates} capitalMensuelData={capitalMensuelData} />
          <YearSelectorKpi />
        </div>

        {/* ── Graphiques ── */}
        <div style={{ display: 'flex', gap: 16, alignItems: 'stretch', marginTop: 8, marginBottom: 24 }}>
          <div style={{ flex: 2, minWidth: 0 }}>
            <InteretsMensuelsChart />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <InteretsDonutChart />
          </div>
        </div>

        {/* ── Tableau intérêts par plateforme ── */}
        <div style={{ marginBottom: 0 }}>
          <TableauInteretsPlateforme
            activeView={activeView}
            activeId={activeId}
            pfuRates={pfuRates}
            onCapitalMensuel={setCapitalMensuelData}
            onCellClick={({ platId, platIds, platNom, annee, mois, moisLabel }) =>
              setDrillCell({ platId, platIds, platNom, annee, mois, moisLabel })
            }
            activeCell={drillCell}
          />
        </div>

        {/* ── Panneau détail mois / plateforme (remplace les Échéances prévues) ── */}
        <DrillCellPanel
          cell={drillCell}
          alwaysOpen={true}
          pfuRates={pfuRates}
          activeView={activeView}
          activeId={activeId}
          plateformes={plateformes}
          investissements={[]}
          onBulkDone={() => {}}
          onEditRecu={(r) => {
            const q = new URLSearchParams({
              'edit-remb': r.id,
              from: 'dashboard',
              'drill-annee': drillCell.annee,
              'drill-mois':  drillCell.mois,
              ...(drillCell.platId ? { 'drill-plat': drillCell.platId } : {}),
            });
            navigate(`/remboursements?${q}`);
          }}
          onEditProjet={(p) => {
            const q = new URLSearchParams({
              'open-simul':    p.investissement_id,
              'simul-date':    p.date_prevue,
              'simul-capital': p.capital_prevu  ?? 0,
              'simul-interets': p.interets_prevus ?? 0,
              from: 'dashboard',
              'drill-annee': drillCell.annee,
              'drill-mois':  drillCell.mois,
              ...(drillCell.platId ? { 'drill-plat': drillCell.platId } : {}),
            });
            navigate(`/remboursements?${q}`);
          }}
        />

      </InteretsChartProvider>
    </>
  );
}