/* ========================================================================
   SENTINEL — Pages
   Toutes les vues principales, exposées via window pour le router
   ======================================================================== */

const { useState, useEffect, useMemo, useRef } = React;
const {
  AppCtx, useApp, I,
  PageHeader, Card, EmptyState, MetricRow,
  Kpi, Spark, Pill, Status, Modal, Tabs,
} = window;

// Types de bien : enumeration Stream Estate 0..6 (cf. modules/collecte.py,
// TYPES_BIEN). Valeur = nom canonique stocke en base, libelle = affichage.
const TYPES_BIEN = [
  ['appartement', 'Appartement'],
  ['maison', 'Maison'],
  ['immeuble', 'Immeuble'],
  ['parking', 'Parking'],
  ['bureau', 'Bureaux'],
  ['terrain', 'Terrain'],
  ['local commercial', 'Local commercial'],
];
const _typeBienLabel = (v) => {
  if (!v) return '—';
  const t = TYPES_BIEN.find(([k]) => k === String(v).toLowerCase());
  return t ? t[1] : v;
};
const _typeBienOptions = () => TYPES_BIEN.map(([v, l]) => <option key={v} value={v}>{l}</option>);

// Achat / location (lot location pro). En location, `prix` est le loyer
// publie par le portail (mensuel en residentiel).
const TRANSACTIONS = [['vente', 'Achat'], ['location', 'Location']];
const _isLocation = (x) => !!x && (x.transaction || 'vente') === 'location';
const _transactionLabel = (x, achat = 'Achat') => (_isLocation(x) ? 'Location' : achat);
const _prixLabel = (a) => (_isLocation(a) ? 'Loyer' : 'Prix');
const _prixTexte = (a) => {
  if (!a || a.prix == null || a.prix === '') return '—';
  const s = Number(a.prix).toLocaleString('fr-FR') + ' €';
  return _isLocation(a) ? s + ' /mois' : s;
};
const _eur2 = (v) => Number(v || 0).toFixed(2).replace('.', ',') + ' €';
// Résumé lisible d'un passage de collecte (reçues / nouvelles / déjà connues / coût)
const _collecteResume = (c, m, n) => {
  const init = (c.collecte_initiale || []).length ? ` Collecte initiale : ${c.collecte_initiale.map((t) => _transactionLabel({ transaction: t }).toLowerCase()).join(', ')}.` : '';
  return `Collecte ${c.mode === 'complet' ? 'complète' : 'OK'} : ${c.recus || 0} reçues, ${c.inseres || 0} nouvelles, ${c.skips || 0} déjà connues (≈ ${_eur2(c.cout_estime_eur)}). ${m.matches || 0} matches, ${n} notifs.${init}`;
};

const fmt = {
  num: (n) => n == null ? '—' : n.toLocaleString('fr-FR').replace(/\u202F/g, ' '),
  eur: (n) => n == null ? '—' : n.toLocaleString('fr-FR').replace(/\u202F/g, ' ') + ' €',
  days: (n) => n + ' jour' + (n > 1 ? 's' : ''),
  pct: (n) => n + ' %',
  // Remplace la source generique "stream_estate" (techno de collecte interne)
  // par un libelle neutre "web" pour ne pas exposer la provenance aux users.
  // Les vraies sources publiques (leboncoin, seloger...) restent affichees.
  source: (s) => s === 'stream_estate' ? 'web' : (s || '—'),
};

/* ============================================================ */
/* DASHBOARD                                                     */
/* Phase 1 : branche sur les vraies APIs via window.SentinelAPI. */
/* Endpoints utilises :                                          */
/*   GET /api/dashboard/stats              -> KPIs               */
/*   GET /api/dashboard/matches-today      -> Table matches      */
/*   GET /api/dashboard/activity           -> Liste activite     */
/*   GET /api/dashboard/rappels            -> Alert strip        */
/*   GET /api/dashboard/annonces-par-jour  -> Chart 7j           */
/* ============================================================ */
const DashboardPage = () => {
  const { toast, goto, isMobile } = useApp();
  const [stats, setStats] = useState(null);
  const [rawMatches, setRawMatches] = useState(null);
  const [rawActivity, setRawActivity] = useState(null);
  const [rawRappels, setRawRappels] = useState(null);
  const [annoncesParJour, setAnnoncesParJour] = useState(null);
  const [loaded, setLoaded] = useState(false);
  // Paquet G : onboarding checklist + bannière quota pack
  const [onboarding, setOnboarding] = useState({ tele: null, hasClient: null, hasCollecte: null });
  const [myPack, setMyPack] = useState(null);

  useEffect(() => {
    const api = window.SentinelAPI;
    if (!api) { setLoaded(true); return; }
    const safe = (p) => p.catch((e) => { console.warn('[Dashboard] fetch err:', e); return null; });
    Promise.all([
      safe(api.fetchAuth('/api/dashboard/stats')),
      safe(api.fetchAuth('/api/dashboard/matches-today')),
      safe(api.fetchAuth('/api/dashboard/activity')),
      safe(api.fetchAuth('/api/dashboard/rappels')),
      safe(api.fetchAuth('/api/dashboard/annonces-par-jour')),
      // Paquet G : onboarding (3 etapes) + pack quota
      safe(api.fetchAuth('/api/cabinet/telegram')),
      safe(api.fetchAuth('/api/clients?limit=1')),
      safe(api.fetchAuth('/api/collecte/status')),
      safe(api.fetchAuth('/api/me/pack')),
    ]).then(([s, m, a, r, ap, tele, cli, col, pack]) => {
      setStats((s && s.data) || null);
      setRawMatches((m && m.data) || []);
      setRawActivity((a && a.data) || []);
      setRawRappels((r && r.data) || []);
      setAnnoncesParJour((ap && ap.data) || []);
      setOnboarding({
        tele: !!(tele && tele.data && tele.data.configured),
        hasClient: !!(cli && Array.isArray(cli.data) && cli.data.length > 0),
        hasCollecte: !!(col && col.data && col.data.derniere_collecte),
      });
      setMyPack((pack && pack.data) || null);
      setLoaded(true);
    });
  }, []);

  // ─── Transformations vers le shape attendu par les composants ───────
  const matches = (rawMatches || []).slice(0, 5).map((m) => {
    const a = m.annonce || {};
    const c = m.client || {};
    const bienParts = [];
    if (a.pieces) bienParts.push('T' + a.pieces);
    else if (a.type_bien) bienParts.push(_typeBienLabel(a.type_bien));
    if (a.ville) bienParts.push(a.ville);
    return {
      score: m.score,
      client: c.nom || '—',
      bien: bienParts.join(' ') || '—',
      prix: a.prix,
      transaction: a.transaction,
      surface: a.surface,
      ville: a.ville || '—',
      time: m.notifie ? 'envoyé' : 'nouveau',
    };
  });

  const activity = (rawActivity || []).map((a) => {
    const tagMap = { annonce: 'Annonce', match_parfait: 'Match', geo_manuel: 'Géo' };
    const tag = tagMap[a.type] || a.type || '—';
    let time = '—';
    if (a.date) {
      const d = new Date(a.date);
      time = d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' })
        + ' ' + d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
    }
    return { tag, text: a.label, time, em: a.type === 'match_parfait' };
  });

  const firstRappel = (rawRappels || [])[0] || null;
  const nbRappels = (rawRappels || []).length;
  const rappelNom = firstRappel
    ? [firstRappel.prenom, firstRappel.nom].filter(Boolean).join(' ') || firstRappel.email || '—'
    : null;

  const chartData = (annoncesParJour || []).map((d) => d.annonces || 0);
  const chartLabels = (annoncesParJour || []).map((d) =>
    d.date ? d.date.slice(5) /* MM-DD depuis YYYY-MM-DD */ : '—'
  );

  // KPIs : helpers d'affichage du delta
  const deltaStr = (pct) => {
    if (pct == null) return '—';
    if (pct === 0) return '0 vs hier';
    return (pct > 0 ? '+' : '') + pct + ' % vs hier';
  };
  const deltaDir = (pct) => (pct == null || pct === 0 ? 'flat' : pct > 0 ? 'up' : 'down');

  /* Chantier 07 : sur telephone, « Aujourd'hui » remplace le tableau de bord :
     2 KPI cote a cote, matches du jour, relances Paul. Listes 2 colonnes. */
  if (isMobile) {
    const kpiMatches = stats ? stats.matches_parfaits : null;
    const kpiAnn = stats ? stats.annonces_aujourdhui : null;
    const tier = (sc) => (sc >= 80 ? 'high' : sc >= 50 ? 'mid' : 'low');
    return (
      <div className="page page--today">
        <PageHeader title="Aujourd'hui"
          sub={loaded
            ? <><span className="page-header__dot" data-state="ok" /> {fmt.num(matches.length)} nouveau{matches.length > 1 ? 'x' : ''} match{matches.length > 1 ? 's' : ''} · {fmt.num(nbRappels)} relance{nbRappels > 1 ? 's' : ''} à faire</>
            : <><span className="page-header__dot" data-state="pending" /> Chargement…</>} />
        <div className="today__kpis">
          <Kpi label="Matches" value={loaded ? fmt.num(kpiMatches) : '…'}
            delta={stats && stats.matches_parfaits_delta_pct != null ? deltaStr(stats.matches_parfaits_delta_pct) : undefined}
            deltaDir={stats ? deltaDir(stats.matches_parfaits_delta_pct) : 'flat'} />
          <Kpi label="Annonces 24 h" value={loaded ? fmt.num(kpiAnn) : '…'} />
        </div>
        <Card title="Matches du jour" meta={loaded ? String(matches.length) : ''} flush>
          {!loaded ? <Skel kind="rows" n={3} />
            : matches.length === 0 ? <EmptyState compact icon="check" title="Aucun match aujourd'hui" desc="Le prochain match apparaîtra ici dès qu'un bien correspond à un client." />
            : (
              <div className="mlist">
                {matches.map((m, i) => (
                  <button key={i} className="mlist__row" onClick={() => goto('annonces')}>
                    <span className="mlist__main">
                      <span className="mlist__title">{m.bien}</span>
                      <span className="mlist__sub">→ {m.client} · {m.time}</span>
                    </span>
                    <span className="mlist__side">
                      <span className="mlist__num">{_prixTexte(m)}</span>
                      <span className="score-pill" data-tier={tier(m.score)}>{m.score} %</span>
                    </span>
                  </button>
                ))}
              </div>
            )}
        </Card>
        <Card title="Relances Paul" meta={loaded ? String(nbRappels) : ''} flush>
          {!loaded ? <Skel kind="rows" n={2} />
            : nbRappels === 0 ? <EmptyState compact icon="clients" title="Aucune relance à faire" desc="Tous les clients ont été contactés récemment." />
            : (
              <div className="mlist">
                {(rawRappels || []).slice(0, 5).map((r, i) => {
                  const nom = [r.prenom, r.nom].filter(Boolean).join(' ') || r.email || '—';
                  return (
                    <button key={i} className="mlist__row" onClick={() => goto('clients')}>
                      <span className="mlist__main">
                        <span className="mlist__title">{nom}</span>
                        <span className="mlist__sub">Sans contact depuis {r.jours_sans_contact != null ? r.jours_sans_contact + ' j' : 'longtemps'}</span>
                      </span>
                      <span className="mlist__side"><span className="fresh__dot" data-late="1" /></span>
                    </button>
                  );
                })}
              </div>
            )}
        </Card>
      </div>
    );
  }

  return (
    <div className="page">
      <PageHeader
        title="Tableau de bord"
        sub={loaded
          ? <><span className="page-header__dot" data-state="ok" /> Données à jour
              {stats ? <> · {fmt.num(stats.clients_actifs || 0)} client{(stats.clients_actifs || 0) > 1 ? 's' : ''} actif{(stats.clients_actifs || 0) > 1 ? 's' : ''} · {fmt.num(stats.matches_parfaits || 0)} match{(stats.matches_parfaits || 0) > 1 ? 's' : ''} parfait{(stats.matches_parfaits || 0) > 1 ? 's' : ''} aujourd'hui</> : null}</>
          : <><span className="page-header__dot" data-state="pending" /> Chargement…</>}
        actions={<>
          <button className="btn btn--ghost" onClick={() => window.location.reload()}><I.refresh /> Rafraîchir</button>
          <button className="btn btn--primary" onClick={() => goto('clients')}><I.plus /> Nouveau client</button>
        </>}
      />

      <div className="stack" style={{gap:16}}>

        {/* Paquet G : onboarding checklist 3 etapes (parite V1).
            S'affiche tant qu'une etape au moins n'est pas faite.
            Telegram configure + 1 client cree + 1 collecte lancee. */}
        {loaded && (onboarding.tele === false || onboarding.hasClient === false || onboarding.hasCollecte === false) && (
          <Card padded>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14, gap:14, flexWrap:'wrap'}}>
              <div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:4}}>Demarrage</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:300, letterSpacing:'-.02em'}}>Termine la configuration de ton cabinet</div>
              </div>
              <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--color-text-muted)', letterSpacing:'.04em'}}>
                {[onboarding.tele, onboarding.hasClient, onboarding.hasCollecte].filter(Boolean).length}/3
              </span>
            </div>
            <div className="grid grid--3" style={{gap:12}}>
              {[
                { ok: onboarding.tele,        label:'Configurer Telegram',  desc:'Recevoir les matches parfaits en push.',   target:'parametres' },
                { ok: onboarding.hasClient,   label:'Creer ton 1er client', desc:'Saisir des criteres pour declencher les matches.', target:'clients' },
                { ok: onboarding.hasCollecte, label:'Lancer ta 1re collecte', desc:'Charger des annonces depuis Stream Estate.', target:'outils' },
              ].map((s, i) => (
                <div key={i} onClick={() => goto(s.target)} style={{cursor:'pointer', padding:'12px 14px', border:'1px solid var(--color-border)', borderRadius:4, background: s.ok ? 'var(--color-surface-2)' : 'transparent'}}>
                  <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:6}}>
                    <span style={{width:16, height:16, borderRadius:'50%', background: s.ok ? 'var(--color-success)' : 'var(--color-border)', display:'inline-flex', alignItems:'center', justifyContent:'center', color: s.ok ? 'var(--color-bg)' : 'var(--color-text-muted)', fontSize:10}}>
                      {s.ok ? '✓' : (i + 1)}
                    </span>
                    <span style={{fontSize:13, fontWeight: s.ok ? 400 : 500, textDecoration: s.ok ? 'line-through' : 'none', color: s.ok ? 'var(--color-text-muted)' : 'var(--color-text)'}}>{s.label}</span>
                  </div>
                  <div style={{fontSize:11, color:'var(--color-text-muted)', lineHeight:1.4}}>{s.desc}</div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {/* Paquet G : banniere quota pack (parite V1). S'affiche si on
            approche/depasse le quota matches du pack courant. */}
        {loaded && myPack && myPack.quota_matches && (() => {
          const q = myPack.quota_matches;
          // Backend renvoie {used, limit, pct, exceeded} (ou shape similaire).
          // On affiche si pct > 70 ou si exceeded.
          const limit = q.limit != null ? q.limit : (q.quota_matches_mois || null);
          const used = q.used != null ? q.used : (q.n_matches_mois || 0);
          if (limit == null || limit <= 0) return null;
          const pct = Math.round((used / limit) * 100);
          if (pct < 70) return null;
          const tone = pct >= 100 ? 'danger' : pct >= 90 ? 'warning' : 'info';
          const packName = (myPack.pack && (myPack.pack.label || myPack.pack.name)) || 'Starter';
          return (
            <Card padded style={{borderLeft:'3px solid ' + (pct >= 100 ? 'var(--color-danger)' : 'var(--color-warning)')}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:14, flexWrap:'wrap'}}>
                <div>
                  <Pill tone={tone} dot>Pack {packName}</Pill>
                  <span style={{fontSize:13, color:'var(--color-text-muted)', marginLeft:10}}>
                    {pct >= 100 ? 'Quota mensuel atteint' : `Quota mensuel a ${pct} %`} — {used} / {limit} matches.
                  </span>
                </div>
                <button className="btn btn--sm btn--primary" onClick={() => goto('parametres')}>Passer au pack superieur</button>
              </div>
            </Card>
          );
        })()}

        {/* AI suggestions card — donnees reelles (/api/dashboard/suggestions) */}
        {window.AISuggestions && <window.AISuggestions onAction={(s)=>{ if (s && s.goto) goto(s.goto); toast(`Action : ${s.cta}`,'success'); }} />}

        {/* Alert strip — premier client a recontacter (s'il y en a) */}
        {firstRappel && (
          <div className="alert-strip">
            <div>
              <div className="alert-strip__top">
                <span className="alert-strip__tag">À recontacter</span>
                <span className="alert-strip__sub">
                  {nbRappels === 1
                    ? '1 client sans interaction depuis plus de 14 jours.'
                    : `${nbRappels} clients sans interaction depuis plus de 14 jours.`}
                </span>
              </div>
              <div className="alert-strip__main">
                <span>{rappelNom}</span>
                {firstRappel.jours_sans_contact != null && (
                  <Pill tone="warning" pulse dot>{firstRappel.jours_sans_contact} j sans contact</Pill>
                )}
              </div>
            </div>
            <div className="alert-strip__actions">
              {firstRappel.email && (
                <a className="btn" href={`mailto:${firstRappel.email}`}><I.send /> Email</a>
              )}
              <button className="btn"><I.clock /> Reporter</button>
              <button className="btn btn--primary" onClick={() => goto('clients')}>Voir la fiche <I.arrow /></button>
            </div>
          </div>
        )}

        {/* KPI grid (branche /api/dashboard/stats) */}
        <div className="kpi-grid">
          <Kpi
            label="Annonces aujourd'hui"
            value={stats ? fmt.num(stats.annonces_aujourdhui) : '—'}
            delta={stats ? deltaStr(stats.annonces_delta_pct) : ''}
            deltaDir={stats ? deltaDir(stats.annonces_delta_pct) : 'flat'}
            meta="collectes du jour"
          />
          <Kpi
            label="Clients actifs"
            value={stats ? fmt.num(stats.clients_actifs) : '—'}
            meta="dans le cabinet"
          />
          <Kpi
            label="Matches parfaits"
            value={stats ? fmt.num(stats.matches_parfaits) : '—'}
            delta={stats ? deltaStr(stats.matches_parfaits_delta_pct) : ''}
            deltaDir={stats ? deltaDir(stats.matches_parfaits_delta_pct) : 'flat'}
            meta="score 100 % en 24 h"
          />
          <Kpi
            label="Géolocalisées"
            value={stats ? stats.geolocalises_pct : '—'}
            unit="%"
            meta="annonces avec coords"
          />
        </div>

        {/* Detail grid : matches + activite */}
        <div className="grid grid--detail">
          <Card title="Matches du jour" meta="Top 5 · 24 h" actions={<button className="btn btn--sm" onClick={() => goto('annonces')}><I.filter /> Voir tout</button>} flush>
            {!loaded ? (
              <Skel kind="rows" n={4} />
            ) : matches.length === 0 ? (
              <EmptyState icon="check"
                title="Aucun match dans les dernières 24 h"
                desc="Sentinel scrute le marché en permanence. Le prochain match apparaîtra ici dès qu'un bien correspond à un client."
                action={<button className="btn btn--primary btn--sm" onClick={() => goto('annonces')}>Voir les annonces</button>} />
            ) : (
<div className="table-scroll">
              <table className="table table--nowrap">
                <thead><tr>
                  <th>Score</th><th>Client</th><th>Bien</th><th className="num" style={{textAlign:'right'}}>Prix</th>
                  <th className="num" style={{textAlign:'right'}}>Surface</th><th>Ville</th><th>Statut</th><th></th>
                </tr></thead>
                <tbody>
                  {matches.map((m, i) => (
                    <tr key={i}>
                      <td><ScoreBar score={m.score} /></td>
                      <td>{m.client}</td>
                      <td>{m.bien}</td>
                      <td className="num" style={{textAlign:'right'}}>{_prixTexte(m)}</td>
                      <td className="num" style={{textAlign:'right'}}>{m.surface != null ? m.surface + ' m²' : '—'}</td>
                      <td>{m.ville}</td>
                      <td className="num" style={{color:'var(--color-text-muted)'}}>{m.time}</td>
                      <td className="actions"><button className="btn btn--sm" onClick={() => goto('annonces')}>Détail <I.arrow /></button></td>
                    </tr>
                  ))}
                </tbody>
              </table></div>
            )}
          </Card>

          <Card title="Activité récente" flush>
            <div className="activity" style={{padding:'0 20px 16px'}}>
              {!loaded ? (
                <Skel kind="lines" n={5} pad={false} />
              ) : activity.length === 0 ? (
                <EmptyState compact icon="clock" title="Aucune activité récente" desc="Les collectes, matches et géolocalisations s'afficheront ici." />
              ) : activity.map((a, i) => (
                <div key={i} className="activity__item">
                  <span className="activity__tag">{a.tag}</span>
                  <span className="activity__text">{a.em ? <em>{a.text}</em> : a.text}</span>
                  <span className="activity__time">{a.time}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Heatmap activity (mocke pour l'instant) */}
        {window.Heatmap && (
          <Card title="Densité de matches" flush>
            <window.Heatmap />
          </Card>
        )}

        {/* Charts */}
        <div className="grid grid--detail">
          <Card title="Annonces — 7 derniers jours" meta="Source : collecte + import">
            {chartData.length > 0
              ? <ChartArea data={chartData} labels={chartLabels} />
              : (loaded ? <EmptyState compact icon="rapports" title="Pas encore de données" desc="Le graphique se remplit au fil des collectes." /> : <Skel kind="lines" n={4} />)
            }
          </Card>

          <Card title="Aperçu cabinet" actions={<button className="btn btn--sm" onClick={() => goto('rapports')}>Voir rapports <I.arrow /></button>}>
            <div className="metric-list">
              <MetricRow label="Annonces aujourd'hui" value={stats ? fmt.num(stats.annonces_aujourdhui) : '—'} />
              <MetricRow label="Clients actifs" value={stats ? fmt.num(stats.clients_actifs) : '—'} />
              <MetricRow label="Matches parfaits 24 h" value={stats ? fmt.num(stats.matches_parfaits) : '—'} />
              <MetricRow label="Couverture géo" value={stats ? stats.geolocalises_pct : '—'} unit=" %" />
              <MetricRow label="Rappels à traiter" value={fmt.num(nbRappels)} />
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

const ScoreBar = ({ score }) => {
  if (score == null) return <span style={{color:'var(--color-text-dim)'}}>—</span>;
  const tier = score >= 80 ? 'high' : score >= 50 ? 'mid' : '';
  return (
    <div className="score-bar">
      <div className="score-bar__track">
        <div className="score-bar__fill" data-tier={tier} style={{width: score + '%'}} />
      </div>
      <span className="score-bar__num">{score} %</span>
    </div>
  );
};

const ChartArea = ({ data, labels }) => {
  const w = 600, h = 200;
  const pad = { t: 12, r: 16, b: 24, l: 32 };
  const innerW = w - pad.l - pad.r;
  const innerH = h - pad.t - pad.b;
  const max = Math.max(...data, 6);
  const yTicks = [0, 2, 4, 6];
  const pts = data.map((v, i) => {
    const x = pad.l + (i / (data.length - 1)) * innerW;
    const y = pad.t + innerH - (v / max) * innerH;
    return { x, y, v };
  });
  const lineD = pts.map((p, i) => (i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`)).join(' ');
  const fillD = `${lineD} L ${pts[pts.length-1].x},${pad.t + innerH} L ${pad.l},${pad.t + innerH} Z`;
  return (
    <div style={{padding:'0 8px 8px'}}>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{width:'100%', height:240, display:'block'}}>
        <g className="chart-area__grid">
          {yTicks.map((t, i) => {
            const y = pad.t + innerH - (t / max) * innerH;
            return <line key={i} x1={pad.l} x2={w - pad.r} y1={y} y2={y} />;
          })}
        </g>
        {yTicks.map((t, i) => {
          const y = pad.t + innerH - (t / max) * innerH;
          return <text key={i} x={pad.l - 8} y={y + 3} textAnchor="end" fontFamily="Geist Mono" fontSize="9" fill="var(--color-text-dim)">{t}</text>;
        })}
        <path className="chart-area__fill" d={fillD} />
        <path className="chart-area__line" d={lineD} />
        {pts.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={p.v === 0 ? 2.5 : 3.5} className={p.v === 0 ? 'chart-area__dot--ghost' : 'chart-area__dot'} />
        ))}
        {labels.map((l, i) => {
          const x = pad.l + (i / (labels.length - 1)) * innerW;
          return <text key={i} x={x} y={h - 6} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="var(--color-text-dim)" letterSpacing=".04em">{l}</text>;
        })}
      </svg>
    </div>
  );
};

/* ============================================================ */
/* CLIENTS                                                       */
/* Phase 2 : branche sur GET /api/clients + actions CRUD :       */
/*   POST   /api/clients          (Nouveau)                      */
/*   GET    /api/clients/{id}     (Détail)                       */
/*   PUT    /api/clients/{id}     (Édition)                      */
/*   DELETE /api/clients/{id}     (Supprimer)                    */
/*   GET    /api/clients/{id}/matches  (matches du client)       */
/*   GET    /api/clients/export.csv    (Export)                  */
/*   POST   /api/clients/import.csv    (Import)                  */
/* ============================================================ */

// Mapper : ClientOut backend -> shape attendu par la table existante
const _mapClient = (c) => {
  const cr = c.criteres || {};
  const unite = _isLocation(cr) ? ' € /mois' : ' €';
  const budget =
    cr.budget_min != null && cr.budget_max != null
      ? `${cr.budget_min.toLocaleString('fr-FR')} → ${cr.budget_max.toLocaleString('fr-FR')}${unite}`
      : cr.budget_max != null
      ? `≤ ${cr.budget_max.toLocaleString('fr-FR')}${unite}`
      : cr.budget_min != null
      ? `≥ ${cr.budget_min.toLocaleString('fr-FR')}${unite}`
      : '—';
  const criteres = [
    _isLocation(cr) ? 'Location' : null,
    cr.pieces_min ? `${cr.pieces_min}P` : null,
    cr.surface_min ? `≥ ${cr.surface_min} m²` : null,
    cr.type_bien,
  ].filter(Boolean).join(' · ') || '—';
  const lastContactDays = c.date_derniere_interaction
    ? Math.floor((Date.now() - new Date(c.date_derniere_interaction).getTime()) / (1000 * 60 * 60 * 24))
    : null;
  const villesStr = (cr.villes && cr.villes.length) ? cr.villes.join(', ') : '—';
  // Chantier 03 : dans la table, un seul montant (le max) et des criteres
  // courts « 4 p. · Ronchin, Lille » ; la fourchette complete reste dans la fiche.
  const budgetMax =
    cr.budget_max != null ? `${cr.budget_max.toLocaleString('fr-FR')}${unite}`
    : cr.budget_min != null ? `≥ ${cr.budget_min.toLocaleString('fr-FR')}${unite}`
    : '—';
  const criteresCourts = [
    _isLocation(cr) ? 'Location' : null,
    cr.pieces_min ? `${cr.pieces_min} p.` : null,
    cr.type_bien ? _typeBienLabel(cr.type_bien) : null,
    (cr.villes && cr.villes.length) ? cr.villes.join(', ') : null,
  ].filter(Boolean).join(' · ') || '—';
  return {
    id: c.id,
    raw: c, // on garde l'original pour edition
    name: `${c.prenom || ''} ${c.nom || ''}`.trim() || c.email || `Client #${c.id}`,
    email: c.email || '—',
    telephone: c.telephone || '',
    budget, budgetMax, critères: criteres, critèresCourts: criteresCourts, villes: villesStr,
    lastContact: lastContactDays,
    agent: c.agent_id || '—',
    state: c.statut || 'prospect',
  };
};

/* Chantier 03 : indicateur de fraicheur du dernier contact */
const Fresh = ({ days }) => {
  if (days == null) return <span className="fresh" data-tone="none"><span className="fresh__dot" />—</span>;
  const tone = days <= 3 ? 'ok' : days <= 10 ? 'warn' : 'late';
  return <span className="fresh" data-tone={tone} title={fmt.days(days)}><span className="fresh__dot" />{days} j</span>;
};

/* Menu ⋯ d'une ligne de table */
const RowMenu = ({ items }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [open]);
  return (
    <span className="rowmenu-wrap" ref={ref}>
      <button className="btn btn--sm btn--icon" title="Plus d'actions" aria-haspopup="menu" aria-expanded={open}
        onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}>⋯</button>
      {open && (
        <span className="rowmenu" role="menu">
          {items.map((it) => (
            <button key={it.label} role="menuitem" className={it.danger ? 'is-danger' : ''}
              onClick={(e) => { e.stopPropagation(); setOpen(false); it.onClick(); }}>{it.label}</button>
          ))}
        </span>
      )}
    </span>
  );
};

/* Chantier 03 : barre d'actions groupees (selection par cases a cocher) */
const ClientsBulkBar = ({ count, onClear, onExport, onAssign, onDelete }) => {
  if (!count) return null;
  return (
    <div className="bulk-bar" role="toolbar">
      <span className="bulk-bar__count"><span className="bulk-bar__num">{count}</span> sélectionné{count > 1 ? 's' : ''}</span>
      <button className="btn btn--sm" onClick={onExport}>Exporter la sélection</button>
      <button className="btn btn--sm" onClick={onAssign}>Assigner</button>
      <button className="btn btn--sm btn--danger" onClick={onDelete}>Supprimer…</button>
      <button className="bulk-bar__close" onClick={onClear} aria-label="Annuler la sélection">×</button>
    </div>
  );
};

/* Chantier 07 : indicateur de position du kanban (une colonne par ecran) */
const KanbanDots = () => {
  const [idx, setIdx] = useState(0);
  const [n, setN] = useState(0);
  useEffect(() => {
    const el = document.querySelector('.kanban');
    if (!el) return;
    const cols = el.querySelectorAll('.kanban__col');
    setN(cols.length);
    const on = () => { const w = cols[0] ? cols[0].offsetWidth + 12 : 1; setIdx(Math.round(el.scrollLeft / w)); };
    el.addEventListener('scroll', on, { passive: true });
    on();
    return () => el.removeEventListener('scroll', on);
  }, []);
  if (n < 2) return null;
  return <div className="kdots" aria-hidden="true">{Array.from({ length: n }).map((_, i) => <span key={i} className={i === idx ? 'on' : ''} />)}</div>;
};

const _freshTone = (days) => (days == null ? 'none' : days <= 3 ? 'ok' : days <= 10 ? 'warn' : 'late');

const ClientsPage = () => {
  const { toast, isMobile } = useApp();
  // Chantier 07 : feuille de detail (mobile) + declencheur « Nouveau client »
  // depuis le bouton flottant (evenement ou drapeau de session).
  const [sheetClient, setSheetClient] = useState(null);
  useEffect(() => {
    const on = () => setShowCreate(true);
    window.addEventListener('sentinel:new-client', on);
    try {
      if (sessionStorage.getItem('sentinel.clients.new') === '1') { sessionStorage.removeItem('sentinel.clients.new'); setShowCreate(true); }
    } catch (_) {}
    return () => window.removeEventListener('sentinel:new-client', on);
  }, []);
  const sendMatches = async (c) => {
    if (!c.raw || !c.raw.email) { toast('Pas d\'email renseigné pour ce client.', 'warning'); return; }
    try {
      const r = await window.SentinelAPI.fetchAuth(`/api/clients/${c.id}/matches`);
      const ms = (r && r.data) || [];
      if (!ms.length) { toast('Aucun match à envoyer pour l\'instant.', 'warning'); return; }
      const top = [...ms].sort((a, b) => (b.score || 0) - (a.score || 0)).slice(0, 5);
      const lignes = top.map((m) => {
        const a = m.annonce || {};
        return `- ${a.titre || a.ville || 'Annonce'}${a.ville ? ' (' + a.ville + ')' : ''} : ${_prixTexte(a)}${a.url ? ' — ' + a.url : ''}`;
      });
      const body = `Bonjour ${c.raw.prenom || ''},\n\nVoici les biens qui correspondent à votre recherche :\n\n${lignes.join('\n')}\n\nJe reste disponible pour organiser des visites.\n`;
      window.location.href = 'mailto:' + encodeURIComponent(c.raw.email) + '?subject=' + encodeURIComponent('Vos biens sélectionnés') + '&body=' + encodeURIComponent(body);
    } catch (e) { toast('Échec : ' + (e.message || e), 'error'); }
  };
  const [view, setView] = useState('liste');
  const [tab, setTab] = useState('tous');
  const [q, setQ] = useState('');
  const [clients, setClients] = useState(null); // null = loading
  const [showCreate, setShowCreate] = useState(false);
  const [detailClient, setDetailClient] = useState(null); // {raw, mapped} ou null
  const [editClient, setEditClient] = useState(null);
  // Paquet G : filtre par agent + modale delete stylee
  const [agentFilter, setAgentFilter] = useState('');
  const [agents, setAgents] = useState([]);
  const [deleteCandidate, setDeleteCandidate] = useState(null);
  const [deleting, setDeleting] = useState(false);
  // Chantier 03 : selection par cases a cocher -> actions groupees
  const [selected, setSelected] = useState(() => new Set());
  const [assignOpen, setAssignOpen] = useState(false);
  const [assignTo, setAssignTo] = useState('');
  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
  const [bulkBusy, setBulkBusy] = useState(false);

  const reload = () => {
    if (!window.SentinelAPI) { setClients([]); return; }
    setClients(null);
    setSelected(new Set());
    window.SentinelAPI.fetchAuth('/api/clients')
      .then((r) => setClients((r.data || []).map(_mapClient)))
      .catch((e) => { console.warn('[Clients] fetch err', e); setClients([]); toast('Erreur de chargement clients.', 'error'); });
  };

  const toggleSel = (id) => setSelected((prev) => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; });
  const toggleAll = (ids) => setSelected((prev) => (ids.every((id) => prev.has(id)) ? new Set() : new Set(ids)));
  const selectedClients = () => (clients || []).filter((c) => selected.has(c.id));

  const exportSelection = () => {
    const rows = selectedClients();
    if (!rows.length) return;
    const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
    const head = ['nom', 'prenom', 'email', 'telephone', 'statut', 'budget_min', 'budget_max', 'transaction', 'type_bien', 'villes', 'agent'];
    const lines = [head.join(';')].concat(rows.map((c) => {
      const cr = c.raw.criteres || {};
      return [c.raw.nom, c.raw.prenom, c.raw.email, c.raw.telephone, c.state, cr.budget_min, cr.budget_max,
        cr.transaction || 'vente', cr.type_bien, (cr.villes || []).join('|'), c.raw.agent_id].map(esc).join(';');
    }));
    const blob = new Blob(['\ufeff' + lines.join('\n')], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `clients-selection-${new Date().toISOString().slice(0, 10)}.csv`;
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(url);
    toast(`${rows.length} client${rows.length > 1 ? 's' : ''} exporté${rows.length > 1 ? 's' : ''}.`, 'success');
  };

  const runAssign = async () => {
    const rows = selectedClients();
    if (!rows.length) return;
    setBulkBusy(true);
    let ok = 0;
    for (const c of rows) {
      try {
        await window.SentinelAPI.fetchAuth(`/api/clients/${c.id}`, { method: 'PUT', body: { agent_id: assignTo || null } });
        ok++;
      } catch (e) { /* on continue, bilan a la fin */ }
    }
    setBulkBusy(false);
    setAssignOpen(false);
    toast(`${ok}/${rows.length} client${rows.length > 1 ? 's' : ''} assigné${ok > 1 ? 's' : ''}.`, ok === rows.length ? 'success' : 'warning');
    reload();
  };

  const runBulkDelete = async () => {
    const rows = selectedClients();
    if (!rows.length) return;
    setBulkBusy(true);
    let ok = 0;
    for (const c of rows) {
      try { await window.SentinelAPI.fetchAuth(`/api/clients/${c.id}`, { method: 'DELETE' }); ok++; } catch (e) { /* bilan a la fin */ }
    }
    setBulkBusy(false);
    setBulkDeleteOpen(false);
    toast(`${ok}/${rows.length} client${rows.length > 1 ? 's' : ''} supprimé${ok > 1 ? 's' : ''}.`, ok === rows.length ? 'success' : 'warning');
    reload();
  };

  useEffect(() => { reload(); }, []);
  // Paquet G : charge les agents du cabinet pour le filtre dropdown.
  useEffect(() => {
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth('/api/cabinet/users')
      .then((r) => setAgents(Array.isArray(r.data) ? r.data : []))
      .catch(() => {});
  }, []);

  const list = clients || [];
  const counts = useMemo(() => {
    const c = { tous: list.length, prospect: 0, actif: 0, chaud: 0, signe: 0, perdu: 0 };
    list.forEach((x) => { if (c[x.state] != null) c[x.state]++; });
    return c;
  }, [list]);

  const filtered = useMemo(() => {
    let l = list;
    if (tab !== 'tous') l = l.filter((c) => c.state === tab);
    // Paquet G : filtre par agent (compare agent_id avec email/agent_id de l'agent).
    if (agentFilter) {
      l = l.filter((c) => (c.agent || '').toLowerCase() === agentFilter.toLowerCase());
    }
    if (q) {
      const ql = q.toLowerCase();
      l = l.filter((c) =>
        c.name.toLowerCase().includes(ql) ||
        c.email.toLowerCase().includes(ql) ||
        c.villes.toLowerCase().includes(ql)
      );
    }
    return l;
  }, [list, tab, q, agentFilter]);

  // Paquet G : modale delete stylee (vs confirm() natif).
  const handleDelete = (c) => setDeleteCandidate(c);
  const confirmDelete = async () => {
    if (!deleteCandidate) return;
    setDeleting(true);
    try {
      await window.SentinelAPI.fetchAuth(`/api/clients/${deleteCandidate.id}`, { method: 'DELETE' });
      toast(`${deleteCandidate.name} supprimé.`, 'success');
      setDeleteCandidate(null);
      reload();
    } catch (e) {
      toast('Échec de la suppression : ' + (e.message || e), 'error');
    } finally { setDeleting(false); }
  };

  const handleExport = async () => {
    try {
      const token = (window.SentinelAPI && window.SentinelAPI.getToken && window.SentinelAPI.getToken()) || '';
      const r = await fetch('/api/clients/export.csv', { headers: { Authorization: 'Bearer ' + token } });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `clients-${new Date().toISOString().slice(0, 10)}.csv`;
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
      toast('Export CSV téléchargé.', 'success');
    } catch (e) {
      toast('Échec export CSV : ' + (e.message || e), 'error');
    }
  };

  // Paquet E : import CSV passe par une modale de confirmation avec
  // checkbox Patrimoine batch (consentement RGPD pour TOUS les clients
  // du fichier). Sans cette etape, on ne peut plus prouver le consentement
  // legalement pour un lot import en masse.
  const [importFile, setImportFile] = useState(null);
  const [importAutoPat, setImportAutoPat] = useState(false);
  const [importing, setImporting] = useState(false);

  const onCsvSelected = (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = ''; // reset pour pouvoir re-importer le meme fichier
    if (!file) return;
    setImportAutoPat(false); // toujours decoche par defaut (defense en profondeur)
    setImportFile(file);
  };

  const runImport = async () => {
    if (!importFile) return;
    setImporting(true);
    try {
      const fd = new FormData();
      fd.append('file', importFile);
      if (importAutoPat) fd.append('auto_patrimoine', 'true');
      const r = await window.SentinelAPI.fetchAuth('/api/clients/import.csv', { method: 'POST', body: fd });
      // Lot 0 audit : le backend renvoie n_imported / n_skipped / errors
      // (pas `created`) -> le toast affichait toujours "0 client importé"
      // et poussait a re-importer (doublons). Les lignes ignorees sont
      // desormais montrees.
      const d = (r && r.data) || {};
      const n = d.n_imported || 0;
      const nErr = d.total_errors || (d.errors ? d.errors.length : 0);
      const msg = importAutoPat
        ? `${n} client${n > 1 ? 's' : ''} importé${n > 1 ? 's' : ''} + Patrimoine activé.`
        : `${n} client${n > 1 ? 's' : ''} importé${n > 1 ? 's' : ''}.`;
      toast(msg, n > 0 ? 'success' : 'warning');
      if (nErr > 0) {
        const first = (d.errors || []).slice(0, 3).join(' · ');
        toast(`${nErr} ligne${nErr > 1 ? 's' : ''} ignorée${nErr > 1 ? 's' : ''}${first ? ' : ' + first : ''}`, 'warning');
      }
      setImportFile(null);
      reload();
    } catch (err) {
      toast('Échec import CSV : ' + (err.message || err), 'error');
    } finally {
      setImporting(false);
    }
  };

  const importInputRef = useRef(null);

  /* Deplacement kanban : update optimiste -> PATCH backend -> rollback via
     reload si echec. Partage par les deux kanbans (DnD et fallback). */
  const moveClient = async (clientId, newState) => {
    setClients((prev) => (prev || []).map((c) => c.id === clientId ? { ...c, state: newState, raw: { ...c.raw, statut: newState } } : c));
    try {
      await window.SentinelAPI.fetchAuth(`/api/clients/${clientId}/statut`, { method: 'PATCH', body: { statut: newState } });
      toast(`Statut → ${newState}`, 'success');
    } catch (e) {
      toast('Echec deplacement : ' + (e.message || e), 'error');
      reload();
    }
  };

  return (
    <div className="page">
      <PageHeader
        title="Clients"
        className={isMobile ? 'page-header--tight' : ''}
        sub={isMobile
          ? (clients === null ? 'Chargement…' : `${fmt.num(clients.length)} client${clients.length > 1 ? 's' : ''}`)
          : 'Gestion des clients et de leurs critères de recherche.'}
        actions={isMobile
          ? <Tabs value={view} onChange={setView} options={[{value:'liste', label:'Liste'}, {value:'kanban', label:'Kanban'}]} />
          : <>
            <button className="btn btn--ghost" onClick={handleExport}><I.download /> Exporter</button>
            <button className="btn btn--ghost" onClick={() => importInputRef.current && importInputRef.current.click()}><I.upload /> Importer</button>
            <button className="btn btn--primary" onClick={() => setShowCreate(true)}><I.plus /> Nouveau client</button>
          </>}
      />
      <input type="file" accept=".csv,text/csv" ref={importInputRef} onChange={onCsvSelected} style={{display:'none'}} />

      <div className="row row--between toolbar" style={{marginBottom:16, gap:12, flexWrap:'wrap'}}>
        <div className="row" style={{gap:8, flexWrap:'nowrap', minWidth:0}}>
          <div className="input-row input-row--sm" style={{width:260}}>
            <I.search />
            <input placeholder="Rechercher par nom, email, ville…" value={q} onChange={e=>setQ(e.target.value)} />
          </div>
          {/* Paquet G : filtre agent (parite V1, peuple via /api/cabinet/users). */}
          {agents.length > 0 && (
            <select className="select select--sm" style={{width:200}} value={agentFilter} onChange={(e) => setAgentFilter(e.target.value)}>
              <option value="">Tous les agents</option>
              {agents.map((a) => (<option key={a.id} value={a.email}>{a.nom ? a.nom + ' (' + a.email + ')' : a.email}</option>))}
            </select>
          )}
        </div>
        {!isMobile && <Tabs value={view} onChange={setView} options={[
          {value:'liste', label:'Liste'},
          {value:'kanban', label:'Kanban'},
        ]} />}
      </div>

      <Tabs ghost value={tab} onChange={setTab} options={[
        {value:'tous',     label:'Tous',      count: counts.tous},
        {value:'prospect', label:'Prospects', count: counts.prospect},
        {value:'actif',    label:'Actifs',    count: counts.actif},
        {value:'chaud',    label:'Chauds',    count: counts.chaud},
        {value:'signe',    label:'Signés',    count: counts.signe},
        {value:'perdu',    label:'Perdus',    count: counts.perdu},
      ]} />

      <div style={{height:16}} />

      {view === 'liste' && (
        <ClientsBulkBar count={selected.size} onClear={() => setSelected(new Set())}
          onExport={exportSelection}
          onAssign={() => { setAssignTo(''); setAssignOpen(true); }}
          onDelete={() => setBulkDeleteOpen(true)} />
      )}

      {clients === null ? (
        <Card flush><Skel kind="rows" n={6} /></Card>
      ) : view === 'liste' ? (
        <Card flush className="table-card">
          {filtered.length === 0 ? (
            <EmptyState icon="clients"
              title={list.length === 0 ? "Aucun client" : "Aucun client ne correspond"}
              desc={list.length === 0
                ? "Crée ton premier client pour commencer à recevoir des matches."
                : "Essaie d'élargir tes critères ou crée un nouveau client."}
              action={<button className="btn btn--primary" onClick={()=>setShowCreate(true)}><I.plus /> Nouveau client</button>} />
          ) : (
            <table className="table table--cards">
              <thead><tr>
                <th className="chk"><input type="checkbox" className="tick" aria-label="Tout sélectionner"
                  checked={filtered.length > 0 && filtered.every((c) => selected.has(c.id))}
                  onChange={() => toggleAll(filtered.map((c) => c.id))} /></th>
                <th>Client</th><th>Statut</th><th>Email</th><th>Critères</th>
                <th className="num">Budget max</th><th>Dernier contact</th><th></th>
              </tr></thead>
              <tbody>
                {filtered.map(c => (
                  <tr key={c.id} className={selected.has(c.id) ? 'is-selected' : ''} onClick={() => { if (isMobile) setSheetClient(c); }}>
                    <td className="chk"><input type="checkbox" className="tick" checked={selected.has(c.id)}
                      onChange={() => toggleSel(c.id)} aria-label={`Sélectionner ${c.name}`} /></td>
                    <td className="name tcard-head">
                      <span className="fresh__dot fresh__dot--inline m-only" data-tone={_freshTone(c.lastContact)} />
                      <span role="button" className="client-row__name" onClick={() => { if (!isMobile) setDetailClient(c); }}>{c.name}</span>
                    </td>
                    <td className="m-hide"><ClientStatePill state={c.state} /></td>
                    <td className="m-hide" data-l="Email"><span className="ellip" title={c.email} style={{color:'var(--color-text-muted)', fontSize:12.5}}>{c.email}</span></td>
                    <td className="tcard-sub" data-l="Critères"><span className="ellip" title={c.critèresCourts} style={{color:'var(--color-text-muted)', fontSize:12.5}}>{c.critèresCourts}{isMobile && c.lastContact != null ? ` · ${c.lastContact} j` : ''}</span></td>
                    <td className="num tcard-side" data-l="Budget max">{c.budgetMax}</td>
                    <td className="m-hide" data-l="Dernier contact"><Fresh days={c.lastContact} /></td>
                    <td className="actions m-hide">
                      <div className="rowact">
                        <button className="btn btn--sm btn--icon" title="Éditer" onClick={() => setEditClient(c)}><I.edit /></button>
                        <RowMenu items={[
                          { label: 'Voir la fiche', onClick: () => setDetailClient(c) },
                          { label: 'Éditer', onClick: () => setEditClient(c) },
                          { label: 'Supprimer…', danger: true, onClick: () => handleDelete(c) },
                        ]} />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </Card>
      ) : (
        window.KanbanDnD
          /* onMove branche la PERSISTANCE : avant, KanbanDnD ne recevait
             rien et le deplacement n'etait jamais sauvegarde (retour a
             l'ancienne colonne au rechargement). */
          ? <window.KanbanDnD clients={filtered} onMove={moveClient} />
          : <ClientsKanban clients={filtered} onMove={moveClient} />
      )}
      {isMobile && view === 'kanban' && clients !== null && <KanbanDots key={filtered.length} />}

      {/* Chantier 07 : feuille de detail mobile (au-dessus de la tab bar) */}
      <MobileSheet open={!!sheetClient} onClose={() => setSheetClient(null)}
        title={sheetClient ? sheetClient.name : ''}
        aside={sheetClient ? <ClientStatePill state={sheetClient.state} /> : null}
        rows={sheetClient ? [
          { k: 'Budget max', v: sheetClient.budgetMax, mono: true },
          { k: 'Recherche', v: sheetClient.critèresCourts },
          { k: 'Dernier contact', v: sheetClient.lastContact != null ? `${sheetClient.lastContact} j` : '—', style: sheetClient.lastContact > 10 ? { color: 'var(--color-danger)' } : undefined },
        ] : []}
        actions={sheetClient ? <>
          <a className={`btn ${sheetClient.telephone ? '' : 'is-disabled'}`} href={sheetClient.telephone ? 'tel:' + sheetClient.telephone : undefined}
            onClick={(e) => { if (!sheetClient.telephone) { e.preventDefault(); toast('Pas de téléphone renseigné.', 'warning'); } }}><I.phone /> Appeler</a>
          <button className="btn btn--primary" onClick={() => sendMatches(sheetClient)}><I.send /> Envoyer les matches</button>
        </> : null}>
        {sheetClient && <button className="m-sheet__link" onClick={() => { const c = sheetClient; setSheetClient(null); setDetailClient(c); }}>Voir la fiche complète →</button>}
      </MobileSheet>

      {/* Modal Nouveau client */}
      <ClientFormModal
        open={showCreate}
        onClose={() => setShowCreate(false)}
        title="Nouveau client"
        onSubmit={async (payload) => {
          try {
            await window.SentinelAPI.fetchAuth('/api/clients', { method: 'POST', body: payload });
            toast('Client créé.', 'success');
            setShowCreate(false);
            reload();
          } catch (e) { toast('Échec création : ' + (e.message || e), 'error'); }
        }}
      />

      {/* Modal Édition */}
      <ClientFormModal
        open={!!editClient}
        onClose={() => setEditClient(null)}
        title={editClient ? `Éditer ${editClient.name}` : ''}
        initial={editClient && editClient.raw}
        onSubmit={async (payload) => {
          try {
            await window.SentinelAPI.fetchAuth(`/api/clients/${editClient.id}`, { method: 'PUT', body: payload });
            toast('Client mis à jour.', 'success');
            setEditClient(null);
            reload();
          } catch (e) { toast('Échec mise à jour : ' + (e.message || e), 'error'); }
        }}
      />

      {/* Modal Détail */}
      <ClientDetailModal
        client={detailClient}
        onClose={() => setDetailClient(null)}
        onEdit={() => { setEditClient(detailClient); setDetailClient(null); }}
        onChanged={(updated) => {
          // Refresh la liste + le detailClient courant pour que les sections
          // (statut, notes, matches) refletent le dernier state sans fermer.
          reload();
          if (updated && detailClient && detailClient.id === updated.id) {
            setDetailClient({ ...detailClient, raw: { ...detailClient.raw, ...updated }, state: updated.statut || detailClient.state });
          }
        }}
      />

      {/* Paquet E : modale confirmation import CSV avec consentement Patrimoine batch.
          Sans cette etape, on ne peut plus prouver le consentement RGPD pour un
          lot importe en masse (preuve legale CNIL pour TOUS les clients du fichier). */}
      <Modal
        open={!!importFile}
        onClose={() => { if (!importing) setImportFile(null); }}
        title="Import CSV — partage Patrimoine ?"
        footer={<>
          <button className="btn" onClick={() => setImportFile(null)} disabled={importing}>Annuler</button>
          <button className="btn btn--primary" onClick={runImport} disabled={importing}>
            {importing ? 'Import en cours…' : 'Lancer l\'import'}
          </button>
        </>}>
        <p style={{fontSize:13, marginBottom:10}}>
          Tu vas importer <strong>{importFile ? importFile.name : '—'}</strong>.
        </p>
        <p style={{fontSize:12, color:'var(--color-text-muted)', marginBottom:16, lineHeight:1.5}}>
          Tu peux activer le partage Patrimoine pour <strong style={{color:'var(--color-text)'}}>TOUS</strong> les
          clients de ce fichier en une seule opération. Sans cette case, les clients
          seront importés normalement (tu pourras activer le partage individuellement
          plus tard depuis chaque fiche).
        </p>
        <div style={{padding:'12px 14px', background:'var(--color-surface-2)', borderRadius:4, borderLeft:'3px solid var(--accent)'}}>
          <label className="checkbox" style={{alignItems:'flex-start', gap:10}}>
            <input type="checkbox" checked={importAutoPat} onChange={(e) => setImportAutoPat(e.target.checked)} />
            <span className="checkbox__box">
              {importAutoPat && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
            </span>
            <span style={{fontSize:13, lineHeight:1.5}}>
              Je certifie que <strong>tous les clients</strong> de ce fichier ont
              explicitement accepté d'être contactés par un conseiller en gestion
              de patrimoine partenaire (preuve légale RGPD pour le lot entier).
            </span>
          </label>
        </div>
      </Modal>

      {/* Chantier 03 : actions groupees */}
      <Modal open={assignOpen} onClose={() => { if (!bulkBusy) setAssignOpen(false); }} title={`Assigner ${selected.size} client${selected.size > 1 ? 's' : ''}`}
        footer={<>
          <button className="btn btn--ghost" onClick={() => setAssignOpen(false)} disabled={bulkBusy}>Annuler</button>
          <button className="btn btn--primary" onClick={runAssign} disabled={bulkBusy}>{bulkBusy ? 'Assignation…' : 'Assigner'}</button>
        </>}>
        <div className="field">
          <label className="field__label">Agent</label>
          <select className="select" value={assignTo} onChange={(e) => setAssignTo(e.target.value)}>
            <option value="">— Moi-même —</option>
            {agents.map((a) => (<option key={a.id} value={a.email}>{a.nom ? a.nom + ' (' + a.email + ')' : a.email}</option>))}
          </select>
          <div className="field__hint">L'agent assigné reçoit les notifications de matches de ces clients.</div>
        </div>
      </Modal>
      <Modal open={bulkDeleteOpen} onClose={() => { if (!bulkBusy) setBulkDeleteOpen(false); }} title={`Supprimer ${selected.size} client${selected.size > 1 ? 's' : ''} ?`}
        footer={<>
          <button className="btn btn--ghost" onClick={() => setBulkDeleteOpen(false)} disabled={bulkBusy}>Annuler</button>
          <button className="btn btn--danger" onClick={runBulkDelete} disabled={bulkBusy}>{bulkBusy ? 'Suppression…' : 'Supprimer définitivement'}</button>
        </>}>
        <p style={{fontSize:13, marginBottom:10}}>Les clients sélectionnés, leurs critères et leurs matches seront perdus.</p>
        <p style={{fontSize:12, color:'var(--color-text-muted)', lineHeight:1.5}}>Cette action est définitive. Les traces de consentement Patrimoine restent pour l'audit RGPD.</p>
      </Modal>

      {/* Paquet G : modale "Supprimer ce client" stylee (remplace confirm() natif). */}
      <Modal
        open={!!deleteCandidate}
        onClose={() => { if (!deleting) setDeleteCandidate(null); }}
        title="Supprimer ce client ?"
        footer={<>
          <button className="btn" onClick={() => setDeleteCandidate(null)} disabled={deleting}>Annuler</button>
          <button className="btn btn--danger" onClick={confirmDelete} disabled={deleting}>
            {deleting ? 'Suppression…' : 'Supprimer définitivement'}
          </button>
        </>}>
        {deleteCandidate && (<>
          <p style={{fontSize:13, marginBottom:10}}>
            Tu vas supprimer <strong>{deleteCandidate.name}</strong>.
          </p>
          <p style={{fontSize:12, color:'var(--color-text-muted)', lineHeight:1.5}}>
            Cette action est <strong style={{color:'var(--color-danger)'}}>définitive</strong>. Le client, ses critères et ses matches seront perdus.
            Si le client a donné son consentement Patrimoine, la trace du consentement reste pour l'audit RGPD.
          </p>
        </>)}
      </Modal>
    </div>
  );
};

const ClientStatePill = ({ state }) => {
  const map = {
    prospect: { tone:'neutral', label:'Prospect' },
    actif:    { tone:'info',    label:'Actif' },
    chaud:    { tone:'warning', label:'Chaud',  pulse:true },
    signe:    { tone:'success', label:'Signé' },
    perdu:    { tone:'danger',  label:'Perdu' },
  };
  const cfg = map[state] || map.prospect;
  return <Pill tone={cfg.tone} pulse={cfg.pulse} dot>{cfg.label}</Pill>;
};

/* Paquet I : Kanban + drag&drop natif HTML5. La carte est draggable,
   la colonne destination ecoute dragover (preventDefault pour autoriser le
   drop) + drop -> onMove(clientId, newState). Le parent ClientsPage appelle
   PATCH /api/clients/{id}/statut puis reload. Update optimiste cote front. */
const ClientsKanban = ({ clients, onMove }) => {
  const cols = [
    { id:'prospect', label:'Prospect' },
    { id:'actif',    label:'Actif' },
    { id:'chaud',    label:'Chaud' },
    { id:'signe',    label:'Signé' },
    { id:'perdu',    label:'Perdu' },
  ];
  const [dragOver, setDragOver] = useState(null);  // colonne survolee
  const [draggingId, setDraggingId] = useState(null);

  const onDragStart = (e, c) => {
    setDraggingId(c.id);
    if (e.dataTransfer) {
      e.dataTransfer.setData('text/plain', String(c.id));
      e.dataTransfer.effectAllowed = 'move';
    }
  };
  const onDragEnd = () => { setDraggingId(null); setDragOver(null); };
  const onDragOver = (e, colId) => {
    e.preventDefault();  // requis pour activer le drop
    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
    if (dragOver !== colId) setDragOver(colId);
  };
  const onDragLeave = (e, colId) => {
    // Evite le flicker quand on traverse les cartes enfants
    if (e.currentTarget.contains(e.relatedTarget)) return;
    if (dragOver === colId) setDragOver(null);
  };
  const onDrop = (e, colId) => {
    e.preventDefault();
    const clientId = parseInt((e.dataTransfer && e.dataTransfer.getData('text/plain')) || '0', 10);
    setDragOver(null); setDraggingId(null);
    if (!clientId || !onMove) return;
    const c = clients.find((x) => x.id === clientId);
    if (!c || c.state === colId) return;  // pas de move si meme colonne
    onMove(clientId, colId);
  };

  return (
    <div className="kanban">
      {cols.map(col => {
        const items = clients.filter(c => c.state === col.id);
        const isHover = dragOver === col.id;
        return (
          <div
            key={col.id}
            className="kanban__col"
            data-state={col.id}
            style={isHover ? { background:'var(--color-surface-2)', outline:'1px dashed var(--accent)' } : {}}
            onDragOver={(e) => onDragOver(e, col.id)}
            onDragLeave={(e) => onDragLeave(e, col.id)}
            onDrop={(e) => onDrop(e, col.id)}
          >
            <div className="kanban__col-head">
              <span className="kanban__col-title">{col.label}</span>
              <span className="kanban__col-count">{items.length}</span>
            </div>
            <div className="kanban__col-body">
              {items.length === 0 ? (
                <div style={{textAlign:'center', padding:'40px 0', color:'var(--color-text-faint)', fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'.14em', textTransform:'uppercase'}}>—</div>
              ) : items.map(c => (
                <div
                  key={c.id}
                  className="kanban-card"
                  draggable={!!onMove}
                  onDragStart={(e) => onDragStart(e, c)}
                  onDragEnd={onDragEnd}
                  style={{cursor: onMove ? 'grab' : 'default', opacity: draggingId === c.id ? 0.4 : 1}}
                >
                  <span className="kanban-card__name">{c.name}</span>
                  <span className="kanban-card__meta">{c.villes}</span>
                  <span className="kanban-card__meta">{c.budget}</span>
                  <div className="kanban-card__foot">
                    <span style={{fontSize:10, color:'var(--color-text-dim)', fontFamily:'var(--font-mono)', letterSpacing:'.04em'}}>{c.critères}</span>
                    {/* Paquet C : guard pour eviter "nullj" quand date_derniere_interaction est NULL. */}
                    <Pill tone={c.lastContact != null && c.lastContact > 14 ? 'warning' : 'neutral'}>{c.lastContact != null ? c.lastContact + 'j' : '—'}</Pill>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

/* ============================================================ */
/* CLIENT FORM MODAL — Create + Edit (reutilisable)              */
/* Phase 2 : controlled inputs, pre-fill via prop `initial`,     */
/* submit construit un payload conforme a ClientCreate / Update. */
/* ============================================================ */
const _emptyForm = () => ({
  prenom: '', nom: '', email: '', telephone: '',
  agent_id: '', source_acquisition: '',
  transaction: 'vente', type_bien: '', pieces_min: '', budget_min: '', budget_max: '', surface_min: '',
  villes: '', options: [],
  // Paquet E : checkbox RGPD Patrimoine, n'est envoyee qu'en creation.
  auto_patrimoine: false,
});

const ClientFormModal = ({ open, onClose, title, initial, onSubmit }) => {
  const [form, setForm] = useState(_emptyForm());
  const [saving, setSaving] = useState(false);
  const isCreate = !initial; // checkbox Patrimoine visible uniquement en mode "Nouveau"

  useEffect(() => {
    if (!open) return;
    if (initial) {
      const cr = initial.criteres || {};
      setForm({
        prenom: initial.prenom || '',
        nom: initial.nom || '',
        email: initial.email || '',
        telephone: initial.telephone || '',
        agent_id: initial.agent_id || '',
        source_acquisition: initial.source_acquisition || '',
        type_bien: cr.type_bien || '',
        transaction: cr.transaction || 'vente',
        pieces_min: cr.pieces_min != null ? String(cr.pieces_min) : '',
        budget_min: cr.budget_min != null ? String(cr.budget_min) : '',
        budget_max: cr.budget_max != null ? String(cr.budget_max) : '',
        surface_min: cr.surface_min != null ? String(cr.surface_min) : '',
        villes: (cr.villes || []).join(', '),
        options: cr.options || [],
      });
    } else {
      setForm(_emptyForm());
    }
    setSaving(false);
  }, [open, initial]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const toggleOpt = (opt) => setForm((f) => ({
    ...f,
    options: (f.options || []).includes(opt)
      ? f.options.filter((o) => o !== opt)
      : [...(f.options || []), opt],
  }));

  const handleSubmit = async (e) => {
    if (e) e.preventDefault();
    if (!form.prenom.trim() || !form.nom.trim()) {
      alert('Prénom et nom sont obligatoires.');
      return;
    }
    const intOr = (v) => {
      const s = String(v || '').trim();
      if (!s) return null;
      const n = parseInt(s, 10);
      return isNaN(n) ? null : n;
    };
    const villesList = (form.villes || '')
      .split(/[,;]/).map((s) => s.trim()).filter(Boolean);
    // Paquet E : refuse l'auto_patrimoine si pas de contact (email/tel),
    // le backend ignorerait silencieusement sinon (routes/clients.py:344).
    if (isCreate && form.auto_patrimoine && !form.email.trim() && !form.telephone.trim()) {
      alert('Pour activer le partage Patrimoine, renseigne au moins un email ou un téléphone.');
      return;
    }
    const payload = {
      prenom: form.prenom.trim(),
      nom: form.nom.trim(),
      email: form.email.trim() || null,
      telephone: form.telephone.trim() || null,
      agent_id: form.agent_id.trim() || null,
      source_acquisition: form.source_acquisition.trim() || null,
      criteres: {
        type_bien: form.type_bien || null,
        transaction: form.transaction || 'vente',
        pieces_min: intOr(form.pieces_min),
        budget_min: intOr(form.budget_min),
        budget_max: intOr(form.budget_max),
        surface_min: intOr(form.surface_min),
        villes: villesList,
        options: form.options || [],
      },
    };
    // Paquet E : flag uniquement en creation (en edition, le consentement
    // se gere depuis la section Patrimoine de la modale detail).
    if (isCreate && form.auto_patrimoine) payload.auto_patrimoine = true;
    setSaving(true);
    try { await onSubmit(payload); }
    finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} title={title} wide
      footer={<>
        <button className="btn" onClick={onClose} disabled={saving}>Annuler</button>
        <button className="btn btn--primary" onClick={handleSubmit} disabled={saving}>
          {saving ? 'Enregistrement…' : 'Enregistrer'}
        </button>
      </>}>
      <form onSubmit={handleSubmit}>
        <div className="modal__section">
          <div className="modal__section-title">Informations personnelles</div>
          <div className="grid grid--2" style={{gap:16}}>
            <div className="field"><label className="field__label">Prénom *</label>
              <input className="input" value={form.prenom} onChange={(e)=>set('prenom', e.target.value)} required /></div>
            <div className="field"><label className="field__label">Nom *</label>
              <input className="input" value={form.nom} onChange={(e)=>set('nom', e.target.value)} required /></div>
            <div className="field"><label className="field__label">Email</label>
              <input className="input" type="email" value={form.email} onChange={(e)=>set('email', e.target.value)} /></div>
            <div className="field"><label className="field__label">Téléphone</label>
              <input className="input" type="tel" value={form.telephone} onChange={(e)=>set('telephone', e.target.value)} /></div>
            <div className="field"><label className="field__label">Agent (email)</label>
              <input className="input" type="email" value={form.agent_id} onChange={(e)=>set('agent_id', e.target.value)} placeholder="vide = vous-même" />
              <span className="field__hint">L'agent reçoit les notifications de matches.</span>
            </div>
            <div className="field"><label className="field__label">D'où vient ce client ?</label>
              <select className="select" value={form.source_acquisition} onChange={(e)=>set('source_acquisition', e.target.value)}>
                <option value="">— Non précisé —</option>
                <option value="bouche_a_oreille">Bouche-à-oreille</option>
                <option value="site_web">Site internet</option>
                <option value="seloger_lbc">SeLoger / LeBonCoin</option>
                <option value="reseau_social">Réseau social</option>
              </select>
            </div>
          </div>
        </div>

        <div className="modal__section">
          <div className="modal__section-title">Critères de recherche</div>
          <div className="grid grid--2" style={{gap:16}}>
            <div className="field"><label className="field__label">Transaction</label>
              <select className="select" value={form.transaction} onChange={(e)=>set('transaction', e.target.value)}>
                {TRANSACTIONS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
              </select>
            </div>
            <div className="field"><label className="field__label">Type</label>
              <select className="select" value={form.type_bien} onChange={(e)=>set('type_bien', e.target.value)}>
                <option value="">— Tout —</option>
                {_typeBienOptions()}
              </select>
            </div>
            <div className="field"><label className="field__label">{form.transaction === 'location' ? 'Loyer min (€ / mois)' : 'Budget min (€)'}</label>
              <input className="input" type="number" min="0" value={form.budget_min} onChange={(e)=>set('budget_min', e.target.value)} /></div>
            <div className="field"><label className="field__label">{form.transaction === 'location' ? 'Loyer max (€ / mois)' : 'Budget max (€)'}</label>
              <input className="input" type="number" min="0" value={form.budget_max} onChange={(e)=>set('budget_max', e.target.value)} /></div>
            <div className="field"><label className="field__label">Pièces minimum</label>
              <input className="input" type="number" min="1" value={form.pieces_min} onChange={(e)=>set('pieces_min', e.target.value)} /></div>
            <div className="field"><label className="field__label">Surface minimum (m²)</label>
              <input className="input" type="number" min="0" value={form.surface_min} onChange={(e)=>set('surface_min', e.target.value)} /></div>
          </div>
          <div className="field" style={{marginTop:16}}><label className="field__label">Villes (séparées par virgule)</label>
            <input className="input" value={form.villes} onChange={(e)=>set('villes', e.target.value)} placeholder="Lille, Ronchin, Tourcoing" /></div>
          <div className="field" style={{marginTop:16}}>
            <label className="field__label">Options</label>
            <div className="row" style={{gap:20, flexWrap:'wrap'}}>
              {['Jardin','Garage','Terrasse','Balcon','Cave','Ascenseur','Piscine'].map((opt) => {
                const checked = (form.options || []).includes(opt);
                return (
                  <label key={opt} className="checkbox">
                    <input type="checkbox" checked={checked} onChange={()=>toggleOpt(opt)} />
                    <span className="checkbox__box">
                      {checked && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
                    </span>
                    <span>{opt}</span>
                  </label>
                );
              })}
            </div>
          </div>
        </div>

        {/* Paquet E : checkbox RGPD Patrimoine uniquement en mode "Nouveau".
            En edition, le consentement se gere depuis la section Patrimoine
            de la modale detail (evite la double UI). */}
        {isCreate && (
          <div className="modal__section" style={{padding:'12px 14px', background:'var(--color-surface-2)', borderRadius:4, borderLeft:'3px solid var(--accent)'}}>
            <label className="checkbox" style={{alignItems:'flex-start', gap:10}}>
              <input type="checkbox" checked={!!form.auto_patrimoine} onChange={(e) => set('auto_patrimoine', e.target.checked)} />
              <span className="checkbox__box">
                {form.auto_patrimoine && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
              </span>
              <span style={{fontSize:13, lineHeight:1.5}}>
                <strong>Activer le partage Patrimoine</strong> pour ce client (envoi automatique au conseiller en gestion de patrimoine partenaire).
                <br />
                <span style={{color:'var(--color-text-muted)', fontSize:11}}>
                  Je certifie que le client a explicitement accepté d'être contacté par un conseiller en gestion de patrimoine partenaire (preuve RGPD).
                </span>
              </span>
            </label>
          </div>
        )}
      </form>
    </Modal>
  );
};

/* ============================================================ */
/* CLIENT DETAIL MODAL — lecture seule + historique matches      */
/* ============================================================ */
/* Paquet D : ClientDetailModal CRM complet (parite V1)
   - Contact bar : boutons Appeler / SMS / Email pre-remplis
   - Pipeline editable : dropdown statut + save -> PATCH /api/clients/{id}/statut
   - Notes : input add + render historique (anti-chrono) -> PATCH /api/clients/{id}/notes
   - Dropdown statut par match -> PATCH /api/clients/matches/{id}/statut
   - Bouton Export RGPD JSON -> GET /api/rgpd/clients/{id}/export
*/
const CLIENT_STATUTS = ['prospect', 'actif', 'chaud', 'signe', 'perdu'];
const MATCH_STATUTS = ['nouveau', 'vu', 'interesse', 'visite', 'achete', 'perdu'];
const MATCH_STATUT_TONE = { nouveau: 'neutral', vu: 'neutral', interesse: 'info', visite: 'info', achete: 'success', perdu: 'danger' };

const ClientDetailModal = ({ client, onClose, onEdit, onChanged }) => {
  const { toast } = useApp();
  const [matches, setMatches] = useState(null);
  const [statutDraft, setStatutDraft] = useState('');
  const [savingStatut, setSavingStatut] = useState(false);
  const [newNote, setNewNote] = useState('');
  const [savingNote, setSavingNote] = useState(false);
  const [exporting, setExporting] = useState(false);
  // Paquet E : section Patrimoine
  const [patrimoine, setPatrimoine] = useState(null); // {actif, date_consentement?, email_contact?, telephone_contact?, texte_a_afficher}
  const [showPatActivate, setShowPatActivate] = useState(false);
  const [patForm, setPatForm] = useState({ email: '', telephone: '', confirme: false });
  const [savingPat, setSavingPat] = useState(false);

  const reloadPat = (clientId) => {
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth(`/api/patrimoine/consentement/${clientId}`)
      .then((r) => setPatrimoine((r && r.data) || null))
      .catch(() => setPatrimoine(null));
  };

  // Reload matches + reset form state quand le client change.
  useEffect(() => {
    if (!client) { setMatches(null); setStatutDraft(''); setNewNote(''); setPatrimoine(null); return; }
    setStatutDraft((client.raw && client.raw.statut) || 'prospect');
    setNewNote('');
    setPatrimoine(null);
    setShowPatActivate(false);
    if (!window.SentinelAPI) { setMatches([]); return; }
    setMatches(null);
    window.SentinelAPI.fetchAuth(`/api/clients/${client.id}/matches`)
      .then((r) => setMatches(r.data || []))
      .catch(() => setMatches([]));
    reloadPat(client.id);
  }, [client && client.id]);

  if (!client) return null;
  const c = client.raw || {};
  const cr = c.criteres || {};
  const fmtDate = (d) => d ? new Date(d).toLocaleDateString('fr-FR', { day:'2-digit', month:'short', year:'numeric' }) : '—';
  const fmtDateTime = (d) => d ? new Date(d).toLocaleString('fr-FR', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' }) : '—';

  const saveStatut = async () => {
    if (!statutDraft || statutDraft === c.statut) return;
    setSavingStatut(true);
    try {
      const r = await window.SentinelAPI.fetchAuth(`/api/clients/${client.id}/statut`, { method: 'PATCH', body: { statut: statutDraft } });
      toast(`Statut → ${statutDraft}`, 'success');
      if (onChanged) onChanged({ ...c, statut: (r.data && r.data.statut) || statutDraft });
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
    finally { setSavingStatut(false); }
  };

  const addNote = async () => {
    const text = (newNote || '').trim();
    if (!text) return;
    setSavingNote(true);
    try {
      const r = await window.SentinelAPI.fetchAuth(`/api/clients/${client.id}/notes`, { method: 'PATCH', body: { text } });
      toast('Note ajoutee.', 'success');
      setNewNote('');
      if (onChanged) onChanged({ ...c, notes: (r.data && r.data.notes) || c.notes });
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
    finally { setSavingNote(false); }
  };

  const changeMatchStatut = async (m, newStatut) => {
    try {
      await window.SentinelAPI.fetchAuth(`/api/clients/matches/${m.id}/statut`, { method: 'PATCH', body: { statut: newStatut } });
      // Mise a jour optimiste cote modal
      setMatches((arr) => (arr || []).map((x) => x.id === m.id ? { ...x, statut: newStatut } : x));
      toast(`Match #${m.id} → ${newStatut}`, 'success');
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
  };

  // Paquet E : ouvrir la sous-modale d'activation Patrimoine.
  const openPatActivate = () => {
    setPatForm({
      email: c.email || '',
      telephone: c.telephone || '',
      confirme: false,
    });
    setShowPatActivate(true);
  };

  const submitPatrimoine = async () => {
    if (!patForm.confirme) { toast('Coche la case de consentement avant d enregistrer.', 'warning'); return; }
    if (!patForm.email.trim() && !patForm.telephone.trim()) {
      toast('Email ou telephone obligatoire pour activer le partage.', 'warning'); return;
    }
    setSavingPat(true);
    try {
      await window.SentinelAPI.fetchAuth('/api/patrimoine/consentement', {
        method: 'POST',
        body: {
          client_id: client.id,
          email_contact: patForm.email.trim() || null,
          telephone_contact: patForm.telephone.trim() || null,
        },
      });
      toast('Consentement Patrimoine enregistre.', 'success');
      setShowPatActivate(false);
      reloadPat(client.id);
    } catch (e) {
      // Backend renvoie 409 si un consentement actif existe deja
      toast('Echec : ' + (e.message || e), 'error');
    } finally { setSavingPat(false); }
  };

  const revokePatrimoine = async () => {
    if (!confirm('Retirer le consentement Patrimoine ?\n\nLe partage avec le conseiller en gestion de patrimoine sera desactive immediatement. La trace du consentement initial reste pour l audit RGPD.')) return;
    setSavingPat(true);
    try {
      await window.SentinelAPI.fetchAuth(`/api/patrimoine/consentement/${client.id}`, { method: 'DELETE' });
      toast('Consentement retire.', 'success');
      reloadPat(client.id);
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
    finally { setSavingPat(false); }
  };

  const exportRgpd = async () => {
    setExporting(true);
    try {
      const token = (window.SentinelAPI && window.SentinelAPI.getToken && window.SentinelAPI.getToken()) || '';
      const r = await fetch(`/api/rgpd/clients/${client.id}/export`, { headers: { Authorization: 'Bearer ' + token } });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      const safeName = (c.nom || 'client').toLowerCase().replace(/[^a-z0-9]+/g, '-');
      a.download = `rgpd-${safeName}-${client.id}-${new Date().toISOString().slice(0,10)}.json`;
      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
      toast('Export RGPD telecharge.', 'success');
    } catch (e) { toast('Echec export : ' + (e.message || e), 'error'); }
    finally { setExporting(false); }
  };

  // Parse les notes (anti-chrono, separe par \n\n). Chaque entree est
  // typiquement "[2026-05-09 14:30] auteur: texte..." - on coupe au 1er ":"
  // apres le timestamp pour separer header / corps.
  const parsedNotes = (() => {
    if (!c.notes) return [];
    return c.notes.split(/\n\s*\n+/).map((blk) => blk.trim()).filter(Boolean).map((blk, i) => {
      const m = blk.match(/^\[([^\]]+)\]\s*([^:]+):\s*([\s\S]*)$/);
      if (m) return { idx: i, when: m[1], who: m[2].trim(), text: m[3].trim() };
      return { idx: i, when: null, who: null, text: blk };
    });
  })();

  return (
    <Modal open={!!client} onClose={onClose} title={`Détail · ${client.name}`} wide
      footer={<>
        <button className="btn" onClick={exportRgpd} disabled={exporting}><I.download /> {exporting ? 'Export…' : 'Export RGPD'}</button>
        <button className="btn" onClick={onClose}>Fermer</button>
        <button className="btn btn--primary" onClick={onEdit}><I.edit /> Éditer</button>
      </>}>
      {/* Contact bar : actions rapides un clic */}
      <div className="modal__section" style={{display:'flex', gap:8, flexWrap:'wrap', alignItems:'center'}}>
        {c.telephone && (<>
          <a className="btn btn--sm" href={`tel:${c.telephone}`}>📞 Appeler</a>
          <a className="btn btn--sm" href={`sms:${c.telephone}`}>💬 SMS</a>
        </>)}
        {c.email && <a className="btn btn--sm" href={`mailto:${c.email}`}>✉ Email</a>}
        {!c.telephone && !c.email && <span style={{fontSize:12, color:'var(--color-text-dim)'}}>Aucune coordonnée enregistrée.</span>}
      </div>

      <div className="divider" />

      <div className="modal__section">
        <div className="modal__section-title">Coordonnées</div>
        <div className="grid grid--2" style={{gap:20}}>
          <Detail label="Email" value={c.email ? <a href={`mailto:${c.email}`}>{c.email}</a> : '—'} />
          <Detail label="Téléphone" value={c.telephone ? <a href={`tel:${c.telephone}`}>{c.telephone}</a> : '—'} />
          <Detail label="Agent responsable" value={c.agent_id || '—'} mono />
          <Detail label="Source" value={c.source_acquisition || '—'} mono />
          <Detail label="Créé le" value={fmtDate(c.date_creation)} mono />
          <Detail label="Dernière interaction" value={fmtDate(c.date_derniere_interaction)} mono />
        </div>
      </div>

      <div className="divider" />

      {/* Pipeline commercial editable */}
      <div className="modal__section">
        <div className="modal__section-title">Pipeline commercial</div>
        <div className="row" style={{gap:12, alignItems:'flex-end'}}>
          <div className="field" style={{flex:'1 1 240px'}}>
            <label className="field__label">Statut</label>
            <select className="select" value={statutDraft} onChange={(e) => setStatutDraft(e.target.value)}>
              {CLIENT_STATUTS.map((s) => (<option key={s} value={s}>{s}</option>))}
            </select>
          </div>
          <button className="btn btn--primary" onClick={saveStatut} disabled={savingStatut || statutDraft === c.statut}>
            {savingStatut ? 'Enregistrement…' : 'Enregistrer'}
          </button>
        </div>
      </div>

      <div className="divider" />

      {/* Notes : add + historique */}
      <div className="modal__section">
        <div className="modal__section-title">Notes ({parsedNotes.length})</div>
        <div className="row" style={{gap:8, alignItems:'flex-end', marginBottom:12}}>
          <div className="field" style={{flex:'1 1 auto'}}>
            <label className="field__label">Ajouter une note</label>
            <input className="input" value={newNote} onChange={(e) => setNewNote(e.target.value)} placeholder="Ex : Appel - intéressé par le T3 de Ronchin, recontact mardi"
              onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); addNote(); } }} />
          </div>
          <button className="btn btn--primary" onClick={addNote} disabled={savingNote || !newNote.trim()}>
            {savingNote ? 'Enregistrement…' : 'Ajouter'}
          </button>
        </div>
        {parsedNotes.length === 0 ? (
          <div style={{padding:'16px', textAlign:'center', color:'var(--color-text-dim)', fontSize:12}}>Aucune note pour l'instant.</div>
        ) : (
          <div style={{display:'grid', gap:8, maxHeight:240, overflowY:'auto'}}>
            {parsedNotes.map((n) => (
              <div key={n.idx} style={{padding:'10px 12px', background:'var(--color-surface-2)', borderRadius:4, fontSize:13, lineHeight:1.5}}>
                {n.when && (
                  <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.06em', color:'var(--color-text-dim)', marginBottom:4}}>
                    {n.when}{n.who ? ' · ' + n.who : ''}
                  </div>
                )}
                <div style={{whiteSpace:'pre-wrap', color:'var(--color-text)'}}>{n.text}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="divider" />

      {/* Paquet E : section Patrimoine RGPD — etat du consentement + actions */}
      <div className="modal__section">
        <div className="modal__section-title">Partage Patrimoine (RGPD)</div>
        {patrimoine === null ? (
          <div style={{padding:'12px 0', color:'var(--color-text-dim)', fontSize:12}}>Chargement…</div>
        ) : patrimoine.actif ? (
          <div className="row" style={{gap:14, alignItems:'center', flexWrap:'wrap'}}>
            <Pill tone="success" dot>Consentement actif</Pill>
            <span style={{fontSize:12, color:'var(--color-text-muted)'}}>
              Depuis le {fmtDateTime(patrimoine.date_consentement)}
              {patrimoine.email_contact ? ` · contact ${patrimoine.email_contact}` : ''}
              {patrimoine.telephone_contact ? ` · ${patrimoine.telephone_contact}` : ''}
            </span>
            <button className="btn btn--sm btn--danger" onClick={revokePatrimoine} disabled={savingPat}>Retirer le consentement</button>
          </div>
        ) : (
          <div className="row" style={{gap:14, alignItems:'center', flexWrap:'wrap'}}>
            <Pill tone="neutral" dot>Non actif</Pill>
            <span style={{fontSize:12, color:'var(--color-text-muted)', flex:'1 1 auto', minWidth:200}}>
              Active le partage uniquement si le client a explicitement accepté d'être contacté par un conseiller en gestion de patrimoine partenaire (preuve légale RGPD).
            </span>
            <button className="btn btn--sm btn--primary" onClick={openPatActivate} disabled={savingPat}>Activer le partage</button>
          </div>
        )}
      </div>

      <div className="divider" />

      <div className="modal__section">
        <div className="modal__section-title">Critères de recherche</div>
        <div className="grid grid--2" style={{gap:20}}>
          <Detail label="Transaction" value={_transactionLabel(cr)} />
          <Detail label="Type" value={cr.type_bien ? _typeBienLabel(cr.type_bien) : 'Tout'} />
          <Detail label={_isLocation(cr) ? 'Loyer min' : 'Budget min'} value={cr.budget_min != null ? cr.budget_min.toLocaleString('fr-FR') + (_isLocation(cr) ? ' € /mois' : ' €') : '—'} mono />
          <Detail label={_isLocation(cr) ? 'Loyer max' : 'Budget max'} value={cr.budget_max != null ? cr.budget_max.toLocaleString('fr-FR') + (_isLocation(cr) ? ' € /mois' : ' €') : '—'} mono />
          <Detail label="Pièces minimum" value={cr.pieces_min ?? '—'} />
          <Detail label="Surface minimum" value={cr.surface_min != null ? cr.surface_min + ' m²' : '—'} />
          <Detail label="Villes" value={(cr.villes && cr.villes.length) ? cr.villes.join(', ') : '—'} />
        </div>
        {(cr.options && cr.options.length > 0) && (
          <div style={{marginTop:16, fontSize:12, color:'var(--color-text-muted)'}}>
            <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Options · </span>
            {cr.options.join(' · ')}
          </div>
        )}
      </div>

      <div className="divider" />

      <div className="modal__section">
        <div className="modal__section-title">
          Historique des matches{matches && matches.length > 0 ? ` (${matches.length})` : ''}
        </div>
        {matches === null ? (
          <Skel kind="rows" n={3} pad={false} />
        ) : matches.length === 0 ? (
          <EmptyState compact icon="check" title="Aucun match pour l'instant" desc="Les matches apparaissent dès qu'une annonce correspond aux critères de ce client." />
        ) : (
          <table className="table table--cards" style={{border:'1px solid var(--color-border)', borderRadius:4}}>
            <thead><tr><th>Score</th><th>Annonce</th><th className="num" style={{textAlign:'right'}}>Prix</th><th>Statut</th><th>Date</th></tr></thead>
            <tbody>
              {matches.slice(0, 20).map((m) => {
                const a = m.annonce || {};
                return (
                  <tr key={m.id}>
                    <td data-l="Score"><ScoreBar score={m.score} /></td>
                    <td className="tcard-head">
                      <div style={{fontSize:13}}>{a.titre || `${a.ville || ''}`.trim() || `Annonce #${m.annonce_id}`}</div>
                      {a.url && <a href={a.url} target="_blank" rel="noopener" style={{fontSize:10, color:'var(--color-text-dim)'}}>{fmt.source(a.source)} ↗</a>}
                    </td>
                    <td className="num tcard-side" style={{textAlign:'right'}}>{_prixTexte(a)}</td>
                    <td data-l="Statut">
                      <select className="select" style={{padding:'4px 24px 4px 8px', width:'auto'}}
                        value={MATCH_STATUTS.includes(m.statut) ? m.statut : 'nouveau'}
                        onChange={(e) => changeMatchStatut(m, e.target.value)}>
                        {MATCH_STATUTS.map((s) => (<option key={s} value={s}>{s}</option>))}
                      </select>
                    </td>
                    <td className="num" data-l="Date" style={{fontSize:11, color:'var(--color-text-muted)'}}>{m.date_match ? new Date(m.date_match).toLocaleDateString('fr-FR') : '—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {/* Paquet E : sous-modale activation Patrimoine RGPD.
          Stocke IP + texte exact backend pour preuve legale CNIL. */}
      {showPatActivate && (
        <Modal open={showPatActivate} onClose={() => { if (!savingPat) setShowPatActivate(false); }} title="Activer le partage Patrimoine"
          footer={<>
            <button className="btn" onClick={() => setShowPatActivate(false)} disabled={savingPat}>Annuler</button>
            <button className="btn btn--primary" onClick={submitPatrimoine} disabled={savingPat || !patForm.confirme}>
              {savingPat ? 'Enregistrement…' : 'Enregistrer le consentement'}
            </button>
          </>}>
          <p style={{fontSize:13, marginBottom:14, lineHeight:1.5}}>
            Tu vas partager les coordonnées de <strong>{client.name}</strong> avec un conseiller en gestion de patrimoine partenaire. Le client doit avoir donné son accord verbal explicite avant.
          </p>
          <div className="grid grid--2" style={{gap:14, marginBottom:14}}>
            <div className="field"><label className="field__label">Email contact</label>
              <input className="input" type="email" value={patForm.email} onChange={(e) => setPatForm({...patForm, email: e.target.value})} placeholder="optionnel si telephone renseigne" /></div>
            <div className="field"><label className="field__label">Téléphone contact</label>
              <input className="input" type="tel" value={patForm.telephone} onChange={(e) => setPatForm({...patForm, telephone: e.target.value})} placeholder="optionnel si email renseigne" /></div>
          </div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:6}}>
            Texte de consentement
          </div>
          <div style={{padding:'10px 12px', background:'var(--color-surface-2)', borderRadius:4, fontSize:12, color:'var(--color-text-muted)', marginBottom:14, lineHeight:1.5, whiteSpace:'pre-wrap'}}>
            {patrimoine && patrimoine.texte_a_afficher ? patrimoine.texte_a_afficher : 'Le client accepte d être contacté par un conseiller en gestion de patrimoine partenaire pour évaluation de son projet immobilier.'}
          </div>
          <div style={{padding:'12px 14px', background:'var(--color-surface-2)', borderRadius:4, borderLeft:'3px solid var(--accent)'}}>
            <label className="checkbox" style={{alignItems:'flex-start', gap:10}}>
              <input type="checkbox" checked={patForm.confirme} onChange={(e) => setPatForm({...patForm, confirme: e.target.checked})} />
              <span className="checkbox__box">
                {patForm.confirme && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
              </span>
              <span style={{fontSize:13, lineHeight:1.5}}>
                Je confirme que le client a explicitement accepté d'être contacté par un conseiller en gestion de patrimoine partenaire (preuve légale RGPD).
              </span>
            </label>
          </div>
        </Modal>
      )}
    </Modal>
  );
};

/* ============================================================ */
/* ANNONCE DETAIL MODAL                                           */
/* ============================================================ */
const Detail = ({ label, value, big, mono }) => (
  <div>
    <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:6}}>{label}</div>
    <div style={{
      fontFamily: big ? 'var(--font-display)' : (mono ? 'var(--font-mono)' : 'var(--font-body)'),
      fontWeight: big ? 300 : 400,
      fontSize: big ? 20 : 13,
      letterSpacing: big ? '-.015em' : '0',
      fontVariantNumeric: 'tabular-nums',
      color: 'var(--color-text)',
    }}>{value}</div>
  </div>
);

/* ============================================================ */
/* ANNONCES                                                      */
/* ============================================================ */
// Niveau geo (0/4 = exact, 1-3 = approx) -> pill
const _geoTier = (lat, lng, niveau) => {
  if (lat == null || lng == null) return { tone: 'none', label: '—' };
  if (niveau === 0 || niveau === 4) return { tone: 'exact', label: 'Exact' };
  return { tone: 'approx', label: 'Approx' };
};

/* Chantier 04 : « il y a 12 min » pour la sous-ligne des resultats */
const _relTime = (iso) => {
  if (!iso) return null;
  const d = new Date(iso);
  if (isNaN(d.getTime())) return null;
  const sec = Math.max(0, (Date.now() - d.getTime()) / 1000);
  if (sec < 60) return "à l'instant";
  const m = Math.floor(sec / 60);
  if (m < 60) return `il y a ${m} min`;
  const h = Math.floor(m / 60);
  if (h < 24) return `il y a ${h} h`;
  const j = Math.floor(h / 24);
  if (j < 30) return `il y a ${j} j`;
  return d.toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' });
};
const _FILTER_LABELS = { source: 'Source', transaction: 'Transaction', type_bien: 'Type', prix_min: 'Prix min', prix_max: 'Prix max', ville: 'Ville', geolocalise: 'Géoloc.', score_min: 'Score' };
const _filterChipLabel = (k, v) => {
  switch (k) {
    case 'transaction': return _transactionLabel({ transaction: v });
    case 'type_bien': return _typeBienLabel(v);
    case 'prix_min': return `≥ ${Number(v).toLocaleString('fr-FR')} €`;
    case 'prix_max': return `≤ ${Number(v).toLocaleString('fr-FR')} €`;
    case 'geolocalise': return v === 'true' ? 'géolocalisées' : 'non géolocalisées';
    case 'score_min': return `≥ ${v} %`;
    case 'source': return fmt.source(v);
    default: return v;
  }
};

const AnnoncesPage = () => {
  const { toast, user, goto } = useApp();
  const [annonces, setAnnonces] = useState(null);
  const [detail, setDetail] = useState(null);   // {id, ...} dans la liste
  const [collecting, setCollecting] = useState(false);
  // Chantier 04 : barre unique (recherche, filtres en drawer, tri, export,
  // menu ⋯), vues enregistrees (localStorage), chips de filtres actifs.
  const [q, setQ] = useState('');
  const [sort, setSort] = useState('score');
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [vues, setVues] = useState(() => {
    try { return JSON.parse(localStorage.getItem('sentinel.annonces.vues') || '[]'); } catch (_) { return []; }
  });
  const [saveVueOpen, setSaveVueOpen] = useState(false);
  const [vueName, setVueName] = useState('');
  useEffect(() => {
    if (!drawerOpen) return;
    const k = (e) => { if (e.key === 'Escape') setDrawerOpen(false); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [drawerOpen]);

  // Filtres (controlled inputs)
  const [filters, setFilters] = useState({
    source: '', transaction: '', type_bien: '', prix_min: '', prix_max: '',
    ville: '', geolocalise: '', score_min: '',
  });
  const [appliedFilters, setAppliedFilters] = useState(filters);

  const setF = (k, v) => setFilters((f) => ({ ...f, [k]: v }));
  const resetFilters = () => {
    const empty = { source: '', transaction: '', type_bien: '', prix_min: '', prix_max: '', ville: '', geolocalise: '', score_min: '' };
    setFilters(empty);
    setAppliedFilters(empty);
  };
  const applyFilters = () => setAppliedFilters(filters);

  const reload = () => {
    if (!window.SentinelAPI) { setAnnonces([]); return; }
    setAnnonces(null);
    const qs = new URLSearchParams();
    Object.entries(appliedFilters).forEach(([k, v]) => {
      if (v === '' || v == null) return;
      qs.append(k, v);
    });
    qs.append('limit', '200');
    window.SentinelAPI.fetchAuth('/api/annonces?' + qs.toString())
      .then((r) => setAnnonces(r.data || []))
      .catch((e) => { console.warn('[Annonces] fetch err', e); setAnnonces([]); toast('Erreur chargement annonces.', 'error'); });
  };

  useEffect(reload, [appliedFilters]);

  const list = annonces || [];
  const activeFilters = Object.entries(appliedFilters).filter(([, v]) => v !== '' && v != null);
  const removeFilter = (k) => { const next = { ...appliedFilters, [k]: '' }; setFilters(next); setAppliedFilters(next); };
  const persistVues = (arr) => { setVues(arr); try { localStorage.setItem('sentinel.annonces.vues', JSON.stringify(arr)); } catch (_) {} };
  const sameFilters = (a, b) => JSON.stringify(a) === JSON.stringify(b);
  const activeVue = vues.find((v) => sameFilters(v.filters, appliedFilters) && (v.sort || 'score') === sort && (v.q || '') === q);
  const applyVue = (v) => { setFilters(v.filters); setAppliedFilters(v.filters); setSort(v.sort || 'score'); setQ(v.q || ''); };
  const saveVue = () => {
    const label = vueName.trim();
    if (!label) return;
    persistVues([...vues, { id: Date.now(), label, filters: appliedFilters, sort, q }]);
    setSaveVueOpen(false); setVueName('');
    toast('Vue enregistrée.', 'success');
  };
  const removeVue = (id) => persistVues(vues.filter((v) => v.id !== id));
  const visible = useMemo(() => {
    let l = annonces || [];
    if (q) {
      const ql = q.toLowerCase();
      l = l.filter((a) => [a.titre, a.ville, a.code_postal, a.source, a.type_bien].filter(Boolean).some((x) => String(x).toLowerCase().includes(ql)));
    }
    const by = {
      score: (a, b) => (b.score_max ?? -1) - (a.score_max ?? -1),
      date: (a, b) => new Date(b.date_publication || b.date_collecte || 0) - new Date(a.date_publication || a.date_collecte || 0),
      prix_asc: (a, b) => (a.prix ?? Infinity) - (b.prix ?? Infinity),
      prix_desc: (a, b) => (b.prix ?? -1) - (a.prix ?? -1),
      surface: (a, b) => (b.surface ?? -1) - (a.surface ?? -1),
    };
    return [...l].sort(by[sort] || by.score);
  }, [annonces, q, sort]);
  const exportCsv = () => {
    if (!visible.length) return;
    const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
    const head = ['titre', 'type_bien', 'transaction', 'prix', 'surface', 'pieces', 'ville', 'code_postal', 'score_max', 'source', 'url'];
    const lines = [head.join(';')].concat(visible.map((a) => head.map((k) => esc(a[k])).join(';')));
    const blob = new Blob(['\ufeff' + lines.join('\n')], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const el = document.createElement('a');
    el.href = url; el.download = `annonces-${new Date().toISOString().slice(0, 10)}.csv`;
    document.body.appendChild(el); el.click(); el.remove();
    URL.revokeObjectURL(url);
    toast(`${visible.length} annonce${visible.length > 1 ? 's' : ''} exportée${visible.length > 1 ? 's' : ''}.`, 'success');
  };

  // Paquet I : modales stylees vs confirm() natif (parite V1 annonces.html).
  const [deleteOne, setDeleteOne] = useState(null);   // annonce a supprimer (unitaire)
  const [deletingOne, setDeletingOne] = useState(false);
  const [showBulkWipe, setShowBulkWipe] = useState(false);
  const [bulkWipeConfirm, setBulkWipeConfirm] = useState(''); // texte tape (V1 attend "SUPPRIMER")
  const [wipingAll, setWipingAll] = useState(false);

  const handleDelete = (a) => setDeleteOne(a);
  const confirmDeleteOne = async () => {
    if (!deleteOne) return;
    setDeletingOne(true);
    try {
      await window.SentinelAPI.fetchAuth(`/api/annonces/${deleteOne.id}`, { method: 'DELETE' });
      toast('Annonce supprimée.', 'success');
      setDeleteOne(null);
      reload();
    } catch (e) { toast('Échec suppression : ' + (e.message || e), 'error'); }
    finally { setDeletingOne(false); }
  };

  const handleDeleteAll = () => {
    if (!user.is_superadmin) { toast('Réservé super-admin.', 'error'); return; }
    setBulkWipeConfirm('');
    setShowBulkWipe(true);
  };
  const confirmBulkWipe = async () => {
    if (bulkWipeConfirm !== 'SUPPRIMER') { toast('Tape SUPPRIMER (majuscules) pour confirmer.', 'warning'); return; }
    setWipingAll(true);
    try {
      // Lot 0 audit : le backend exige ?confirm=YES_I_AM_SURE (400 sinon).
      await window.SentinelAPI.fetchAuth('/api/annonces?confirm=YES_I_AM_SURE', { method: 'DELETE' });
      toast('Toutes les annonces supprimées.', 'success');
      setShowBulkWipe(false);
      reload();
    } catch (e) { toast('Échec : ' + (e.message || e), 'error'); }
    finally { setWipingAll(false); }
  };

  const handleCollecte = async () => {
    if (!(user.is_cabinet_admin || user.is_superadmin)) {
      toast('Réservé au compte cabinet (action facturée Stream Estate).', 'error');
      return;
    }
    if (!confirm('Lancer une collecte Stream Estate maintenant ?\n\n(action facturée, pipeline complet : collecte → matching → notifications)')) return;
    setCollecting(true);
    try {
      const r = await window.SentinelAPI.fetchAuth('/api/collecte/run', { method: 'POST', body: { notifier: true } });
      const c = (r.data && r.data.collecte) || {};
      const m = (r.data && r.data.matching) || {};
      const n = (r.data && r.data.notifications_envoyees) || 0;
      // Backend : {recus, inseres, skips, erreurs, ignorees_hors_zone, zones,
      // transactions, mode, collecte_initiale, cout_estime_eur}
      // et {annonces_traitees, matches, matches_parfaits, bons_matches}.
      toast(_collecteResume(c, m, n), 'success', 9000);
      reload();
    } catch (e) {
      toast('Échec collecte : ' + (e.message || e), 'error');
    } finally {
      setCollecting(false);
    }
  };

  // Collecte complète (8 sept 2026) : rattrapage du stock Stream Estate sans
  // fenêtre de date, paginé, plafonné par transaction. On sonde d'abord le
  // volume disponible (0,01 € par transaction) pour afficher le coût réel.
  const [collectingFull, setCollectingFull] = useState(false);
  const handleCollecteComplete = async () => {
    if (!user.is_superadmin) { toast('Réservé au super-admin (action facturée).', 'error'); return; }
    setCollectingFull(true);
    try {
      const v = await window.SentinelAPI.fetchAuth('/api/collecte/volume');
      const d = (v && v.data) || {};
      const entrees = Object.entries(d.transactions || {});
      const lignes = entrees.map(([t, x]) => {
        const dispo = x.disponibles == null ? 'volume inconnu'
          : (x.disponibles >= 10000 ? '≥ ' : '') + Number(x.disponibles).toLocaleString('fr-FR') + ' disponibles';
        const suite = x.a_rattraper ? `jusqu'à ${x.plafond} récupérées` : 'stock suffisant, ignorée';
        return `${_transactionLabel({ transaction: t })} (${(x.villes || []).join(', ') || 'toutes villes'}) : ${dispo}, ${x.en_base} déjà en base → ${suite}`;
      });
      if (!entrees.some(([, x]) => x.a_rattraper)) {
        alert(`Rien à rattraper : chaque transaction a déjà au moins ${d.plafond_par_transaction} annonces en base.\n\n` + lignes.join('\n'));
        return;
      }
      const msg = `Stream Estate pour vos critères, par transaction :\n` +
        lignes.join('\n') +
        `\n\nCollecte complète : ${_eur2(d.cout_complet_max_eur)} maximum (0,01 € par annonce), puis matching et notifications. Lancer ?`;
      if (!confirm(msg)) return;
      const r = await window.SentinelAPI.fetchAuth('/api/collecte/run', { method: 'POST', body: { notifier: true, mode: 'complet' } });
      const c = (r.data && r.data.collecte) || {};
      const m = (r.data && r.data.matching) || {};
      const n = (r.data && r.data.notifications_envoyees) || 0;
      toast(_collecteResume(c, m, n), 'success', 9000);
      reload();
    } catch (e) {
      toast('Échec collecte complète : ' + (e.message || e), 'error');
    } finally {
      setCollectingFull(false);
    }
  };

  const handleGeolocalize = async (a) => {
    try {
      await window.SentinelAPI.fetchAuth(`/api/annonces/${a.id}/geolocalize`, { method: 'POST' });
      toast('Géolocalisation relancée.', 'success');
      reload();
    } catch (e) { toast('Échec géoloc : ' + (e.message || e), 'error'); }
  };

  return (
    <div className="page">
      <PageHeader
        title="Annonces"
        sub={annonces === null
          ? "Chargement…"
          : `${visible.length} résultat${visible.length > 1 ? 's' : ''}${(activeFilters.length || q) ? ' (filtrés)' : ''}`}
        actions={<>
          {(user.is_cabinet_admin || user.is_superadmin) && (
            <button className="btn btn--primary" onClick={handleCollecte} disabled={collecting || collectingFull}>
              <I.refresh /> {collecting ? 'Collecte en cours…' : collectingFull ? 'Collecte complète…' : 'Collecter maintenant'}
            </button>
          )}
        </>}
      />

      {/* Barre unique 30 px : recherche · Filtres (n) · ... · tri · export · ⋯ */}
      <div className="abar">
        <div className="input-row input-row--sm abar__search">
          <I.search />
          <input placeholder="Ville, référence, titre…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <button className={`btn btn--sm ${activeFilters.length ? 'is-on' : ''}`} onClick={() => setDrawerOpen(true)} aria-haspopup="dialog">
          <I.filter /> Filtres{activeFilters.length > 0 && <span className="badge-cnt">{activeFilters.length}</span>}
        </button>
        <div className="abar__spacer" />
        <label className="abar__sort">Trier :
          <select className="select select--sm select--bare" value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Trier">
            <option value="score">score</option>
            <option value="date">date</option>
            <option value="prix_asc">prix croissant</option>
            <option value="prix_desc">prix décroissant</option>
            <option value="surface">surface</option>
          </select>
        </label>
        <button className="btn btn--sm" onClick={exportCsv} disabled={!visible.length} title="Exporter en CSV"><I.download /><span className="m-hide"> Exporter</span></button>
        {(user.is_cabinet_admin || user.is_superadmin) && (
          <RowMenu items={[
            ...(user.is_cabinet_admin || user.is_superadmin ? [{ label: 'Relancer la collecte', onClick: handleCollecte }] : []),
            ...(user.is_superadmin ? [{ label: 'Collecte complète…', onClick: handleCollecteComplete }] : []),
            ...(user.is_superadmin ? [{ label: 'Supprimer toutes les annonces…', danger: true, onClick: handleDeleteAll }] : []),
          ]} />
        )}
      </div>

      {/* Vues enregistrees : chips auto-largeur, vue active = bordure blanche */}
      <div className="chips">
        <span className="chips__label">Vues</span>
        {vues.map((v) => (
          <button key={v.id} className={`chip ${activeVue && activeVue.id === v.id ? 'on' : ''}`} onClick={() => applyVue(v)}>
            <span>{v.label}</span>
            <span className="chip__x" role="button" title="Retirer la vue" onClick={(e) => { e.stopPropagation(); removeVue(v.id); }}>×</span>
          </button>
        ))}
        <button className="chip chip--add" onClick={() => { setVueName(''); setSaveVueOpen(true); }}>+ Enregistrer la vue</button>
      </div>
      {activeFilters.length > 0 && (
        <div className="chips chips--filters">
          {activeFilters.map(([k, v]) => (
            <button key={k} className="chip chip--filter" onClick={() => removeFilter(k)} title="Retirer ce filtre">
              <span className="chip__k">{_FILTER_LABELS[k] || k}</span><span>{_filterChipLabel(k, v)}</span><span className="chip__x">×</span>
            </button>
          ))}
          <button className="chip chip--ghost" onClick={resetFilters}>Tout effacer</button>
        </div>
      )}

      {annonces === null ? (
        <Card flush><Skel kind="rows" n={6} /></Card>
      ) : visible.length === 0 ? (
        <Card flush>
          <EmptyState icon="annonces"
            title={list.length === 0 ? "Aucune annonce" : "Aucune annonce ne correspond"}
            desc={list.length === 0 ? "Lance une collecte pour charger les annonces de tes zones." : "Élargis les filtres ou modifie la recherche."}
            action={list.length === 0
              ? ((user.is_cabinet_admin || user.is_superadmin) ? <button className="btn btn--primary" onClick={handleCollecte}><I.refresh /> Collecter maintenant</button> : null)
              : <button className="btn btn--primary" onClick={() => { resetFilters(); setQ(''); }}>Effacer les filtres</button>} />
        </Card>
      ) : (
        <Card flush className="ann-list">
          {visible.map((a) => {
            const geo = _geoTier(a.lat, a.lng, a.geo_niveau);
            const sub = [
              fmt.source(a.source),
              a.surface != null ? a.surface + ' m²' : null,
              a.pieces != null ? a.pieces + ' p.' : null,
              _relTime(a.date_publication || a.date_collecte),
              geo.tone === 'approx' ? 'géoloc. approx.' : geo.tone === 'none' ? 'non géolocalisée' : null,
            ].filter(Boolean).join(' · ');
            const tier = a.score_max == null ? null : a.score_max >= 80 ? 'high' : a.score_max >= 50 ? 'mid' : 'low';
            return (
              <div key={a.id} className="ann-row" role="button" tabIndex={0}
                onClick={() => setDetail(a)} onKeyDown={(e) => { if (e.key === 'Enter') setDetail(a); }}>
                <span className="ann-row__thumb">
                  {a.photos && a.photos[0] ? <img src={a.photos[0]} alt="" loading="lazy" onError={(e) => { e.target.style.display = 'none'; }} /> : null}
                </span>
                <span className="ann-row__main">
                  <span className="ann-row__title">{a.titre || a.ville || `Annonce #${a.id}`}
                    <span className="ann-row__loc"> — {_typeBienLabel(a.type_bien)}{a.ville ? ', ' + a.ville : ''}</span>
                  </span>
                  <span className="ann-row__sub">{sub}</span>
                </span>
                <span className="ann-row__price">{_prixTexte(a)}</span>
                <span className="ann-row__score">
                  {tier ? <span className="score-pill" data-tier={tier}>{a.score_max} %</span> : <span className="score-pill score-pill--none">—</span>}
                </span>
                <span className="rowact" onClick={(e) => e.stopPropagation()}>
                  {a.url && <a className="btn btn--sm btn--icon" title="Lien source" href={a.url} target="_blank" rel="noopener"><I.external /></a>}
                  {(user.is_cabinet_admin || user.is_superadmin) && (
                    <button className="btn btn--sm btn--icon" title="Supprimer" onClick={() => handleDelete(a)}><I.trash /></button>
                  )}
                </span>
              </div>
            );
          })}
        </Card>
      )}

      {/* Drawer de filtres (ferme par defaut) */}
      {drawerOpen && (
        <div className="drawer-veil" onClick={() => setDrawerOpen(false)}>
          <aside className="drawer" role="dialog" aria-label="Filtres" onClick={(e) => e.stopPropagation()}>
            <div className="drawer__head">
              <span className="drawer__title">Filtres</span>
              <button className="modal__close" onClick={() => setDrawerOpen(false)} aria-label="Fermer"><I.close /></button>
            </div>
            <div className="drawer__body">
              <div className="field"><label className="field__label">Source</label>
                <select className="select" value={filters.source} onChange={(e)=>setF('source', e.target.value)}>
                  <option value="">— Toutes —</option>
                  <option value="leboncoin">leboncoin</option>
                  <option value="stream_estate">web</option>
                  <option value="seloger">seloger</option>
                </select>
              </div>
              <div className="field"><label className="field__label">Transaction</label>
                <select className="select" value={filters.transaction} onChange={(e)=>setF('transaction', e.target.value)}>
                  <option value="">— Toutes —</option>
                  {TRANSACTIONS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                </select>
              </div>
              <div className="field"><label className="field__label">Type</label>
                <select className="select" value={filters.type_bien} onChange={(e)=>setF('type_bien', e.target.value)}>
                  <option value="">— Tous —</option>
                  {_typeBienOptions()}
                </select>
              </div>
              <div className="grid grid--2" style={{gap:12}}>
                <div className="field"><label className="field__label">Prix min (€)</label>
                  <input className="input" type="number" min="0" value={filters.prix_min} onChange={(e)=>setF('prix_min', e.target.value)} placeholder="ex. 100000" /></div>
                <div className="field"><label className="field__label">Prix max (€)</label>
                  <input className="input" type="number" min="0" value={filters.prix_max} onChange={(e)=>setF('prix_max', e.target.value)} placeholder="ex. 500000" /></div>
              </div>
              <div className="field"><label className="field__label">Ville</label>
                <input className="input" value={filters.ville} onChange={(e)=>setF('ville', e.target.value)} placeholder="ex. Lille" /></div>
              <div className="field"><label className="field__label">Géolocalisation</label>
                <select className="select" value={filters.geolocalise} onChange={(e)=>setF('geolocalise', e.target.value)}>
                  <option value="">— Toutes —</option>
                  <option value="true">Géolocalisées</option>
                  <option value="false">Non géolocalisées</option>
                </select>
              </div>
              <div className="field"><label className="field__label">Score minimum (%)</label>
                <input className="input" type="number" min="0" max="100" value={filters.score_min} onChange={(e)=>setF('score_min', e.target.value)} placeholder="ex. 70" /></div>
            </div>
            <div className="drawer__foot">
              <button className="btn btn--ghost" onClick={resetFilters}>Réinitialiser</button>
              <button className="btn btn--primary" onClick={() => { applyFilters(); setDrawerOpen(false); }}>Appliquer</button>
            </div>
          </aside>
        </div>
      )}

      <Modal open={saveVueOpen} onClose={() => setSaveVueOpen(false)} title="Enregistrer la vue"
        footer={<>
          <button className="btn btn--ghost" onClick={() => setSaveVueOpen(false)}>Annuler</button>
          <button className="btn btn--primary" onClick={saveVue} disabled={!vueName.trim()}>Enregistrer</button>
        </>}>
        <div className="field">
          <label className="field__label">Nom de la vue</label>
          <input className="input" value={vueName} onChange={(e) => setVueName(e.target.value)} placeholder="ex. Lille · ≤ 500 k€" autoFocus
            onKeyDown={(e) => { if (e.key === 'Enter') saveVue(); }} />
          <div className="field__hint">La vue mémorise les filtres, le tri et la recherche actuels.</div>
        </div>
      </Modal>

      <AnnonceDetailModalV2 annonce={detail} onClose={()=>setDetail(null)}
        onGeolocalize={handleGeolocalize}
        onDelete={(a) => { handleDelete(a); setDetail(null); }} />

      {/* Paquet I : modale suppression unitaire (vs confirm() natif). */}
      <Modal
        open={!!deleteOne}
        onClose={() => { if (!deletingOne) setDeleteOne(null); }}
        title="Supprimer cette annonce ?"
        footer={<>
          <button className="btn" onClick={() => setDeleteOne(null)} disabled={deletingOne}>Annuler</button>
          <button className="btn btn--danger" onClick={confirmDeleteOne} disabled={deletingOne}>
            {deletingOne ? 'Suppression…' : 'Supprimer'}
          </button>
        </>}>
        {deleteOne && (<>
          <p style={{fontSize:13, marginBottom:10}}>
            Tu vas supprimer l'annonce <strong>{deleteOne.titre || deleteOne.ville || '#' + deleteOne.id}</strong>.
          </p>
          <p style={{fontSize:12, color:'var(--color-text-muted)', lineHeight:1.5}}>
            L'annonce est partagee entre tous les cabinets (collecte mutualisee). Sa suppression affecte les matches existants pour tous les utilisateurs.
          </p>
        </>)}
      </Modal>

      {/* Paquet I : modale bulk wipe (super-admin). Demande de taper "SUPPRIMER" en majuscules
          pour valider, parite V1 (annonces.html). */}
      <Modal
        open={showBulkWipe}
        onClose={() => { if (!wipingAll) setShowBulkWipe(false); }}
        title="⚠ Supprimer TOUTES les annonces ?"
        footer={<>
          <button className="btn" onClick={() => setShowBulkWipe(false)} disabled={wipingAll}>Annuler</button>
          <button className="btn btn--danger" onClick={confirmBulkWipe} disabled={wipingAll || bulkWipeConfirm !== 'SUPPRIMER'}>
            {wipingAll ? 'Suppression…' : 'Tout supprimer definitivement'}
          </button>
        </>}>
        <p style={{fontSize:13, marginBottom:10, color:'var(--color-danger)'}}>
          <strong>Action irreversible, globale (tous cabinets).</strong>
        </p>
        <p style={{fontSize:12, color:'var(--color-text-muted)', lineHeight:1.5, marginBottom:16}}>
          Toutes les annonces collectees, leurs matches et enrichissements DVF associes seront perdus. La prochaine collecte recharge depuis Stream Estate, mais l'historique est perdu.
        </p>
        <div className="field">
          <label className="field__label">Tape <strong style={{color:'var(--color-text)'}}>SUPPRIMER</strong> en majuscules pour confirmer</label>
          <input className="input" value={bulkWipeConfirm} onChange={(e) => setBulkWipeConfirm(e.target.value)} placeholder="SUPPRIMER" autoFocus />
        </div>
      </Modal>
    </div>
  );
};

/* AnnonceDetailModalV2 : modal de detail branchee (remplace AnnonceDetailModal
   et AnnonceDetailFull du proto qui etaient 100 % mockes). */
const AnnonceDetailModalV2 = ({ annonce, onClose, onGeolocalize, onDelete }) => {
  const { user, toast, goto } = useApp();
  const [full, setFull] = useState(null);
  const [enriching, setEnriching] = useState(false);

  useEffect(() => {
    if (!annonce) { setFull(null); return; }
    setFull(null);
    window.SentinelAPI.fetchAuth(`/api/annonces/${annonce.id}`)
      .then((r) => setFull(r.data || annonce))
      .catch(() => setFull(annonce));
  }, [annonce]);

  if (!annonce) return null;
  const a = full || annonce;
  const geo = _geoTier(a.lat, a.lng, a.geo_niveau);

  const handleEnrichDVF = async () => {
    setEnriching(true);
    try {
      await window.SentinelAPI.fetchAuth(`/api/annonces/${a.id}/enrich-dvf`, { method: 'POST' });
      toast('Enrichissement DVF déclenché.', 'success');
    } catch (e) { toast('Échec DVF : ' + (e.message || e), 'error'); }
    finally { setEnriching(false); }
  };

  return (
    <Modal open={!!annonce} onClose={onClose}
      title={a.titre || `Annonce #${a.id}`} wide
      footer={<>
        <button className="btn" onClick={onClose}>Fermer</button>
        {a.url && <a className="btn" href={a.url} target="_blank" rel="noopener"><I.external /> Voir source</a>}
        {(user.is_cabinet_admin || user.is_superadmin) && (
          <button className="btn btn--danger" onClick={() => onDelete(a)}><I.trash /> Supprimer</button>
        )}
      </>}>
      <div className="modal__section">
        <div className="modal__section-title">Informations</div>
        <div className="grid grid--2" style={{gap:20}}>
          <Detail label="Source" value={fmt.source(a.source)} mono />
          <Detail label="Référence source" value={a.source_id || '—'} mono />
          <Detail label="Type" value={_typeBienLabel(a.type_bien)} />
          <Detail label="Transaction" value={_transactionLabel(a, 'Vente')} />
          <Detail label={_prixLabel(a)} value={_prixTexte(a)} big />
          <Detail label="Surface" value={a.surface != null ? `${a.surface} m²` : '—'} big />
          <Detail label="Pièces" value={a.pieces != null ? a.pieces : '—'} big />
          <Detail label="Ville" value={a.ville || '—'} />
          <Detail label="Code postal" value={a.code_postal || '—'} mono />
          <Detail label="Publication" value={a.date_publication ? new Date(a.date_publication).toLocaleDateString('fr-FR') : '—'} mono />
          <Detail label="Collecte" value={a.date_collecte ? new Date(a.date_collecte).toLocaleDateString('fr-FR') : '—'} mono />
        </div>
        {a.description && (
          <p style={{fontSize:13, lineHeight:1.6, color:'var(--color-text-muted)', marginTop:20, maxWidth:'72ch', whiteSpace:'pre-wrap'}}>
            {a.description}
          </p>
        )}
      </div>

      <div className="divider" />

      <div className="modal__section">
        <div className="modal__section-title">Géolocalisation</div>
        <div className="grid grid--2" style={{gap:20}}>
          <Detail label="Statut" value={geo.tone === 'none'
            ? <span style={{color:'var(--color-text-dim)'}}>Non géolocalisée</span>
            : <span className={`geo-pill geo-pill--${geo.tone}`}>{geo.label}</span>} />
          <Detail label="Niveau" value={a.geo_niveau != null ? `${a.geo_niveau} / 4` : '—'} big />
          <Detail label="Confiance" value={a.geo_confiance != null ? a.geo_confiance.toFixed(2) : '—'} big mono />
          <Detail label="Coordonnées" value={a.lat != null && a.lng != null ? `${a.lat.toFixed(4)} · ${a.lng.toFixed(4)}` : '—'} mono />
          <Detail label="Référence cadastrale" value={a.ref_cadastrale || '—'} mono />
        </div>
        {(user.is_cabinet_admin || user.is_superadmin) && (
          <div style={{marginTop:16, display:'flex', gap:8, flexWrap:'wrap'}}>
            <button className="btn" onClick={() => onGeolocalize(a)}><I.refresh /> Relancer la géolocalisation</button>
            <button className="btn" onClick={handleEnrichDVF} disabled={enriching}>
              <I.refresh /> {enriching ? 'Enrichissement…' : 'Enrichir DVF'}
            </button>
          </div>
        )}
      </div>

      <div className="divider" />

      {/* Clients matchés — donnees reelles via GET /api/annonces/{id}.matches
          (clients DU CABINET courant, isoles par l'API). */}
      <div className="modal__section">
        <div className="modal__section-title">
          Clients matchés{full && Array.isArray(a.matches) ? ` (${a.matches.length})` : ''}
        </div>
        {!full ? (
          <div style={{padding:'16px 0', color:'var(--color-text-dim)', fontSize:12}}>Chargement…</div>
        ) : !Array.isArray(a.matches) || a.matches.length === 0 ? (
          <div style={{padding:'16px 0', color:'var(--color-text-dim)', fontSize:12}}>
            Aucun client de votre cabinet ne correspond à cette annonce.
          </div>
        ) : (
          <table className="table" style={{border:'1px solid var(--color-border)', borderRadius:4}}>
            <thead><tr><th>Score</th><th>Client</th><th></th></tr></thead>
            <tbody>
              {a.matches.map((m) => {
                const cl = m.client || {};
                return (
                  <tr key={m.match_id} style={m.is_locked ? {opacity:0.55} : null}>
                    <td><ScoreBar score={m.score} /></td>
                    <td>
                      <div style={{fontFamily:'var(--font-display)', fontSize:14}}>{cl.nom || `Client #${cl.id}`}</div>
                      <div style={{fontSize:11, color:'var(--color-text-muted)'}}>{cl.email || '—'}</div>
                    </td>
                    <td className="actions">
                      {m.is_locked
                        ? <Pill tone="warning" dot>Verrouillé</Pill>
                        : <button className="btn btn--sm" onClick={() => { onClose(); goto('clients'); }}>Voir la fiche <I.arrow /></button>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {a.photos && a.photos.length > 0 && (
        <>
          <div className="divider" />
          <div className="modal__section">
            <div className="modal__section-title">Photos ({a.photos.length})</div>
            <div className="grid grid--3" style={{gap:8}}>
              {a.photos.slice(0, 6).map((src, i) => (
                <img key={i} src={src} alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:4, background:'var(--color-surface-2)'}} loading="lazy" />
              ))}
            </div>
          </div>
        </>
      )}
    </Modal>
  );
};

/* ============================================================ */
/* CARTE — MapLibre GL JS, branchee sur /api/annonces            */
/* + filtre client (via /api/clients/{id}/matches) + checkbox    */
/* masquer non-geolocalisees + bouton Appliquer + toggle sidebar */
/* + toggle mode carte : dark / light / 3D batiments             */
/* ============================================================ */

// Fonds de carte Dark / Blanc : styles VECTORIELS OpenFreeMap (tiles.openfreemap.org,
// deja autorise par la CSP : connect-src pour tuiles/glyphs/sprites, img-src).
// Gratuit, sans cle, sans limite, usage commercial autorise. Remplace les tuiles
// raster CARTO (dark_all / light_all) qui affichent depuis sept. 2026 un filigrane
// "API KEY REQUIRED" : CARTO exige une cle (usage non commercial) et retire le raster.
const _VECTOR_DARK = 'https://tiles.openfreemap.org/styles/dark';
const _VECTOR_LIGHT = 'https://tiles.openfreemap.org/styles/positron';
// ESRI World Imagery (satellite + aerien). Gratuit, no API key, attribution
// requise. URL format ArcGIS : {z}/{y}/{x} et non {z}/{x}/{y}.
const _RASTER_SATELLITE = [
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
];

function _rasterStyle(tiles, attribution) {
  return {
    version: 8,
    sources: {
      base: { type: 'raster', tiles, tileSize: 256, attribution: attribution || '© OpenStreetMap' },
    },
    layers: [{ id: 'base-layer', type: 'raster', source: 'base' }],
  };
}

// Styles indexes par couleur seulement. Le mode 3D est decorrele : c'est
// un toggle independant qui change juste le pitch (+ ajoute les batiments
// Overpass). Avantage : passer 2D <-> 3D ne recharge plus les tuiles ->
// transitions fluides, et on peut combiner toutes les options
// (Dark+2D, Dark+3D, Blanc+2D, Blanc+3D).
const _MAP_STYLES = {
  dark:      _VECTOR_DARK,
  light:     _VECTOR_LIGHT,
  satellite: _rasterStyle(_RASTER_SATELLITE, '© Esri · Maxar · Earthstar Geographics'),
};

// ─── Overpass : fetch OSM buildings du viewport ──────────────────────────
// Gratuit, no API key, rate-limite (~10 req/min). On limite a zoom >= 14
// et debounce les moveend pour eviter le flood. Cache cote client par bbox
// quantize (limite les requetes identiques).

const _OVERPASS_URL = 'https://overpass-api.de/api/interpreter';
const _OVERPASS_CACHE = new Map(); // key = bbox quantized -> Promise<GeoJSON>

function _parseHeight(tags) {
  if (!tags) return 12;
  const h = tags.height || tags['building:height'];
  if (h) {
    const n = parseFloat(String(h).replace(',', '.'));
    if (!isNaN(n) && n > 0) return n;
  }
  const levels = tags['building:levels'];
  if (levels) {
    const n = parseFloat(String(levels).replace(',', '.'));
    if (!isNaN(n) && n > 0) return n * 3.2; // ~3.2m par etage
  }
  return 12; // default 3-4 etages
}

function _waysToGeoJSON(elements) {
  const features = [];
  for (const el of elements) {
    if (el.type !== 'way' || !el.geometry || el.geometry.length < 4) continue;
    const coords = el.geometry.map((p) => [p.lon, p.lat]);
    // Fermer le polygone si pas deja
    if (coords[0][0] !== coords[coords.length - 1][0] || coords[0][1] !== coords[coords.length - 1][1]) {
      coords.push(coords[0]);
    }
    features.push({
      type: 'Feature',
      geometry: { type: 'Polygon', coordinates: [coords] },
      properties: { height: _parseHeight(el.tags), min_height: 0 },
    });
  }
  return { type: 'FeatureCollection', features };
}

async function _fetchOverpassBuildings(bbox) {
  // bbox = {south, west, north, east}
  const key = [bbox.south.toFixed(3), bbox.west.toFixed(3), bbox.north.toFixed(3), bbox.east.toFixed(3)].join(',');
  if (_OVERPASS_CACHE.has(key)) return _OVERPASS_CACHE.get(key);
  const query = (
    '[out:json][timeout:25];' +
    '(way["building"](' + bbox.south + ',' + bbox.west + ',' + bbox.north + ',' + bbox.east + '););' +
    'out body geom;'
  );
  const promise = fetch(_OVERPASS_URL, {
    method: 'POST',
    body: 'data=' + encodeURIComponent(query),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  })
    .then((r) => r.ok ? r.json() : Promise.reject(new Error('Overpass HTTP ' + r.status)))
    .then((data) => _waysToGeoJSON(data.elements || []))
    .catch((e) => { console.warn('[Overpass] err', e); return { type: 'FeatureCollection', features: [] }; });
  _OVERPASS_CACHE.set(key, promise);
  // Expire le cache apres 10 min pour ne pas garder des polygones obsoletes
  setTimeout(() => _OVERPASS_CACHE.delete(key), 10 * 60 * 1000);
  return promise;
}

// Ajoute / retire la layer fill-extrusion + source GeoJSON sur la map.
// `enabled=true` = on synchronise les buildings avec le viewport courant.
// `enabled=false` = on retire tout.
function _apply3DBuildingsOverpass(map, enabled) {
  const SOURCE_ID = 'sentinel-3d-buildings';
  const LAYER_ID = 'sentinel-3d-buildings-layer';
  if (!enabled) {
    if (map.getLayer(LAYER_ID)) map.removeLayer(LAYER_ID);
    if (map.getSource(SOURCE_ID)) map.removeSource(SOURCE_ID);
    return Promise.resolve();
  }
  if (map.getZoom() < 14) {
    // Trop dezoome : pas de buildings (Overpass refuserait ou serait lent)
    if (map.getLayer(LAYER_ID)) map.removeLayer(LAYER_ID);
    if (map.getSource(SOURCE_ID)) map.removeSource(SOURCE_ID);
    return Promise.resolve();
  }
  const b = map.getBounds();
  const bbox = { south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() };
  return _fetchOverpassBuildings(bbox).then((geojson) => {
    if (map.getSource(SOURCE_ID)) {
      map.getSource(SOURCE_ID).setData(geojson);
    } else {
      map.addSource(SOURCE_ID, { type: 'geojson', data: geojson });
      map.addLayer({
        id: LAYER_ID,
        type: 'fill-extrusion',
        source: SOURCE_ID,
        paint: {
          'fill-extrusion-color': '#34D399',
          'fill-extrusion-opacity': 0.55,
          'fill-extrusion-height': ['get', 'height'],
          'fill-extrusion-base': ['get', 'min_height'],
        },
      });
    }
  });
}
const CartePage = () => {
  const { toast, isMobile } = useApp();
  const [mapQ, setMapQ] = useState('');
  const [allAnnonces, setAllAnnonces] = useState(null);
  const [clients, setClients] = useState([]);
  const [clientMatchedIds, setClientMatchedIds] = useState(null); // Set d'annonce_id si filtre client actif
  // pending = ce que l'utilisateur modifie. applied = ce qui est applique sur la carte.
  const [pending, setPending] = useState({ client_id: '', type_bien: '', score_min: 70, masquer_non_geo: true });
  const [applied, setApplied] = useState(pending);
  // Chantier 07 : sur telephone le panneau est une feuille, fermee par defaut
  const [sidebarOpen, setSidebarOpen] = useState(() => !(window.matchMedia && window.matchMedia('(max-width: 767px)').matches));
  const [mapColor, setMapColor] = useState('dark'); // dark | light
  const [map3D, setMap3D] = useState(false);        // toggle 3D batiments
  const mapEl = useRef(null);
  const mapRef = useRef(null);
  const markersRef = useRef([]);

  // Fetch annonces + clients au mount
  useEffect(() => {
    if (!window.SentinelAPI) { setAllAnnonces([]); return; }
    setAllAnnonces(null);
    // On fetch les annonces SANS filtre geo, pour pouvoir basculer la checkbox sans refetch
    window.SentinelAPI.fetchAuth('/api/annonces?limit=500')
      .then((r) => setAllAnnonces(r.data || []))
      .catch((e) => { console.warn('[Carte] fetch err', e); setAllAnnonces([]); toast('Erreur chargement annonces.', 'error'); });
    window.SentinelAPI.fetchAuth('/api/clients')
      .then((r) => setClients(r.data || []))
      .catch(() => setClients([]));
  }, []);

  // Quand le filtre client applique change : fetch les matches du client pour
  // obtenir la liste des annonce_id qui matchent ce client.
  useEffect(() => {
    if (!applied.client_id) { setClientMatchedIds(null); return; }
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth(`/api/clients/${applied.client_id}/matches`)
      .then((r) => {
        const ids = new Set((r.data || []).map((m) => m.annonce_id));
        setClientMatchedIds(ids);
      })
      .catch(() => { setClientMatchedIds(new Set()); toast('Erreur chargement matches client.', 'error'); });
  }, [applied.client_id]);

  // Filtrage client-side selon `applied`
  const filtered = useMemo(() => {
    let l = allAnnonces || [];
    if (mapQ) {
      const ql = mapQ.toLowerCase();
      l = l.filter((a) => [a.ville, a.code_postal, a.titre].filter(Boolean).some((x) => String(x).toLowerCase().includes(ql)));
    }
    if (applied.masquer_non_geo) l = l.filter((a) => a.lat != null && a.lng != null);
    if (applied.type_bien) l = l.filter((a) => a.type_bien === applied.type_bien);
    if (applied.score_min > 0) l = l.filter((a) => (a.score_max || 0) >= applied.score_min);
    if (applied.client_id && clientMatchedIds) l = l.filter((a) => clientMatchedIds.has(a.id));
    return l;
  }, [allAnnonces, applied, clientMatchedIds]);

  // Init MapLibre GL au mount (style initial = dark)
  useEffect(() => {
    if (typeof maplibregl === 'undefined' || !mapEl.current || mapRef.current) return;
    mapRef.current = new maplibregl.Map({
      container: mapEl.current,
      style: _MAP_STYLES[mapColor],
      center: [3.0573, 50.6292], // Lille (note : MapLibre = [lng, lat])
      zoom: 9,
      pitch: map3D ? 60 : 0,
      attributionControl: { compact: true },
    });
    mapRef.current.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');
    return () => {
      if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; markersRef.current = []; }
    };
  }, []);

  // Switch de couleur : recharge le style raster (Dark <-> Blanc). En 3D,
  // les batiments Overpass sont re-appliques apres le re-style.
  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    map.setStyle(_MAP_STYLES[mapColor]);
    map.once('idle', () => _apply3DBuildingsOverpass(map, map3D));
  }, [mapColor]);

  // Toggle 3D : juste un easeTo pitch + add/remove buildings + listeners
  // moveend pour suivre le viewport. NE recharge PAS les tuiles -> fluide.
  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    map.easeTo({ pitch: map3D ? 60 : 0, duration: 600 });
    _apply3DBuildingsOverpass(map, map3D);
    if (!map3D) return;
    let timer = null;
    const onMove = () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => _apply3DBuildingsOverpass(map, true), 800);
    };
    map.on('moveend', onMove);
    map.on('zoomend', onMove);
    return () => {
      if (timer) clearTimeout(timer);
      map.off('moveend', onMove);
      map.off('zoomend', onMove);
    };
  }, [map3D]);

  // Render markers quand la liste filtree change (markers DOM = survivent au setStyle)
  useEffect(() => {
    if (!mapRef.current || typeof maplibregl === 'undefined') return;
    markersRef.current.forEach((m) => m.remove());
    markersRef.current = [];
    if (!filtered.length) return;

    const validCoords = [];
    filtered.forEach((a) => {
      if (a.lat == null || a.lng == null) return;
      const score = a.score_max || 0;
      const tier = score >= 100 ? 'exact' : score >= 70 ? 'approx' : score > 0 ? 'low' : 'none';
      const color = tier === 'exact' ? '#34D399' : tier === 'approx' ? '#F0A44A' : tier === 'low' ? '#888' : '#444';
      const size = score >= 70 ? 16 : 12;

      // Marker DOM custom (rond avec border)
      const el = document.createElement('div');
      el.style.cssText = 'width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #0A0A0A;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.1);';

      const titre = a.titre || a.ville || ('Annonce #' + a.id);
      const prix = _prixTexte(a);
      const surf = a.surface ? a.surface + ' m²' : '—';
      const sc = a.score_max != null ? a.score_max + ' %' : '—';
      // Lot 0 audit : popup construite en DOM (textContent), jamais en HTML
      // concatene. Titre / ville / URL viennent de la collecte externe et les
      // annonces sont mutualisees entre cabinets : un seul titre piege
      // s'executait chez tout le monde (setHTML = innerHTML). L'URL source
      // n'est acceptee qu'en http(s).
      const safeUrl = (a.url && /^https?:\/\//i.test(String(a.url))) ? String(a.url) : null;
      const pop = document.createElement('div');
      pop.style.cssText = 'font-family:Inter,sans-serif;min-width:200px';
      const popTitle = document.createElement('div');
      popTitle.style.cssText = 'font-weight:600;font-size:13px;margin-bottom:6px;color:#0A0A0A';
      popTitle.textContent = titre;
      const popBody = document.createElement('div');
      popBody.style.cssText = 'font-size:11px;color:#555;line-height:1.5';
      const addLine = (txt) => {
        popBody.appendChild(document.createTextNode(txt));
        popBody.appendChild(document.createElement('br'));
      };
      addLine(prix + ' · ' + surf);
      addLine((a.ville || '') + (a.code_postal ? ' · ' + a.code_postal : ''));
      popBody.appendChild(document.createTextNode('Score : '));
      const popScore = document.createElement('strong');
      popScore.textContent = sc;
      popBody.appendChild(popScore);
      popBody.appendChild(document.createElement('br'));
      if (safeUrl) {
        const popLink = document.createElement('a');
        popLink.href = safeUrl;
        popLink.target = '_blank';
        popLink.rel = 'noopener';
        popLink.style.cssText = 'color:#34D399;font-size:11px';
        popLink.textContent = 'source ↗';
        popBody.appendChild(popLink);
      }
      pop.appendChild(popTitle);
      pop.appendChild(popBody);

      const marker = new maplibregl.Marker({ element: el, anchor: 'center' })
        .setLngLat([a.lng, a.lat])
        .setPopup(new maplibregl.Popup({ offset: 18, closeButton: false }).setDOMContent(pop))
        .addTo(mapRef.current);

      markersRef.current.push(marker);
      validCoords.push([a.lng, a.lat]);
    });

    // Auto-fit bounds sur tous les markers
    if (validCoords.length > 1) {
      const bounds = validCoords.reduce(
        (b, c) => b.extend(c),
        new maplibregl.LngLatBounds(validCoords[0], validCoords[0])
      );
      mapRef.current.fitBounds(bounds, { padding: 60, maxZoom: 13, duration: 600 });
    } else if (validCoords.length === 1) {
      mapRef.current.flyTo({ center: validCoords[0], zoom: 13, duration: 600 });
    }
  }, [filtered]);

  const setP = (k, v) => setPending((p) => ({ ...p, [k]: v }));
  const applyAll = () => setApplied(pending);
  const isPendingDirty = JSON.stringify(pending) !== JSON.stringify(applied);

  return (
    <div className="map-shell">
      {sidebarOpen && (
        <aside className="map-side">
          <div className="map-side__head">
            <span className="map-side__title">Carte</span>
            <button className="modal__close" onClick={() => setSidebarOpen(false)} title="Masquer le panneau"><I.close /></button>
          </div>
          <div className="map-side__body">
            <div className="field">
              <label className="field__label">Client</label>
              <select className="select" value={pending.client_id} onChange={(e) => setP('client_id', e.target.value)}>
                <option value="">— Tous —</option>
                {clients.map((c) => {
                  const nom = [c.prenom, c.nom].filter(Boolean).join(' ').trim() || c.email || `Client #${c.id}`;
                  return <option key={c.id} value={c.id}>{nom}</option>;
                })}
              </select>
            </div>
            <div className="field">
              <label className="field__label">Type de bien</label>
              <select className="select" value={pending.type_bien} onChange={(e) => setP('type_bien', e.target.value)}>
                <option value="">— Tous —</option>
                {_typeBienOptions()}
              </select>
            </div>
            <div className="field">
              <label className="field__label">Score minimum : {pending.score_min} %</label>
              <input type="range" min="0" max="100" step="5" value={pending.score_min}
                onChange={(e) => setP('score_min', parseInt(e.target.value, 10))}
                style={{accentColor:'var(--accent)'}} />
            </div>
            <label className="checkbox" style={{margin:'8px 0'}}>
              <input type="checkbox" checked={pending.masquer_non_geo} onChange={(e) => setP('masquer_non_geo', e.target.checked)} />
              <span className="checkbox__box">
                {pending.masquer_non_geo && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
              </span>
              <span>Masquer les non-géolocalisées</span>
            </label>
            <button className="btn btn--primary" style={{justifyContent:'center', marginTop:8}} onClick={applyAll} disabled={!isPendingDirty}>
              {isPendingDirty ? 'Appliquer' : 'Appliqué'}
            </button>

            <div className="divider" />

            <div className="field" style={{marginBottom:0}}>
              <label className="field__label">Couleur</label>
              <Tabs value={mapColor} onChange={setMapColor} options={[
                { value: 'dark',      label: 'Dark' },
                { value: 'light',     label: 'Blanc' },
                { value: 'satellite', label: 'Satellite' },
              ]} />
            </div>
            <div className="field" style={{marginTop:12, marginBottom:0}}>
              <label className="field__label">Vue</label>
              <Tabs value={map3D ? '3d' : '2d'} onChange={(v) => setMap3D(v === '3d')} options={[
                { value: '2d', label: 'Plat' },
                { value: '3d', label: '3D bâtiments' },
              ]} />
            </div>

            <div className="divider" />

            <div className="map-legend">
              <div className="map-legend__row"><span className="map-legend__dot" style={{background:'#34D399'}} /><span>Score 100</span></div>
              <div className="map-legend__row"><span className="map-legend__dot" style={{background:'#F0A44A'}} /><span>Score 70–99</span></div>
              <div className="map-legend__row"><span className="map-legend__dot" style={{background:'#888'}} /><span>Score &lt; 70</span></div>
              <div className="map-legend__row"><span className="map-legend__dot" style={{background:'#444'}} /><span>Pas de match</span></div>
            </div>
          </div>
          <div className="map-side__foot">
            {allAnnonces === null
              ? <Status state="pending" label="Chargement…" />
              : <Status state="ready" label={`${filtered.length} / ${(allAnnonces || []).length} biens affichés`} />}
          </div>
        </aside>
      )}

      <div className="map-canvas" style={{position:'relative'}}>
        {!sidebarOpen && !isMobile && (
          <button className="btn btn--sm" onClick={() => setSidebarOpen(true)}
            style={{position:'absolute', top:12, left:12, zIndex:1000}}
            title="Afficher le panneau de filtres">
            <I.filter /> Filtres
          </button>
        )}
        {isMobile && (() => {
          const nActive = [applied.client_id, applied.type_bien].filter(Boolean).length + (applied.score_min !== 70 ? 1 : 0) + (applied.masquer_non_geo ? 0 : 1);
          const nMatches = filtered.filter((a) => a.score_max != null && a.score_max >= 70).length;
          return (<>
            <div className="map-float">
              <div className="input-row input-row--sm">
                <I.search />
                <input placeholder="Ville, quartier…" value={mapQ} onChange={(e) => setMapQ(e.target.value)} />
              </div>
              <button className="chip chip--float" onClick={() => setSidebarOpen(true)}>
                <I.filter /> Filtres{nActive > 0 && <span className="badge-cnt">{nActive}</span>}
              </button>
            </div>
            <div className="map-sheet">
              <span className="m-sheet__handle" />
              <div className="map-sheet__head">
                <span className="map-sheet__title">{allAnnonces === null ? 'Chargement…' : `${filtered.length} annonce${filtered.length > 1 ? 's' : ''} dans la zone`}</span>
                <span className="map-sheet__matches">● {nMatches} match{nMatches > 1 ? 'es' : ''}</span>
              </div>
              <div className="map-legend map-legend--inline">
                <div className="map-legend__row"><span className="map-legend__dot" data-tier="exact" /><span>Match</span></div>
                <div className="map-legend__row"><span className="map-legend__dot" data-tier="approx" /><span>70–99</span></div>
                <div className="map-legend__row"><span className="map-legend__dot" data-tier="low" /><span>&lt; 70</span></div>
                <div className="map-legend__row"><span className="map-legend__dot" data-tier="none" /><span>Sans match</span></div>
              </div>
            </div>
          </>);
        })()}
        <div ref={mapEl} style={{width:'100%', height:'100%'}} />
      </div>
    </div>
  );
};

/* ============================================================ */
/* OUTILS (géo)                                                   */
/* ============================================================ */
/* ============================================================ */
/* OUTILS — Collecte + 4 outils geo branches sur backend         */
/* ============================================================ */
const OutilsPage = () => {
  const { toast, user } = useApp();
  const canCollect = !!(user.is_cabinet_admin || user.is_superadmin);

  // Etat collecte
  const [collecteStatus, setCollecteStatus] = useState(null);
  const [collecteZones, setCollecteZones] = useState(null);
  const [collecting, setCollecting] = useState(false);

  // Tool 1 : EXIF
  const [exifFile, setExifFile] = useState(null);
  const [exifResult, setExifResult] = useState(null);
  const [exifBusy, setExifBusy] = useState(false);

  // Tool 2 : Geocode
  const [geocodeAdresse, setGeocodeAdresse] = useState('');
  const [geocodeResult, setGeocodeResult] = useState(null);
  const [geocodeBusy, setGeocodeBusy] = useState(false);

  // Tool 3 : Reverse geocode
  const [reverseLat, setReverseLat] = useState('50.6292');
  const [reverseLng, setReverseLng] = useState('3.0573');
  const [reverseResult, setReverseResult] = useState(null);
  const [reverseBusy, setReverseBusy] = useState(false);

  // Tool 4 : Parse adresse
  const [parseTexte, setParseTexte] = useState('Belle maison au 12 rue Victor Hugo, 59000 Lille, idéale pour famille.');
  const [parseResult, setParseResult] = useState(null);
  const [parseBusy, setParseBusy] = useState(false);

  // Charger statut + zones collecte
  useEffect(() => {
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth('/api/collecte/status')
      .then((r) => setCollecteStatus(r.data || {}))
      .catch(() => setCollecteStatus({}));
    window.SentinelAPI.fetchAuth('/api/collecte/zones')
      .then((r) => setCollecteZones(r.data || {}))
      .catch(() => setCollecteZones({}));
  }, []);

  const handleCollecte = async () => {
    if (!canCollect) { toast('Réservé compte cabinet.', 'error'); return; }
    if (!confirm('Lancer une collecte Stream Estate (action facturée) ?')) return;
    setCollecting(true);
    try {
      const r = await window.SentinelAPI.fetchAuth('/api/collecte/run', { method: 'POST', body: { notifier: true } });
      const c = (r.data && r.data.collecte) || {};
      const m = (r.data && r.data.matching) || {};
      const n = (r.data && r.data.notifications_envoyees) || 0;
      // Audit V2 : backend renvoie {recus, inseres, skips, erreurs, ignorees_hors_zone, zones}
      // et {annonces_traitees, matches, matches_parfaits, bons_matches}.
      toast(`Collecte OK : ${c.inseres || 0} annonces, ${m.matches || 0} matches, ${n} notifs.`, 'success');
      // Refresh status
      window.SentinelAPI.fetchAuth('/api/collecte/status').then((r2) => setCollecteStatus(r2.data || {})).catch(() => {});
    } catch (e) { toast('Échec collecte : ' + (e.message || e), 'error'); }
    finally { setCollecting(false); }
  };

  const runExif = async () => {
    if (!exifFile) { toast('Sélectionne une photo.', 'warning'); return; }
    setExifBusy(true); setExifResult(null);
    try {
      // Lot 0 audit : la route attend le champ multipart `photo` (pas `file`)
      // -> 422 systematique avant.
      const fd = new FormData(); fd.append('photo', exifFile);
      const r = await window.SentinelAPI.fetchAuth('/api/tools/exif-photo', { method: 'POST', body: fd });
      setExifResult(r.data || {});
      if (r.data && r.data.lat != null) toast(`GPS trouvé : ${r.data.lat.toFixed(4)} · ${r.data.lng.toFixed(4)}`, 'success');
      else toast('Aucune coordonnée GPS dans cette photo.', 'warning');
    } catch (e) { toast('Échec EXIF : ' + (e.message || e), 'error'); }
    finally { setExifBusy(false); }
  };

  const runGeocode = async () => {
    if (!geocodeAdresse.trim()) { toast('Saisis une adresse.', 'warning'); return; }
    setGeocodeBusy(true); setGeocodeResult(null);
    try {
      const r = await window.SentinelAPI.fetchAuth('/api/tools/geocode', { method: 'POST', body: { adresse: geocodeAdresse } });
      setGeocodeResult(r.data || {});
      if (r.data && r.data.lat != null) toast(`${r.data.lat.toFixed(4)} N, ${r.data.lng.toFixed(4)} E`, 'success');
      else toast('Adresse introuvable.', 'warning');
    } catch (e) { toast('Échec géocodage : ' + (e.message || e), 'error'); }
    finally { setGeocodeBusy(false); }
  };

  const runReverse = async () => {
    const lat = parseFloat(reverseLat); const lng = parseFloat(reverseLng);
    if (isNaN(lat) || isNaN(lng)) { toast('Coordonnées invalides.', 'warning'); return; }
    setReverseBusy(true); setReverseResult(null);
    try {
      const r = await window.SentinelAPI.fetchAuth(`/api/tools/reverse-geocode?lat=${lat}&lng=${lng}`);
      setReverseResult(r.data || {});
      // Audit V2 : backend renvoie {found, label, street, postcode, city, citycode}, pas {adresse}.
      if (r.data && r.data.found && r.data.label) toast(r.data.label, 'success');
      else toast('Aucune adresse trouvée.', 'warning');
    } catch (e) { toast('Échec : ' + (e.message || e), 'error'); }
    finally { setReverseBusy(false); }
  };

  const runParse = async () => {
    if (!parseTexte.trim()) { toast('Saisis un texte.', 'warning'); return; }
    setParseBusy(true); setParseResult(null);
    try {
      const r = await window.SentinelAPI.fetchAuth('/api/tools/parse-adresse', { method: 'POST', body: { texte: parseTexte } });
      setParseResult(r.data || {});
      if (r.data && r.data.adresse) toast(`Trouvé : ${r.data.adresse}`, 'success');
      else toast('Aucune adresse détectée dans le texte.', 'warning');
    } catch (e) { toast('Échec : ' + (e.message || e), 'error'); }
    finally { setParseBusy(false); }
  };

  return (
    <div className="page">
      <PageHeader title="Outils géo" sub="Collecte d'annonces et pipeline de géolocalisation." />

      {/* Section Collecte */}
      <Card padded style={{marginBottom:16}}>
        <div className="row row--between" style={{marginBottom:12, alignItems:'flex-start'}}>
          <div>
            <h3 style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:18, marginBottom:4}}>Collecte d'annonces</h3>
            <p style={{fontSize:12, color:'var(--color-text-muted)', margin:0}}>Stream Estate (mutualisé tous cabinets) · pipeline complet collecte → matching → notifications.</p>
          </div>
          {canCollect && (
            <button className="btn btn--primary" onClick={handleCollecte} disabled={collecting}>
              <I.refresh /> {collecting ? 'Collecte en cours…' : 'Lancer une collecte'}
            </button>
          )}
        </div>
        <div className="grid grid--3" style={{gap:16, marginTop:12}}>
          <div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:6}}>Statut</div>
            <div style={{fontSize:13}}>
              {collecteStatus === null ? '—' :
                collecteStatus.derniere_collecte
                  ? new Date(collecteStatus.derniere_collecte).toLocaleString('fr-FR')
                  : 'Aucune collecte récente'}
            </div>
          </div>
          <div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:6}}>Total annonces</div>
            <div style={{fontSize:13, fontVariantNumeric:'tabular-nums'}}>{collecteStatus && collecteStatus.total_annonces != null ? fmt.num(collecteStatus.total_annonces) : '—'}</div>
          </div>
          <div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:6}}>Zones ciblées</div>
            <div style={{fontSize:13}}>{collecteZones?.count != null ? `${collecteZones.count} ville${collecteZones.count > 1 ? 's' : ''}` : '—'}</div>
          </div>
        </div>
        {collecteZones?.villes && collecteZones.villes.length > 0 && (
          <div style={{marginTop:12, paddingTop:12, borderTop:'1px solid var(--color-border)', fontSize:11, color:'var(--color-text-muted)'}}>
            <span style={{fontFamily:'var(--font-mono)', letterSpacing:'.14em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Villes : </span>
            {collecteZones.villes.slice(0, 20).join(' · ')}
            {collecteZones.villes.length > 20 && ` · +${collecteZones.villes.length - 20}`}
          </div>
        )}
      </Card>

      {/* Section Outils geo */}
      <div className="grid grid--2" style={{gap:16}}>
        {/* Tool 1 : EXIF */}
        <div className="tool">
          <div className="tool__head">
            <span className="tool__label">01 · Photo → GPS</span>
            <h3 className="tool__title">Lire les EXIF d'une photo.</h3>
            <p className="tool__desc">Récupère les coordonnées GPS dans les métadonnées EXIF. Les messageries (WhatsApp, Telegram, iMessage) suppriment souvent ces données — utilise le fichier original.</p>
          </div>
          {/* display:block inline ecrasait le display:grid de .dropzone ->
              titre et description se chevauchaient */}
          <label className="dropzone" style={{cursor:'pointer'}}>
            <input type="file" accept="image/*" onChange={(e)=>{ setExifFile(e.target.files[0]); setExifResult(null); }} style={{display:'none'}} />
            <span className="dropzone__icon"><I.upload /></span>
            <span className="dropzone__title">{exifFile ? exifFile.name : 'Dépose ou clique pour choisir une photo'}</span>
            <span className="dropzone__desc">JPG · PNG · HEIC · 10 Mo max</span>
          </label>
          {exifResult && (
            <div style={{marginTop:12, padding:12, background:'var(--color-surface-2)', borderRadius:4, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--color-text-muted)'}}>
              {exifResult.lat != null
                ? <>GPS : <strong style={{color:'var(--color-success)'}}>{exifResult.lat.toFixed(6)} · {exifResult.lng.toFixed(6)}</strong></>
                : <>Aucune coordonnée GPS dans les EXIF.</>}
            </div>
          )}
          <div className="tool__foot">
            <button className="btn btn--primary" onClick={runExif} disabled={exifBusy || !exifFile}>
              {exifBusy ? 'Analyse…' : 'Analyser'}
            </button>
          </div>
        </div>

        {/* Tool 2 : Geocode */}
        <div className="tool">
          <div className="tool__head">
            <span className="tool__label">02 · Adresse → GPS</span>
            <h3 className="tool__title">Géocoder une adresse française.</h3>
            <p className="tool__desc">Nominatim (OSM) + fallback Base Adresse Nationale. Précision typique : ~10 m.</p>
          </div>
          <div className="field"><label className="field__label">Adresse</label>
            <input className="input" value={geocodeAdresse} onChange={(e)=>setGeocodeAdresse(e.target.value)} placeholder="12 rue de Paris, Lille" /></div>
          {geocodeResult && (
            <div style={{marginTop:12, padding:12, background:'var(--color-surface-2)', borderRadius:4, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--color-text-muted)'}}>
              {geocodeResult.lat != null
                ? <>GPS : <strong style={{color:'var(--color-success)'}}>{geocodeResult.lat.toFixed(6)} · {geocodeResult.lng.toFixed(6)}</strong>
                   {/* Paquet C : backend renvoie `source` (nominatim/ban), pas `precision`. */}
                   {geocodeResult.source && <> · source {geocodeResult.source}</>}</>
                : <>Adresse introuvable.</>}
            </div>
          )}
          <div className="tool__foot">
            <button className="btn btn--primary" onClick={runGeocode} disabled={geocodeBusy}>
              {geocodeBusy ? 'Géocodage…' : 'Géocoder'}
            </button>
          </div>
        </div>

        {/* Tool 3 : Reverse geocode */}
        <div className="tool">
          <div className="tool__head">
            <span className="tool__label">03 · GPS → Adresse</span>
            <h3 className="tool__title">Géocodage inverse.</h3>
            <p className="tool__desc">Retrouve l'adresse postale la plus proche de coordonnées GPS données.</p>
          </div>
          <div className="grid grid--2" style={{gap:12}}>
            <div className="field"><label className="field__label">Latitude</label>
              <input className="input" value={reverseLat} onChange={(e)=>setReverseLat(e.target.value)} /></div>
            <div className="field"><label className="field__label">Longitude</label>
              <input className="input" value={reverseLng} onChange={(e)=>setReverseLng(e.target.value)} /></div>
          </div>
          {reverseResult && (
            <div style={{marginTop:12, padding:12, background:'var(--color-surface-2)', borderRadius:4, fontSize:12, color:'var(--color-text-muted)'}}>
              {reverseResult.found && reverseResult.label
                ? <strong style={{color:'var(--color-success)'}}>{reverseResult.label}</strong>
                : 'Aucune adresse trouvée à ces coordonnées.'}
            </div>
          )}
          <div className="tool__foot">
            <button className="btn btn--primary" onClick={runReverse} disabled={reverseBusy}>
              {reverseBusy ? 'Recherche…' : 'Trouver l\'adresse'}
            </button>
          </div>
        </div>

        {/* Tool 4 : Parse adresse */}
        <div className="tool">
          <div className="tool__head">
            <span className="tool__label">04 · Texte → Adresse extraite</span>
            <h3 className="tool__title">Extraire une adresse d'un texte libre.</h3>
            <p className="tool__desc">Détecte un pattern d'adresse française dans un texte libre (description d'annonce, email client, etc.).</p>
          </div>
          <div className="field"><label className="field__label">Texte</label>
            <textarea className="textarea" value={parseTexte} onChange={(e)=>setParseTexte(e.target.value)} rows="3"></textarea></div>
          {parseResult && (
            <div style={{marginTop:12, padding:12, background:'var(--color-surface-2)', borderRadius:4, fontSize:12, color:'var(--color-text-muted)'}}>
              {parseResult.adresse
                ? <>Adresse : <strong style={{color:'var(--color-success)'}}>{parseResult.adresse}</strong></>
                : 'Aucune adresse détectée.'}
            </div>
          )}
          <div className="tool__foot">
            <button className="btn btn--primary" onClick={runParse} disabled={parseBusy}>
              {parseBusy ? 'Extraction…' : 'Extraire'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============================================================ */
/* PHOTOLOC — agent : upload photo -> top-N candidats GPS         */
/* Endpoints :                                                    */
/*   GET  /api/photoloc/zones   -> zones ready dispo              */
/*   POST /api/photoloc/search  -> multipart photo + zone_id      */
/* ============================================================ */

const PhotoLocPage = () => {
  const { toast } = useApp();
  const [zones, setZones] = useState([]);
  const [zoneId, setZoneId] = useState('');
  const [file, setFile] = useState(null);
  const [phase, setPhase] = useState('empty'); // empty | analyzing | result
  const [result, setResult] = useState(null);
  const [selectedRank, setSelectedRank] = useState(0);
  const [mapColor, setMapColor] = useState('dark'); // dark | light
  const [map3D, setMap3D] = useState(false);        // toggle 3D batiments
  const mapEl = useRef(null);
  const mapRef = useRef(null);
  const markersRef = useRef([]);

  useEffect(() => {
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth('/api/photoloc/zones')
      .then((r) => {
        const zs = r.data || [];
        setZones(zs);
        if (zs.length > 0) setZoneId((prev) => prev || String(zs[0].id));
      })
      .catch(() => toast('Erreur chargement zones PhotoLoc.', 'error'));
  }, []);

  const launch = async () => {
    if (!file) { toast('Selectionne une photo.', 'warning'); return; }
    if (!zoneId) { toast('Selectionne une zone.', 'warning'); return; }
    setPhase('analyzing');
    try {
      const fd = new FormData();
      fd.append('photo', file);
      fd.append('zone_id', zoneId);
      fd.append('top_k', '5');
      const r = await window.SentinelAPI.fetchAuth('/api/photoloc/search', { method: 'POST', body: fd });
      setResult(r.data || {});
      setSelectedRank(0);
      setPhase('result');
    } catch (e) {
      toast('Echec recherche : ' + (e.message || e), 'error');
      setPhase('empty');
    }
  };

  const reset = () => { setPhase('empty'); setResult(null); };

  const currentZone = zones.find((z) => String(z.id) === zoneId);
  const matches = (result && result.matches) || [];
  // Lot D audit : abstention du service (aucun candidat verifie).
  const abstained = !!(result && result.abstained);

  // Init MapLibre GL en mode result
  useEffect(() => {
    if (phase !== 'result' || typeof maplibregl === 'undefined' || !mapEl.current || mapRef.current) return;
    mapRef.current = new maplibregl.Map({
      container: mapEl.current,
      style: _MAP_STYLES[mapColor],
      center: [3.0573, 50.6292],
      zoom: 12,
      pitch: map3D ? 60 : 0,
      attributionControl: false,
    });
    mapRef.current.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');
    return () => {
      if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; markersRef.current = []; }
    };
  }, [phase]);

  // Switch couleur : recharge le style raster
  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    map.setStyle(_MAP_STYLES[mapColor]);
    map.once('idle', () => _apply3DBuildingsOverpass(map, map3D));
  }, [mapColor]);

  // Toggle 3D : pitch + buildings + listeners
  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    map.easeTo({ pitch: map3D ? 60 : 0, duration: 600 });
    _apply3DBuildingsOverpass(map, map3D);
    if (!map3D) return;
    let timer = null;
    const onMove = () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => _apply3DBuildingsOverpass(map, true), 800);
    };
    map.on('moveend', onMove);
    map.on('zoomend', onMove);
    return () => {
      if (timer) clearTimeout(timer);
      map.off('moveend', onMove);
      map.off('zoomend', onMove);
    };
  }, [map3D]);

  const onSelectFromMap = (i) => setSelectedRank(i);

  // Update markers (DOM, survivent au setStyle)
  useEffect(() => {
    if (!mapRef.current || typeof maplibregl === 'undefined') return;
    markersRef.current.forEach((m) => m.remove());
    markersRef.current = [];
    if (!matches.length) return;
    const coords = [];
    matches.forEach((m, i) => {
      const isTop = i === selectedRank;
      const color = isTop ? '#34D399' : '#F0A44A';
      const size = isTop ? 22 : 16;
      const el = document.createElement('div');
      el.style.cssText = 'width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #0A0A0A;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;font-size:10px;font-weight:600;box-shadow:0 0 0 1px rgba(255,255,255,.15);';
      el.textContent = String(m.rank);
      el.addEventListener('click', (e) => { e.stopPropagation(); onSelectFromMap(i); });

      const marker = new maplibregl.Marker({ element: el, anchor: 'center' })
        .setLngLat([m.lng, m.lat])
        .setPopup(new maplibregl.Popup({ offset: 18, closeButton: false }).setHTML(
          '<div style="font-family:Inter,sans-serif;padding:4px"><div style="font-weight:600;font-size:12px">Rang ' + m.rank + ' - ' + Math.round((m.score || 0) * 100) + ' %</div><div style="font-size:11px;color:#555;margin-top:2px">' + m.lat.toFixed(5) + ', ' + m.lng.toFixed(5) + '</div></div>'
        ))
        .addTo(mapRef.current);
      markersRef.current.push(marker);
      coords.push([m.lng, m.lat]);
    });
    if (coords.length > 1) {
      const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
      mapRef.current.fitBounds(bounds, { padding: 80, maxZoom: 16, duration: 600 });
    } else if (coords.length === 1) {
      mapRef.current.flyTo({ center: coords[0], zoom: 16, duration: 600 });
    }
  }, [matches, selectedRank]);

  const photoPreview = useMemo(() => file ? URL.createObjectURL(file) : null, [file]);
  useEffect(() => () => { if (photoPreview) URL.revokeObjectURL(photoPreview); }, [photoPreview]);

  return (
    <div className="page photoloc">
      <PhotoLocBar phase={phase} zones={zones} zoneId={zoneId} onChangeZone={setZoneId} onReset={reset}
        mapColor={mapColor} onChangeMapColor={setMapColor}
        map3D={map3D} onChangeMap3D={setMap3D} />
      {phase === 'empty' && (
        <PhotoLocEmptyV2 zones={zones} zoneId={zoneId} onChangeZone={setZoneId} file={file} onChangeFile={setFile} onLaunch={launch} />
      )}
      {phase === 'analyzing' && (
        <PhotoLocAnalyzingV2 zone={currentZone} />
      )}
      {phase === 'result' && (
        <PhotoLocResultV2
          matches={matches} selectedRank={selectedRank} onSelect={setSelectedRank} abstained={abstained}
          zone={currentZone} photoPreview={photoPreview} fileName={file && file.name}
          service={result && result.service} durationMs={result && result.duration_ms}
          mapEl={mapEl} />
      )}
    </div>
  );
};

const PhotoLocBar = ({ phase, zones, zoneId, onChangeZone, onReset, mapColor, onChangeMapColor, map3D, onChangeMap3D }) => (
  <header className="photoloc__bar">
    <div className="photoloc__bar-left">
      <span className="photoloc__sigil" aria-hidden="true">{'◇'}</span>
      <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-text-muted)'}}>
        {phase === 'empty' && 'Photo seule, sans metadonnees'}
        {phase === 'analyzing' && <><span style={{display:'inline-block', width:6, height:6, background:'var(--color-warning)', borderRadius:'50%', marginRight:8, animation:'dotPulse 1s infinite'}} />Analyse en cours</>}
        {phase === 'result' && <><span style={{display:'inline-block', width:6, height:6, background:'var(--color-success)', borderRadius:'50%', marginRight:8}} />Resultats prets</>}
      </span>
    </div>
    <div className="photoloc__bar-mid">
      <span style={{fontFamily:'var(--font-display)', fontSize:18, letterSpacing:'-.005em'}}>PhotoLoc</span>
      <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Geolocalisation IA</span>
    </div>
    <div className="photoloc__bar-right">
      {phase === 'result' && onChangeMapColor && (
        <div className="photoloc__zone-chip" style={{padding:'2px 4px', gap:6}}>
          <Tabs value={mapColor} onChange={onChangeMapColor} options={[
            { value: 'dark',      label: 'Dark' },
            { value: 'light',     label: 'Blanc' },
            { value: 'satellite', label: 'Sat' },
          ]} />
          <Tabs value={map3D ? '3d' : '2d'} onChange={(v) => onChangeMap3D(v === '3d')} options={[
            { value: '2d', label: '2D' },
            { value: '3d', label: '3D' },
          ]} />
        </div>
      )}
      <div className="photoloc__zone-chip">
        <span style={{fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Zone</span>
        <select className="select" style={{padding:'4px 24px 4px 8px', width:'auto', background:'transparent', border:0}}
          value={zoneId} onChange={(e) => onChangeZone(e.target.value)}>
          {zones.length === 0 && <option value="">Aucune zone prete</option>}
          {zones.map((z) => (
            // Paquet 7.8 : on n'affiche plus le compteur batiments local. Il
            // etait fige (snapshot au dernier scan local) et donc trompeur
            // depuis l'ajout des comblements -- les vraies features sont
            // cote Modal, recalculees automatiquement a chaque audit.
            <option key={z.id} value={z.id}>{z.nom_zone}</option>
          ))}
        </select>
      </div>
      {phase !== 'empty' && <button className="btn btn--sm" onClick={onReset}><I.refresh /> Nouvelle recherche</button>}
    </div>
  </header>
);

const PhotoLocEmptyV2 = ({ zones, zoneId, onChangeZone, file, onChangeFile, onLaunch }) => {
  const noZones = zones.length === 0;
  return (
    <div className="photoloc__shell photoloc__shell--empty">
      <div className="photoloc__hero">
        <h2 style={{fontFamily:'var(--font-display)', fontWeight:200, fontSize:'clamp(28px,3vw,44px)', letterSpacing:'-.03em', lineHeight:1.05, marginBottom:14, maxWidth:'min(100%, 18ch)'}}>
          Chaque pixel<br/>est un indice.
        </h2>
        <p style={{fontSize:14, color:'var(--color-text-muted)', maxWidth:'52ch', lineHeight:1.5, marginBottom:24}}>
          Aucune metadonnee requise. Une seule photo suffit : le service identifie le batiment en comparant la facade aux milliers de batiments indexes de la zone.
        </p>
        {noZones ? (
          <div style={{padding:'24px', background:'var(--color-surface-2)', border:'1px solid var(--color-border)', borderRadius:4, color:'var(--color-text-muted)', fontSize:13, lineHeight:1.5}}>
            Aucune zone PhotoLoc prete pour l'instant. Demande au super-admin de lancer un scan via PhotoLoc DEV.
          </div>
        ) : (
          <>
            <div className="photoloc__zone-picker">
              <label className="field__label" style={{marginBottom:8, display:'block', textAlign:'left'}}>1. Selectionne la zone</label>
              <select className="select" value={zoneId} onChange={(e) => onChangeZone(e.target.value)}>
                {zones.map((z) => (
                  // Paquet 7.8 : compteur batiments retire (cf commentaire
                  // dans le badge "Zone" plus haut). Le vrai compteur est
                  // recalcule cote Modal et n'est pas synchronise localement.
                  <option key={z.id} value={z.id}>{z.nom_zone}</option>
                ))}
              </select>
            </div>
            <label className="field__label" style={{marginTop:18, marginBottom:8, display:'block', textAlign:'left', width:'100%'}}>2. Depose la photo</label>
            <label className="photoloc__drop" style={{cursor:'pointer'}}>
              <input type="file" accept="image/jpeg,image/png,image/webp,image/heic"
                onChange={(e) => onChangeFile(e.target.files && e.target.files[0])} style={{display:'none'}} />
              <div className="photoloc__drop-icon"><I.upload /></div>
              <span className="photoloc__drop-title">{file ? file.name : 'Depose ou clique pour choisir une photo'}</span>
              <span className="photoloc__drop-meta">JPG, PNG, HEIC, WEBP, 10 MO MAX</span>
              <button className="btn btn--accent" type="button" style={{marginTop:14}}
                onClick={(e) => { e.stopPropagation(); e.preventDefault(); onLaunch(); }} disabled={!file}>
                Lancer la recherche <I.arrow />
              </button>
            </label>
            <div className="photoloc__hints">
              <span><strong style={{color:'var(--color-text)'}}>Pas d'EXIF</strong> requis</span>
              <span><strong style={{color:'var(--color-text)'}}>Pas de monument</strong> requis</span>
              <span><strong style={{color:'var(--color-text)'}}>Latence ~10-30s</strong>, jusqu'a 3 min au premier appel (demarrage du GPU)</span>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const PhotoLocAnalyzingV2 = ({ zone }) => (
  <div className="photoloc__shell">
    <div className="photoloc__analyzing">
      <div className="photoloc__pulser">
        <span /><span /><span />
      </div>
      <p style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-warning)', marginTop:24}}>
        Analyse en cours, zone {(zone && zone.nom_zone) || ''}
      </p>
      <p style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', color:'var(--color-text-dim)', marginTop:6}}>
        Recoupement multi-critères sur notre base géolocalisée propriétaire
      </p>
      <p style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', color:'var(--color-text-dim)', marginTop:4}}>
        Première analyse de la zone : jusqu'à 60 s
      </p>
    </div>
  </div>
);

// Helper : construire une URL Google Maps a partir des coords (fallback si
// l'API ne renvoie pas google_maps_url).
const _gmapsUrl = (lat, lng) => 'https://www.google.com/maps/search/?api=1&query=' + lat + ',' + lng;

// Lot D audit : etiquette de verification geometrique d'un candidat.
const _plVerifTag = (m) => {
  if (!m) return null;
  if (m.verified === true) return <Pill tone="success">verifie</Pill>;
  if (m.geometry_status === 'rejected') return <Pill tone="warning">rejete</Pill>;
  return <Pill tone="neutral">non verifie</Pill>;
};

const PhotoLocResultV2 = ({ matches, selectedRank, onSelect, zone, photoPreview, fileName, service, durationMs, mapEl, abstained }) => {
  // Lot A audit : le backend renvoie desormais 502/503 (toast) quand le
  // service est en panne ou refuse la requete ; ici on n'arrive donc que
  // pour un vrai "aucun candidat" ou un resultat de simulation.
  const simulation = service === 'mock';
  if (!matches.length) {
    return (
      <div className="photoloc__shell">
        <div style={{padding:'80px 24px', textAlign:'center', color:'var(--color-text-muted)'}}>
          <p style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:300, marginBottom:8}}>Aucun candidat trouve</p>
          <p style={{fontSize:13}}>
            {simulation
              ? 'Mode simulation (PHOTOLOC_MOCK_MODE) : le service reel n\'a pas ete interroge.'
              : 'La photo ne matche aucun batiment indexe dans cette zone. Essaie une autre zone ou une autre photo.'}
          </p>
        </div>
      </div>
    );
  }
  const top = matches[selectedRank] || matches[0];
  const topPct = Math.round((top.score || 0) * 100);
  const isLow = topPct < 30;
  return (
    <div className="photoloc__shell photoloc__shell--result">
      <div className="photoloc__map" style={{position:'relative'}}>
        <div ref={mapEl} style={{width:'100%', height:'100%', minHeight:480}} />

        <div className="photoloc__callout" style={{maxWidth:340}}>
          <div className="photoloc__callout-head">
            <span className="photoloc__callout-ring">
              <svg viewBox="0 0 36 36" width="22" height="22">
                <circle cx="18" cy="18" r="14" fill="none" stroke="var(--color-border-strong)" strokeWidth="2"/>
                <circle cx="18" cy="18" r="14" fill="none" stroke={topPct >= 70 ? 'var(--color-success)' : 'var(--color-warning)'} strokeWidth="2"
                  strokeDasharray={(topPct/100)*88 + ' 88'} strokeLinecap="round" transform="rotate(-90 18 18)"/>
              </svg>
            </span>
            <span style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:300, letterSpacing:'-.015em'}}>{topPct} %</span>
            <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--color-text-muted)'}}>Rang {top.rank}</span>
            {_plVerifTag(top)}
          </div>
          {abstained && (
            <div style={{margin:'8px 0 4px', padding:'8px 10px', border:'1px solid var(--color-warning)', color:'var(--color-warning)', fontSize:12, lineHeight:1.4}}>
              Aucun candidat n'a passe la verification geometrique : resultats non fiables, a confirmer visuellement.
            </div>
          )}
          <ul className="photoloc__callout-list">
            <li><span className="photoloc__bullet" /> Coordonnees : <strong>{top.lat.toFixed(5)}, {top.lng.toFixed(5)}</strong></li>
            {top.building_id && <li><span className="photoloc__bullet" /> Building ID : <strong>{top.building_id}</strong></li>}
            {top.match_count != null && <li><span className="photoloc__bullet photoloc__bullet--ok" /> {top.match_count} matchs dans le cluster spatial</li>}
            {isLow && <li style={{color:'var(--color-warning)'}}><span className="photoloc__bullet" /> Confiance faible (&lt;30%), verifier visuellement</li>}
          </ul>
          <a className="btn btn--sm" href={top.google_maps_url || _gmapsUrl(top.lat, top.lng)} target="_blank" rel="noopener" style={{marginTop:8}}>
            <I.external /> Voir sur Google Maps
          </a>
        </div>

        {simulation && (
          <span className="map-overlay" style={{top:12, left:12, right:'auto', bottom:'auto', color:'var(--color-warning)', borderColor:'var(--color-warning)'}}>
            MODE SIMULATION — coordonnees fictives, service reel non interroge
          </span>
        )}
        <span className="map-overlay map-overlay--br">© OpenFreeMap · © OpenStreetMap, {simulation ? 'simulation' : (service || '-')}, {durationMs ? Math.round(durationMs) + ' ms' : '-'}</span>
      </div>

      <aside className="photoloc__side">
        {photoPreview && (
          <div className="photoloc__photo">
            <div className="photoloc__photo-frame" style={{aspectRatio:'4/3', background:'var(--color-surface-2)', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
              <img src={photoPreview} alt="photo source"
                style={{display:'block', maxWidth:'100%', maxHeight:'100%', width:'100%', height:'100%', objectFit:'cover'}}
                onError={(e) => { e.target.style.display = 'none'; }} />
            </div>
            <div className="photoloc__photo-meta">
              <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.04em'}}>{fileName || 'photo'}</span>
            </div>
          </div>
        )}

        <div className="photoloc__results">
          <div className="photoloc__results-head">
            <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>
              {matches.length} candidat{matches.length > 1 ? 's' : ''} dans {(zone && zone.nom_zone) || 'la zone'}
            </span>
          </div>
          {matches.map((m, i) => {
            const pct = Math.round((m.score || 0) * 100);
            const mapsUrl = m.google_maps_url || _gmapsUrl(m.lat, m.lng);
            return (
              <div key={m.rank}
                className="photoloc__result"
                data-active={selectedRank === i || undefined}
                onClick={() => onSelect(i)}>
                <span className="photoloc__result-rank">{m.rank}</span>
                <div className="photoloc__result-body">
                  <div className="photoloc__result-top">
                    <div>
                      <div className="photoloc__result-city">{m.lat.toFixed(5)}, {m.lng.toFixed(5)}</div>
                      <div className="photoloc__result-country">{m.building_id || ('Cluster #' + (i+1))}</div>
                    </div>
                    <span style={{display:'inline-flex', gap:6, alignItems:'center'}}>
                      {_plVerifTag(m)}
                      <Pill tone={pct >= 70 ? 'success' : pct >= 30 ? 'warning' : 'neutral'}>{pct} %</Pill>
                    </span>
                  </div>
                  {m.match_count != null && (
                    <div className="photoloc__result-meta">
                      <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.04em', color:'var(--color-text-muted)'}}>
                        {m.match_count} match{m.match_count > 1 ? 's' : ''} dans le cluster
                      </span>
                    </div>
                  )}
                  <div style={{display:'flex', gap:6, marginTop:8, flexWrap:'wrap'}}>
                    <a className="btn btn--sm" href={mapsUrl} target="_blank" rel="noopener"
                       onClick={(e) => e.stopPropagation()}
                       style={{fontSize:11, padding:'6px 10px'}}>
                      <I.external /> Google Maps
                    </a>
                    {selectedRank !== i && (
                      <button className="btn btn--sm" style={{fontSize:11, padding:'6px 10px'}}
                        onClick={(e) => { e.stopPropagation(); onSelect(i); }}>
                        Centrer sur la carte
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </aside>
    </div>
  );
};

/* ============================================================ */
/* ESTIMATION — branche sur POST /api/estimation/estimate         */
/* + geocodage de l'adresse via POST /api/tools/geocode (Nominatim) */
/* ============================================================ */
const EstimationPage = () => {
  const { toast } = useApp();
  const [form, setForm] = useState({
    adresse: '', lat: '', lng: '',
    type_bien: 'Appartement', surface: '', pieces: '', rayon: 500,
  });
  const [result, setResult] = useState(null);
  const [busy, setBusy] = useState(false);
  const [geocoding, setGeocoding] = useState(false);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  // Geocoder l'adresse si lat/lng vides
  const ensureCoords = async () => {
    if (form.lat && form.lng) return { lat: parseFloat(form.lat), lng: parseFloat(form.lng) };
    if (!form.adresse.trim()) return null;
    setGeocoding(true);
    try {
      const r = await window.SentinelAPI.fetchAuth('/api/tools/geocode', { method: 'POST', body: { adresse: form.adresse } });
      if (r.data && r.data.lat != null) {
        set('lat', String(r.data.lat));
        set('lng', String(r.data.lng));
        return { lat: r.data.lat, lng: r.data.lng };
      }
      toast('Adresse non geocodable.', 'error');
      return null;
    } catch (e) { toast('Echec geocodage : ' + (e.message || e), 'error'); return null; }
    finally { setGeocoding(false); }
  };

  const estimate = async () => {
    if (!form.surface || parseInt(form.surface, 10) <= 0) { toast('Saisis une surface.', 'warning'); return; }
    if (!form.type_bien) { toast('Selectionne un type de bien.', 'warning'); return; }
    const coords = await ensureCoords();
    if (!coords) return;
    setBusy(true);
    setResult(null);
    try {
      const payload = {
        lat: coords.lat, lng: coords.lng,
        type_bien: form.type_bien,
        surface: parseInt(form.surface, 10),
        rayon: parseInt(form.rayon, 10) || 500,
      };
      if (form.pieces) payload.pieces = parseInt(form.pieces, 10);
      const r = await window.SentinelAPI.fetchAuth('/api/estimation/estimate', { method: 'POST', body: payload });
      setResult(r.data || {});
      if (r.data && r.data.estimation) {
        const n = (r.data.comparables && r.data.comparables.length) || 0;
        toast(`Estimation calculee sur ${n} comparable${n > 1 ? 's' : ''} DVF.`, 'success');
      } else if (r.data && r.data.error) {
        toast(r.data.error, 'warning');
      }
    } catch (e) { toast('Echec estimation : ' + (e.message || e), 'error'); }
    finally { setBusy(false); }
  };

  const est = result && result.estimation;
  const comparables = (result && result.comparables) || [];

  return (
    <div className="page">
      <PageHeader title="Estimation auto" sub="Evalue le prix d'un bien a partir des transactions DVF du secteur (data.gouv.fr)." />

      <Card padded>
        <div className="modal__section-title" style={{marginBottom:14}}>Bien a estimer</div>
        <div className="field" style={{marginBottom:14}}>
          <label className="field__label">Adresse complete</label>
          <input className="input" value={form.adresse} onChange={(e) => set('adresse', e.target.value)}
            placeholder="Ex : 12 rue Esquermoise, Lille" />
          <span className="field__hint">Geocodee automatiquement via Nominatim + BAN au lancement.</span>
        </div>
        <div className="grid grid--3" style={{gap:16, marginBottom:14}}>
          <div className="field"><label className="field__label">Latitude</label>
            <input className="input" value={form.lat} onChange={(e) => set('lat', e.target.value)} placeholder="optionnel" /></div>
          <div className="field"><label className="field__label">Longitude</label>
            <input className="input" value={form.lng} onChange={(e) => set('lng', e.target.value)} placeholder="optionnel" /></div>
          <div className="field"><label className="field__label">Rayon recherche (m)</label>
            <select className="select" value={form.rayon} onChange={(e) => set('rayon', e.target.value)}>
              <option value="250">250 m</option>
              <option value="500">500 m (recommande)</option>
              <option value="1000">1 km</option>
              <option value="2000">2 km</option>
            </select>
          </div>
        </div>
        <div className="grid grid--3" style={{gap:16, marginBottom:14}}>
          <div className="field"><label className="field__label">Type de bien</label>
            <select className="select" value={form.type_bien} onChange={(e) => set('type_bien', e.target.value)}>
              <option value="Appartement">Appartement</option>
              <option value="Maison">Maison</option>
              <option value="Local industriel. commercial ou assimile">Local commercial</option>
            </select>
          </div>
          <div className="field"><label className="field__label">Surface (m²)</label>
            <input className="input" type="number" min="1" value={form.surface} onChange={(e) => set('surface', e.target.value)} /></div>
          <div className="field"><label className="field__label">Pieces (optionnel)</label>
            <input className="input" type="number" min="1" value={form.pieces} onChange={(e) => set('pieces', e.target.value)} /></div>
        </div>
        <div style={{display:'flex', justifyContent:'flex-end', gap:8}}>
          <button className="btn btn--primary" onClick={estimate} disabled={busy || geocoding}>
            {geocoding ? 'Geocodage...' : busy ? 'Estimation...' : 'Estimer ce bien'} <I.arrow />
          </button>
        </div>
      </Card>

      {result && !est && result.error && (
        <Card style={{marginTop:16}} padded>
          <div style={{color:'var(--color-warning)', fontSize:13}}>{result.error}</div>
          {result.hint && <div style={{color:'var(--color-text-muted)', fontSize:12, marginTop:6}}>{result.hint}</div>}
        </Card>
      )}

      {est && (
        <>
          <div style={{height:16}} />
          <div className="grid grid--detail" style={{gap:16}}>
            <Card title="Fourchette estimee" padded>
              <div style={{display:'flex', alignItems:'baseline', gap:12, marginBottom:16, flexWrap:'wrap'}}>
                <span style={{fontFamily:'var(--font-display)', fontWeight:200, fontSize:'clamp(30px, 9vw, 56px)', letterSpacing:'-.04em', color:'var(--accent)'}}>
                  {fmt.eur(est.median)}
                </span>
                <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--color-text-dim)', letterSpacing:'.14em', textTransform:'uppercase'}}>Mediane</span>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 16px', background:'var(--color-surface-2)', borderRadius:4, border:'1px solid var(--color-border)'}}>
                <span>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>P25</span>
                  <div className="num" style={{fontFamily:'var(--font-display)', fontWeight:200, fontSize:22, letterSpacing:'-.02em'}}>{fmt.eur(est.low)}</div>
                </span>
                <span style={{flex:1, margin:'0 16px', height:6, background:'var(--color-border)', borderRadius:3, position:'relative'}}>
                  <span style={{position:'absolute', left:'0%', right:'0%', top:0, bottom:0, background:'var(--accent)', borderRadius:3}} />
                  <span style={{position:'absolute', left:'50%', top:-3, bottom:-3, width:2, background:'var(--color-text)', transform:'translateX(-50%)'}} />
                </span>
                <span style={{textAlign:'right'}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>P75</span>
                  <div className="num" style={{fontFamily:'var(--font-display)', fontWeight:200, fontSize:22, letterSpacing:'-.02em'}}>{fmt.eur(est.high)}</div>
                </span>
              </div>
              {/* Lot 0 audit : cles reelles de POST /api/estimation/estimate
                  (estimation.low/median/high/confidence, price_per_sqm_avg,
                  market_trend_12m = "+3.2%" | null, comparables.price /
                  price_per_sqm / sold_at). Avant : tout affichait "—". */}
              {result.price_per_sqm_avg != null && (
                <div style={{marginTop:14, fontSize:12, color:'var(--color-text-muted)'}}>
                  Prix moyen / m² : <strong style={{color:'var(--color-text)'}}>{fmt.eur(result.price_per_sqm_avg)}</strong>
                </div>
              )}
            </Card>
            <Card title="Base de calcul">
              <div className="metric-list">
                <MetricRow label="Comparables DVF" value={result.n_comparables != null ? result.n_comparables : comparables.length} />
                <MetricRow label="Confiance" value={est.confidence != null ? Math.round(est.confidence * 100) + ' %' : '—'} />
                <MetricRow label="Rayon" value={form.rayon} unit=" m" />
                <MetricRow label="Tendance 12 mois" value={result.market_trend_12m || '—'} />
              </div>
            </Card>
          </div>

          {comparables.length > 0 && (
            <Card title={`Comparables DVF (${comparables.length})`} flush style={{marginTop:16}}>
              <table className="table">
                <thead><tr>
                  <th>Date</th><th>Type</th><th className="num" style={{textAlign:'right'}}>Surface</th>
                  <th className="num" style={{textAlign:'right'}}>Valeur</th>
                  <th className="num" style={{textAlign:'right'}}>€/m²</th>
                  <th className="num" style={{textAlign:'right'}}>Distance</th>
                </tr></thead>
                <tbody>
                  {comparables.slice(0, 20).map((c, i) => (
                    <tr key={i}>
                      <td className="num" style={{fontSize:12}}>{c.sold_at || '—'}</td>
                      <td><span style={{fontSize:12}}>{c.type_local || '—'}</span></td>
                      <td className="num" style={{textAlign:'right'}}>{c.surface != null ? c.surface + ' m²' : '—'}</td>
                      <td className="num" style={{textAlign:'right'}}>{c.price ? fmt.eur(c.price) : '—'}</td>
                      <td className="num" style={{textAlign:'right'}}>{c.price_per_sqm != null ? fmt.eur(c.price_per_sqm) : '—'}</td>
                      <td className="num" style={{textAlign:'right', fontSize:11, color:'var(--color-text-muted)'}}>{c.distance_m != null ? c.distance_m + ' m' : '—'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          )}
        </>
      )}
    </div>
  );
};

/* ============================================================ */
/* LEGAL                                                          */
/* ============================================================ */
const LegalPage = () => {
  const [view, setView] = useState('hub');
  if (view === 'mandats')     return <MandatsView    onBack={()=>setView('hub')} />;
  if (view === 'bons')        return <BonsVisiteView onBack={()=>setView('hub')} />;
  if (view === 'diagnostics') return <DiagnosticsView onBack={()=>setView('hub')} />;
  return <LegalHub onOpen={setView} />;
};

const LegalHub = ({ onOpen }) => {
  // Paquet C : compteurs reels (avant hardcodes count:1, 0, 2, 2).
  // 4 fetch parallels au mount, chaque resultat alimente un compteur.
  // Si un endpoint echoue (403, network), le compteur reste null
  // (affiche "—" plutot qu'un chiffre faux).
  const [counts, setCounts] = useState({ mandats: null, bons: null, diagnostics: null, coffre: null });
  useEffect(() => {
    if (!window.SentinelAPI) return;
    const api = window.SentinelAPI;
    const safe = (p) => p.catch(() => null);
    Promise.all([
      safe(api.fetchAuth('/api/mandats')),
      safe(api.fetchAuth('/api/bons-visite')),
      safe(api.fetchAuth('/api/diagnostics/expiring?days_ahead=365')),
      safe(api.fetchAuth('/api/documents')),
    ]).then(([m, b, d, c]) => {
      setCounts({
        mandats: m && Array.isArray(m.data) ? m.data.length : null,
        bons: b && Array.isArray(b.data) ? b.data.length : null,
        diagnostics: d && d.data && typeof d.data.n_total === 'number' ? d.data.n_total : null,
        coffre: c && Array.isArray(c.data) ? c.data.length : null,
      });
    });
  }, []);

  const tiles = [
    { id:'mandats',     glyph:'file',  count: counts.mandats,     title:'Mandats',         desc:'Auto-générés conformes ALUR. Signature électronique eIDAS simple sur place.' },
    { id:'bons',        glyph:'home',  count: counts.bons,        title:'Bons de visite',  desc:'Preuve juridique opposable. Anti court-circuit visiteur → achat hors agence.' },
    { id:'diagnostics', glyph:'clock', count: counts.diagnostics, title:'Diagnostics',     desc:'DPE, amiante, plomb, gaz, électricité. Suivi validités avec alerte 30 jours.' },
    { id:'coffre',      glyph:'lock',  count: counts.coffre,      title:'Coffre-fort',     desc:'Documents légaux scannés (CNI, RIB, RCP, copies signées). 20 MB par fichier.' },
  ];
  return (
    <div className="page">
      <PageHeader title="Juridique" sub="Mandats ALUR, bons de visite signés, suivi des diagnostics et coffre-fort documentaire." />
      <div className="tile-grid" style={{marginBottom:16}}>
        {tiles.map(t => {
          const Glyph = I[t.glyph];
          return (
            <div key={t.id} className="tile" onClick={()=>onOpen(t.id === 'coffre' ? 'hub' : t.id)}>
              <div className="tile__top"><span className="tile__glyph"><Glyph /></span><span className="tile__title">{t.title}<span className="tile__count">{t.count != null ? t.count : '—'}</span></span></div>
              <div className="tile__body"><span className="tile__desc">{t.count === 0 ? <em className="tile__zero">Aucun pour l'instant. </em> : null}{t.desc}</span></div>
              <div className="tile__cta"><span>Ouvrir</span><span><I.arrow /></span></div>
            </div>
          );
        })}
      </div>
      <CoffreFort />
    </div>
  );
};

/* MANDATS — branche sur /api/mandats */
const MandatsView = ({ onBack }) => {
  const { toast } = useApp();
  const [mandats, setMandats] = useState(null);
  const [showNew, setShowNew] = useState(false);
  const [types, setTypes] = useState({});

  const reload = () => {
    if (!window.SentinelAPI) { setMandats([]); return; }
    setMandats(null);
    window.SentinelAPI.fetchAuth('/api/mandats')
      .then((r) => setMandats(r.data || []))
      .catch(() => { setMandats([]); toast('Erreur chargement mandats.', 'error'); });
    window.SentinelAPI.fetchAuth('/api/mandats/types')
      .then((r) => {
        // Backend renvoie [{code, label, duree_defaut_jours}], on indexe par code.
        const raw = (r && r.data) || [];
        const dict = {};
        (Array.isArray(raw) ? raw : []).forEach((t) => {
          if (t && t.code) dict[t.code] = t;
        });
        setTypes(dict);
      }).catch(() => {});
  };
  useEffect(() => { reload(); }, []);

  const list = mandats || [];
  const totalCount = list.length;
  // Audit V2 : backend renvoie `status` en MAJUSCULES (DRAFT/EN_ATTENTE_SIGNATURE/SIGNE/EXPIRE/RESILIE),
  // pas `statut` en minuscules. Cf modules/mandats.py:64-68.
  const brouillonsCount = list.filter((m) => m.status === 'DRAFT' || m.status === 'EN_ATTENTE_SIGNATURE').length;
  const signesCount = list.filter((m) => m.status === 'SIGNE').length;

  // Map status -> label humain affichable dans la Pill.
  const STATUS_LABEL = {
    DRAFT: 'Brouillon',
    EN_ATTENTE_SIGNATURE: 'A signer',
    SIGNE: 'Signe',
    EXPIRE: 'Expire',
    RESILIE: 'Resilie',
  };

  const downloadPdf = async (m) => {
    try {
      const token = (window.SentinelAPI && window.SentinelAPI.getToken && window.SentinelAPI.getToken()) || '';
      const r = await fetch('/api/mandats/' + m.id + '/pdf', { headers: { Authorization: 'Bearer ' + token } });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'mandat-' + (m.numero || m.id) + '.pdf';
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
    } catch (e) { toast('Echec PDF : ' + (e.message || e), 'error'); }
  };

  const sign = async (m) => {
    if (!confirm('Signer le mandat ' + (m.numero || '#' + m.id) + ' ?\n\nApres signature il ne peut plus etre edite.')) return;
    try {
      await window.SentinelAPI.fetchAuth('/api/mandats/' + m.id + '/sign', { method: 'POST' });
      toast('Mandat signe.', 'success'); reload();
    } catch (e) { toast('Echec signature : ' + (e.message || e), 'error'); }
  };

  const resilier = async (m) => {
    const motif = prompt('Motif de resiliation (optionnel) :');
    try {
      await window.SentinelAPI.fetchAuth('/api/mandats/' + m.id + '/resilier', { method: 'POST', body: { motif: motif || null } });
      toast('Mandat resilie.', 'success'); reload();
    } catch (e) { toast('Echec resiliation : ' + (e.message || e), 'error'); }
  };

  const remove = async (m) => {
    if (!confirm('Supprimer le mandat ' + (m.numero || '#' + m.id) + ' ?\n\nCette action est definitive.')) return;
    try {
      await window.SentinelAPI.fetchAuth('/api/mandats/' + m.id, { method: 'DELETE' });
      toast('Mandat supprime.', 'success'); reload();
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
  };

  return (
    <div className="page">
      <PageHeader
        crumb={<a onClick={onBack} style={{cursor:'pointer'}}>← Juridique</a>}
        title="Mandats"
        sub="Generation automatique avec mentions ALUR. PDF pret a signer en 30 secondes."
        actions={<button className="btn btn--primary" onClick={() => setShowNew(true)}><I.plus /> Nouveau mandat</button>}
      />
      <Card title="Mes mandats" meta={mandats === null ? '' : `${fmt.num(totalCount)} · ${fmt.num(brouillonsCount)} brouillon${brouillonsCount > 1 ? 's' : ''} · ${fmt.num(signesCount)} signé${signesCount > 1 ? 's' : ''}`} flush className="table-card">
        {mandats === null ? (
          <Skel kind="rows" n={4} />
        ) : list.length === 0 ? (
          <EmptyState icon="file" title="Aucun mandat"
            desc="Cree ton premier mandat avec mentions ALUR conformes."
            action={<button className="btn btn--primary" onClick={() => setShowNew(true)}><I.plus /> Nouveau mandat</button>} />
        ) : (
          <table className="table">
            <thead><tr>
              <th>N°</th><th>Type</th><th>Mandant</th><th>Bien</th>
              <th className="num" style={{textAlign:'right'}}>Prix</th>
              <th className="num" style={{textAlign:'right'}}>Honor.</th>
              <th>Debut</th><th>Fin</th><th>Statut</th><th></th>
            </tr></thead>
            <tbody>
              {list.map((m) => {
                // Paquet I : prefere honoraires_montant_ttc direct du backend
                // (calcule au moment de la creation, peut diverger si on edit
                // pct sans toucher le prix). Fallback sur recalcul cote front.
                const honoraires = m.honoraires_montant_ttc != null ? m.honoraires_montant_ttc
                  : (m.prix_vente && m.honoraires_pct ? Math.round(m.prix_vente * m.honoraires_pct / 100) : null);
                // Audit V2 : statut backend en MAJUSCULES.
                const statutTone = m.status === 'SIGNE' ? 'success'
                  : m.status === 'RESILIE' ? 'danger'
                  : m.status === 'EXPIRE' ? 'warning'
                  : m.status === 'EN_ATTENTE_SIGNATURE' ? 'info'
                  : 'neutral';
                const isSignable = m.status === 'DRAFT' || m.status === 'EN_ATTENTE_SIGNATURE';
                return (
                  <tr key={m.id}>
                    <td className="num">{m.numero || m.id}</td>
                    <td>
                      <div style={{fontSize:13}}>{(types && types[m.type] && types[m.type].label) || m.type_label || m.type}</div>
                      {m.exclusivite && <span style={{fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--color-warning)'}}>Exclusif</span>}
                    </td>
                    <td>{[m.mandant_prenom, m.mandant_nom].filter(Boolean).join(' ').trim() || '—'}</td>
                    <td><span style={{fontSize:13}}>{m.bien_adresse || '—'}</span></td>
                    <td className="num" style={{textAlign:'right'}}>{m.prix_vente ? fmt.eur(m.prix_vente) : '—'}</td>
                    <td className="num" style={{textAlign:'right'}}>{honoraires ? fmt.eur(honoraires) : '—'}</td>
                    <td className="num" style={{fontSize:12}}>{m.date_debut || '—'}</td>
                    <td className="num" style={{fontSize:12}}>{m.date_fin || '—'}</td>
                    <td><Pill tone={statutTone} dot>{STATUS_LABEL[m.status] || m.status || '—'}</Pill></td>
                    <td className="actions">
                      <button className="btn btn--sm" title="Telecharger PDF" onClick={() => downloadPdf(m)}><I.file /> PDF</button>
                      {isSignable && <button className="btn btn--sm" title="Signer" onClick={() => sign(m)}><I.check /></button>}
                      {m.status === 'SIGNE' && <button className="btn btn--sm" title="Resilier" onClick={() => resilier(m)}>Resilier</button>}
                      <button className="btn btn--sm btn--danger" title="Supprimer" onClick={() => remove(m)}><I.trash /></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </Card>

      <MandatFormModal
        open={showNew}
        onClose={() => setShowNew(false)}
        types={types}
        onCreated={() => { setShowNew(false); reload(); }}
        toast={toast} />
    </div>
  );
};

const MandatFormModal = ({ open, onClose, types, onCreated, toast }) => {
  const [form, setForm] = useState({
    type: '',
    date_debut: new Date().toISOString().slice(0, 10),
    duree_jours: '',
    mandant_prenom: '', mandant_nom: '', mandant_email: '', mandant_telephone: '', mandant_adresse: '',
    bien_adresse: '', bien_type: '', bien_surface: '', bien_pieces: '', bien_description: '',
    prix_vente: '', honoraires_pct: '5.0', honoraires_charge: 'VENDEUR',
    exclusivite: false, preavis_jours: '15',
    notes: '',
  });
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!open) return;
    // Reset + pre-fill type avec le premier disponible
    const firstType = Object.keys(types || {})[0] || '';
    setForm((f) => ({ ...f, type: firstType }));
    setSaving(false);
  }, [open, types]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const intOr = (v) => { const s = String(v || '').trim(); if (!s) return null; const n = parseInt(s, 10); return isNaN(n) ? null : n; };
  const floatOr = (v) => { const s = String(v || '').trim(); if (!s) return null; const n = parseFloat(s); return isNaN(n) ? null : n; };

  const submit = async () => {
    if (!form.type) { toast('Selectionne un type de mandat.', 'warning'); return; }
    if (!form.mandant_nom.trim()) { toast('Nom du mandant requis.', 'warning'); return; }
    if (!form.date_debut) { toast('Date de debut requise.', 'warning'); return; }
    const payload = {
      type: form.type,
      date_debut: form.date_debut,
      duree_jours: intOr(form.duree_jours),
      mandant_nom: form.mandant_nom.trim(),
      mandant_prenom: form.mandant_prenom.trim() || null,
      mandant_email: form.mandant_email.trim() || null,
      mandant_telephone: form.mandant_telephone.trim() || null,
      mandant_adresse: form.mandant_adresse.trim() || null,
      bien_adresse: form.bien_adresse.trim() || null,
      bien_type: form.bien_type.trim() || null,
      bien_surface: intOr(form.bien_surface),
      bien_pieces: intOr(form.bien_pieces),
      bien_description: form.bien_description.trim() || null,
      prix_vente: intOr(form.prix_vente),
      honoraires_pct: floatOr(form.honoraires_pct),
      honoraires_charge: form.honoraires_charge,
      exclusivite: !!form.exclusivite,
      preavis_jours: intOr(form.preavis_jours) || 15,
      notes: form.notes.trim() || null,
    };
    setSaving(true);
    try {
      await window.SentinelAPI.fetchAuth('/api/mandats', { method: 'POST', body: payload });
      toast('Mandat cree.', 'success');
      onCreated();
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
    finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} title="Nouveau mandat" wide
      footer={<>
        <button className="btn" onClick={onClose} disabled={saving}>Annuler</button>
        <button className="btn btn--primary" onClick={submit} disabled={saving}>{saving ? 'Creation…' : 'Generer le PDF'}</button>
      </>}>
      <div className="modal__section">
        <div className="modal__section-title">Type et dates</div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Type de mandat *</label>
            <select className="select" value={form.type} onChange={(e) => set('type', e.target.value)}>
              {Object.entries(types || {}).map(([k, v]) => (
                <option key={k} value={k}>{(v && v.label) || k}</option>
              ))}
            </select>
            {/* Paquet I : help-tips parite V1 (mandats.html). */}
            <span className="field__hint">VENTE_SIMPLE : vendeur libre · VENTE_EXCLUSIF : seul ton agence · VENTE_SEMI_EXCLUSIF : ton agence + le vendeur · RECHERCHE : pour acheteur.</span>
          </div>
          <div className="field"><label className="field__label">Date de debut *</label>
            <input className="input" type="date" value={form.date_debut} onChange={(e) => set('date_debut', e.target.value)} />
          </div>
          <div className="field"><label className="field__label">Duree (jours, optionnel)</label>
            <input className="input" type="number" min="1" max="730" value={form.duree_jours} onChange={(e) => set('duree_jours', e.target.value)} placeholder="default selon type" />
            <span className="field__hint">Vide = duree par defaut selon type (90j vente, 365j recherche, ALUR 3 mois mini renouvelable).</span>
          </div>
          <div className="field" style={{alignSelf:'center'}}>
            <label className="checkbox">
              <input type="checkbox" checked={form.exclusivite} onChange={(e) => set('exclusivite', e.target.checked)} />
              <span className="checkbox__box">{form.exclusivite && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}</span>
              <span>Mandat exclusif</span>
            </label>
            <span className="field__hint">Cocher pour les types VENTE_EXCLUSIF / VENTE_SEMI_EXCLUSIF (revoque le droit du vendeur ou autres agences pendant la duree).</span>
          </div>
        </div>
      </div>

      <div className="modal__section">
        <div className="modal__section-title">Mandant</div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Prenom</label>
            <input className="input" value={form.mandant_prenom} onChange={(e) => set('mandant_prenom', e.target.value)} /></div>
          <div className="field"><label className="field__label">Nom *</label>
            <input className="input" value={form.mandant_nom} onChange={(e) => set('mandant_nom', e.target.value)} /></div>
          <div className="field"><label className="field__label">Email</label>
            <input className="input" type="email" value={form.mandant_email} onChange={(e) => set('mandant_email', e.target.value)} /></div>
          <div className="field"><label className="field__label">Telephone</label>
            <input className="input" type="tel" value={form.mandant_telephone} onChange={(e) => set('mandant_telephone', e.target.value)} /></div>
        </div>
        <div className="field" style={{marginTop:16}}>
          <label className="field__label">Adresse postale</label>
          <input className="input" value={form.mandant_adresse} onChange={(e) => set('mandant_adresse', e.target.value)} />
        </div>
      </div>

      <div className="modal__section">
        <div className="modal__section-title">Bien (laisser vide pour un mandat de recherche)</div>
        <div className="field" style={{marginBottom:16}}>
          <label className="field__label">Adresse du bien</label>
          <input className="input" value={form.bien_adresse} onChange={(e) => set('bien_adresse', e.target.value)} />
        </div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Type</label>
            <select className="select" value={form.bien_type} onChange={(e) => set('bien_type', e.target.value)}>
              <option value="">—</option>
              {_typeBienOptions()}
            </select>
          </div>
          <div className="field"><label className="field__label">Surface (m²)</label>
            <input className="input" type="number" min="1" value={form.bien_surface} onChange={(e) => set('bien_surface', e.target.value)} /></div>
          <div className="field"><label className="field__label">Pieces</label>
            <input className="input" type="number" min="1" value={form.bien_pieces} onChange={(e) => set('bien_pieces', e.target.value)} /></div>
        </div>
      </div>

      <div className="modal__section">
        <div className="modal__section-title">Prix et honoraires</div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Prix de vente (€)</label>
            <input className="input" type="number" min="0" value={form.prix_vente} onChange={(e) => set('prix_vente', e.target.value)} /></div>
          <div className="field"><label className="field__label">Honoraires (% du prix)</label>
            <input className="input" type="number" step="0.1" min="0" max="20" value={form.honoraires_pct} onChange={(e) => set('honoraires_pct', e.target.value)} />
            <span className="field__hint">Taux TTC. Moyenne marche FR : 3 a 7 % pour la vente.</span>
          </div>
          <div className="field"><label className="field__label">Charge des honoraires</label>
            <select className="select" value={form.honoraires_charge} onChange={(e) => set('honoraires_charge', e.target.value)}>
              <option value="VENDEUR">Vendeur</option>
              <option value="ACQUEREUR">Acquereur</option>
              <option value="PARTAGE">Partage</option>
            </select>
            <span className="field__hint">Qui paie la commission a la signature. Doit etre coherent avec le mandat affiche (visible sur le portail si vendeur paie).</span>
          </div>
          <div className="field"><label className="field__label">Preavis (jours)</label>
            <input className="input" type="number" min="0" max="90" value={form.preavis_jours} onChange={(e) => set('preavis_jours', e.target.value)} />
            <span className="field__hint">Delai mini pour denoncer le mandat. Standard ALUR : 15 jours.</span>
          </div>
        </div>
      </div>

      <div className="modal__section">
        <div className="field"><label className="field__label">Notes internes (non incluses dans le PDF)</label>
          <textarea className="textarea" rows="2" value={form.notes} onChange={(e) => set('notes', e.target.value)} /></div>
      </div>
    </Modal>
  );
};

/* BONS DE VISITE — branche sur /api/bons-visite */
const BonsVisiteView = ({ onBack }) => {
  const { toast } = useApp();
  const [bons, setBons] = useState(null);
  const [showNew, setShowNew] = useState(false);

  const reload = () => {
    if (!window.SentinelAPI) { setBons([]); return; }
    setBons(null);
    window.SentinelAPI.fetchAuth('/api/bons-visite')
      .then((r) => setBons(r.data || []))
      .catch(() => { setBons([]); toast('Erreur chargement bons.', 'error'); });
  };
  useEffect(() => { reload(); }, []);

  const list = bons || [];
  const totalCount = list.length;
  // Audit V2 : backend renvoie `status` en MAJUSCULES (DRAFT/SIGNE/EXPIRE),
  // pas `statut` en minuscules. Cf modules/bons_visite.py:26-28.
  const signesCount = list.filter((b) => b.status === 'SIGNE').length;
  const aSignerCount = list.filter((b) => b.status !== 'SIGNE').length;
  const BON_STATUS_LABEL = { DRAFT: 'Brouillon', SIGNE: 'Signe', EXPIRE: 'Expire' };

  const downloadPdf = async (b) => {
    try {
      const token = (window.SentinelAPI && window.SentinelAPI.getToken && window.SentinelAPI.getToken()) || '';
      const r = await fetch('/api/bons-visite/' + b.id + '/pdf', { headers: { Authorization: 'Bearer ' + token } });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url; a.download = 'bon-visite-' + (b.numero || b.id) + '.pdf';
      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
    } catch (e) { toast('Echec PDF : ' + (e.message || e), 'error'); }
  };
  const remove = async (b) => {
    if (!confirm('Supprimer ce bon ?')) return;
    try {
      await window.SentinelAPI.fetchAuth('/api/bons-visite/' + b.id, { method: 'DELETE' });
      toast('Bon supprime.', 'success'); reload();
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
  };

  return (
    <div className="page">
      <PageHeader
        crumb={<a onClick={onBack} style={{cursor:'pointer'}}>← Juridique</a>}
        title="Bons de visite"
        sub="Preuve juridique opposable de mise en relation."
        actions={<button className="btn btn--primary" onClick={() => setShowNew(true)}><I.plus /> Nouveau bon</button>}
      />
      <Card title="Mes bons de visite" meta={bons === null ? '' : `${fmt.num(totalCount)} · ${fmt.num(aSignerCount)} à signer · ${fmt.num(signesCount)} signé${signesCount > 1 ? 's' : ''}`} flush className="table-card">
        {bons === null ? <Skel kind="rows" n={4} />
         : list.length === 0 ? <EmptyState icon="home" title="Aucun bon de visite"
             desc="Cree ton premier bon pour formaliser une visite."
             action={<button className="btn btn--primary" onClick={() => setShowNew(true)}><I.plus /> Nouveau bon</button>} />
         : <table className="table">
            <thead><tr><th>N°</th><th>Visiteur</th><th>Bien</th><th>Date visite</th><th>Statut</th><th></th></tr></thead>
            <tbody>
              {list.map((b) => (
                <tr key={b.id}>
                  <td className="num">{b.numero || b.id}</td>
                  <td>{[b.visiteur_prenom, b.visiteur_nom].filter(Boolean).join(' ').trim() || '—'}</td>
                  <td><span style={{fontSize:13}}>{b.bien_adresse || '—'}</span></td>
                  <td className="num" style={{fontSize:12}}>{b.date_visite || '—'}{b.heure_visite ? ' ' + b.heure_visite : ''}</td>
                  <td><Pill tone={b.status === 'SIGNE' ? 'success' : b.status === 'EXPIRE' ? 'warning' : 'neutral'} dot>{BON_STATUS_LABEL[b.status] || b.status || 'Brouillon'}</Pill></td>
                  <td className="actions">
                    <button className="btn btn--sm" onClick={() => downloadPdf(b)}><I.file /> PDF</button>
                    <button className="btn btn--sm btn--danger" onClick={() => remove(b)}><I.trash /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>}
      </Card>

      <BonVisiteFormModal open={showNew} onClose={() => setShowNew(false)} onCreated={() => { setShowNew(false); reload(); }} toast={toast} />
    </div>
  );
};

const BonVisiteFormModal = ({ open, onClose, onCreated, toast }) => {
  const [form, setForm] = useState({
    client_id: '',  // Paquet F : lien CRM si rempli depuis picker
    visiteur_prenom: '', visiteur_nom: '', visiteur_email: '', visiteur_telephone: '', visiteur_adresse: '',
    // Paquet F : co-visiteur optionnel (parite V1)
    co_client_id: '', co_visiteur_prenom: '', co_visiteur_nom: '',
    bien_adresse: '', bien_type: '', bien_reference: '', bien_prix: '',
    date_visite: new Date().toISOString().slice(0, 10), heure_visite: '',
    clause_exclusivite: true, duree_engagement_mois: '12',
    notes: '',
  });
  const [saving, setSaving] = useState(false);
  // Paquet F : pickers CRM Sentinel (visiteur principal + co-visiteur).
  const [clients, setClients] = useState([]);

  // Reset form + recharge la liste clients a chaque ouverture.
  useEffect(() => {
    if (!open) return;
    setSaving(false);
    setForm((f) => ({
      ...f,
      client_id: '', visiteur_prenom: '', visiteur_nom: '', visiteur_email: '', visiteur_telephone: '', visiteur_adresse: '',
      co_client_id: '', co_visiteur_prenom: '', co_visiteur_nom: '',
    }));
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth('/api/clients?limit=500')
      .then((r) => setClients(Array.isArray(r.data) ? r.data : []))
      .catch(() => {});
  }, [open]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const intOr = (v) => { const s = String(v || '').trim(); if (!s) return null; const n = parseInt(s, 10); return isNaN(n) ? null : n; };

  // Label format CRM picker : "#42 — Marie Dupont (marie@x.fr · 06 11 ...)"
  const clientLabel = (c) => {
    const fullname = [c.prenom, c.nom].filter(Boolean).join(' ').trim() || '?';
    const contact = c.email || c.telephone || '';
    return '#' + c.id + ' — ' + fullname + (contact ? ' (' + contact + ')' : '');
  };

  // Paquet F : pre-remplit les champs visiteur OU co-visiteur depuis un
  // Client du CRM. Source = backend (n'ecrase pas si manuel deja saisi
  // -- volontaire pour eviter perte de saisie -- sauf le set initial via select).
  const pickVisiteur = (clientId, isCo) => {
    const c = clients.find((x) => String(x.id) === String(clientId));
    if (!c) return;
    if (isCo) {
      setForm((f) => ({
        ...f,
        co_client_id: String(c.id),
        co_visiteur_prenom: c.prenom || '',
        co_visiteur_nom: c.nom || '',
      }));
    } else {
      setForm((f) => ({
        ...f,
        client_id: String(c.id),
        visiteur_prenom: c.prenom || '',
        visiteur_nom: c.nom || '',
        visiteur_email: c.email || '',
        visiteur_telephone: c.telephone || '',
      }));
    }
  };

  const submit = async () => {
    if (!form.visiteur_nom.trim()) { toast('Nom du visiteur requis.', 'warning'); return; }
    if (!form.bien_adresse.trim()) { toast('Adresse du bien requise.', 'warning'); return; }
    if (!form.date_visite) { toast('Date de visite requise.', 'warning'); return; }
    const payload = {
      visiteur_nom: form.visiteur_nom.trim(),
      visiteur_prenom: form.visiteur_prenom.trim() || null,
      visiteur_email: form.visiteur_email.trim() || null,
      visiteur_telephone: form.visiteur_telephone.trim() || null,
      visiteur_adresse: form.visiteur_adresse.trim() || null,
      // Paquet F : lien client CRM (utile pour stats + audit trail)
      client_id: form.client_id ? parseInt(form.client_id, 10) : null,
      // Paquet F : co-visiteur (parite V1, prenom + nom uniquement cote schema backend)
      co_visiteur_prenom: form.co_visiteur_prenom.trim() || null,
      co_visiteur_nom: form.co_visiteur_nom.trim() || null,
      bien_adresse: form.bien_adresse.trim(),
      bien_type: form.bien_type.trim() || null,
      bien_reference: form.bien_reference.trim() || null,
      bien_prix: intOr(form.bien_prix),
      date_visite: form.date_visite,
      heure_visite: form.heure_visite || null,
      clause_exclusivite: !!form.clause_exclusivite,
      duree_engagement_mois: intOr(form.duree_engagement_mois) || 12,
      notes: form.notes.trim() || null,
    };
    setSaving(true);
    try { await window.SentinelAPI.fetchAuth('/api/bons-visite', { method: 'POST', body: payload }); toast('Bon cree.', 'success'); onCreated(); }
    catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
    finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} title="Nouveau bon de visite" wide
      footer={<>
        <button className="btn" onClick={onClose} disabled={saving}>Annuler</button>
        <button className="btn btn--primary" onClick={submit} disabled={saving}>{saving ? 'Creation…' : 'Generer le bon'}</button>
      </>}>
      <div className="modal__section">
        <div className="modal__section-title">Visiteur</div>

        {/* Paquet F : picker CRM Sentinel (parite V1).
            Selection -> auto-remplit prenom/nom/email/telephone + client_id.
            "Saisir manuellement" = "" -> n'efface PAS les champs deja saisis. */}
        <div className="field" style={{marginBottom:16}}>
          <label className="field__label">Charger depuis le CRM Sentinel</label>
          <select className="select" value={form.client_id} onChange={(e) => { const v = e.target.value; set('client_id', v); if (v) pickVisiteur(v, false); }}>
            <option value="">— Saisir manuellement —</option>
            {clients.map((c) => (<option key={c.id} value={c.id}>{clientLabel(c)}</option>))}
          </select>
          <span className="field__hint">Si le visiteur est deja dans ton CRM, ses coordonnees sont pre-remplies.</span>
        </div>

        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Prenom</label><input className="input" value={form.visiteur_prenom} onChange={(e) => set('visiteur_prenom', e.target.value)} /></div>
          <div className="field"><label className="field__label">Nom *</label><input className="input" value={form.visiteur_nom} onChange={(e) => set('visiteur_nom', e.target.value)} /></div>
          <div className="field"><label className="field__label">Email</label><input className="input" type="email" value={form.visiteur_email} onChange={(e) => set('visiteur_email', e.target.value)} /></div>
          <div className="field"><label className="field__label">Telephone</label><input className="input" type="tel" value={form.visiteur_telephone} onChange={(e) => set('visiteur_telephone', e.target.value)} placeholder="+33 6 ..." /></div>
        </div>
        <div className="field" style={{marginTop:16}}><label className="field__label">Adresse postale</label><input className="input" value={form.visiteur_adresse} onChange={(e) => set('visiteur_adresse', e.target.value)} /></div>
      </div>

      {/* Paquet F : section co-visiteur (parite V1) — important si le bien
          est acquis a plusieurs noms (conjoint, parent, associe). */}
      <div className="modal__section">
        <div className="modal__section-title">Co-visiteur (optionnel)</div>
        <div className="field" style={{marginBottom:16}}>
          <label className="field__label">Charger depuis le CRM Sentinel</label>
          <select className="select" value={form.co_client_id} onChange={(e) => { const v = e.target.value; set('co_client_id', v); if (v) pickVisiteur(v, true); }}>
            <option value="">— Saisir manuellement —</option>
            {clients.map((c) => (<option key={c.id} value={c.id}>{clientLabel(c)}</option>))}
          </select>
          <span className="field__hint">Pareil que pour le visiteur : si le co-visiteur est dans ton CRM, ses coordonnees sont pre-remplies.</span>
        </div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Prenom</label><input className="input" value={form.co_visiteur_prenom} onChange={(e) => set('co_visiteur_prenom', e.target.value)} /></div>
          <div className="field"><label className="field__label">Nom</label><input className="input" value={form.co_visiteur_nom} onChange={(e) => set('co_visiteur_nom', e.target.value)} /></div>
        </div>
      </div>

      <div className="modal__section">
        <div className="modal__section-title">Bien visite</div>
        <div className="field" style={{marginBottom:16}}><label className="field__label">Adresse du bien *</label><input className="input" value={form.bien_adresse} onChange={(e) => set('bien_adresse', e.target.value)} /></div>
        <div className="grid grid--2" style={{gap:16}}>
          <div className="field"><label className="field__label">Type</label>
            <select className="select" value={form.bien_type} onChange={(e) => set('bien_type', e.target.value)}>
              <option value="">—</option>{_typeBienOptions()}
            </select>
          </div>
          <div className="field"><label className="field__label">Reference interne</label><input className="input" value={form.bien_reference} onChange={(e) => set('bien_reference', e.target.value)} placeholder="REF-..." /></div>
          <div className="field"><label className="field__label">Prix affiche (€)</label><input className="input" type="number" value={form.bien_prix} onChange={(e) => set('bien_prix', e.target.value)} /></div>
          <div className="field"><label className="field__label">Duree engagement (mois)</label>
            <input className="input" type="number" min="1" max="60" value={form.duree_engagement_mois} onChange={(e) => set('duree_engagement_mois', e.target.value)} />
            {/* Paquet G : help-tip parite V1 (mandats.html / bons-visite.html). */}
            <span className="field__hint">Pendant cette duree, le visiteur s'engage a ne pas court-circuiter ton agence pour acquerir ce bien. Standard : 12 mois.</span>
          </div>
        </div>
        <div className="grid grid--2" style={{gap:16, marginTop:16}}>
          <div className="field"><label className="field__label">Date de visite *</label><input className="input" type="date" value={form.date_visite} onChange={(e) => set('date_visite', e.target.value)} /></div>
          <div className="field"><label className="field__label">Heure (HH:MM)</label><input className="input" type="time" value={form.heure_visite} onChange={(e) => set('heure_visite', e.target.value)} /></div>
        </div>
        <div style={{marginTop:16}}>
          <label className="checkbox">
            <input type="checkbox" checked={form.clause_exclusivite} onChange={(e) => set('clause_exclusivite', e.target.checked)} />
            <span className="checkbox__box">{form.clause_exclusivite && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}</span>
            <span>Clause d'exclusivite (anti court-circuit)</span>
          </label>
          {/* Paquet G : help-tip parite V1 (explique pourquoi cocher cette case). */}
          <div style={{fontSize:11, color:'var(--color-text-dim)', lineHeight:1.5, marginTop:6, marginLeft:30, maxWidth:560}}>
            Sans cette clause, un visiteur peut acheter le bien hors agence apres la visite et tu perds la commission. Avec, tu as une preuve juridique opposable.
          </div>
        </div>
      </div>
    </Modal>
  );
};

/* DIAGNOSTICS — liste des diagnostics expirant + KPI + formulaire d'ajout (parite V1) */
const DiagnosticsView = ({ onBack }) => {
  const { toast } = useApp();
  const [diags, setDiags] = useState(null);
  const [types, setTypes] = useState({});
  // Form state (parite V1 : annonce_id, type, date_realisation, notes).
  const [annonces, setAnnonces] = useState([]);
  const [form, setForm] = useState({ annonce_id: '', type: 'DPE', date_realisation: new Date().toISOString().slice(0,10), notes: '' });
  const [saving, setSaving] = useState(false);

  // Charge le bilan (expired + expiring_soon) + la map des types + les
  // annonces du cabinet pour peupler le selecteur "Bien concerne".
  const reload = () => {
    if (!window.SentinelAPI) { setDiags({ all: [], n_total: 0, n_expired: 0, n_expiring_soon: 0 }); return; }
    setDiags(null);
    // Audit V2 : backend renvoie un DICT {expired, expiring_soon, n_total,
    // n_expired, n_expiring_soon}, pas une liste plate. On fusionne les 2
    // listes (expires + expirent bientot) pour la table.
    // Audit V2 : le query param backend s'appelle days_ahead (default 30).
    // En passant 365 on remonte aussi les diagnostics qui expirent dans l'annee.
    window.SentinelAPI.fetchAuth('/api/diagnostics/expiring?days_ahead=365')
      .then((r) => {
        const d = (r && r.data) || {};
        const expired = Array.isArray(d.expired) ? d.expired : [];
        const expiringSoon = Array.isArray(d.expiring_soon) ? d.expiring_soon : [];
        setDiags({
          all: [...expired, ...expiringSoon],
          n_total: d.n_total || 0,
          n_expired: d.n_expired || expired.length,
          n_expiring_soon: d.n_expiring_soon || expiringSoon.length,
        });
      })
      .catch(() => { setDiags({ all: [], n_total: 0, n_expired: 0, n_expiring_soon: 0 }); toast('Erreur chargement diagnostics.', 'error'); });
  };

  useEffect(() => {
    reload();
    if (!window.SentinelAPI) return;
    // Audit V2 : backend renvoie [{code, label, duree_jours, duree_label}], pas un dict.
    window.SentinelAPI.fetchAuth('/api/diagnostics/types').then((r) => {
      const arr = Array.isArray(r.data) ? r.data : [];
      const map = {};
      arr.forEach((t) => { if (t && t.code) map[t.code] = t; });
      setTypes(map);
    }).catch(() => {});
    // Parite V1 : peuple le picker "Bien concerne" avec les annonces du cabinet.
    window.SentinelAPI.fetchAuth('/api/annonces?limit=500')
      .then((r) => setAnnonces(Array.isArray(r.data) ? r.data : []))
      .catch(() => {});
  }, []);

  // diags peut etre null (loading) ou {all, n_total, n_expired, n_expiring_soon}.
  const bundle = diags || { all: [], n_total: 0, n_expired: 0, n_expiring_soon: 0 };
  const list = bundle.all;
  const totalCount = bundle.n_total;
  const dans30 = bundle.n_expiring_soon;
  const expires = bundle.n_expired;

  const remove = async (d) => {
    if (!confirm('Supprimer ce diagnostic ?')) return;
    try {
      await window.SentinelAPI.fetchAuth('/api/diagnostics/' + d.id, { method: 'DELETE' });
      toast('Diagnostic supprime.', 'success');
      reload();
    } catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
  };

  // Helper format option label : "#12 · Lille 59000 · Appartement · 245 000 EUR — Beau T3 lumineux"
  const annonceLabel = (a) => {
    const cityPart = [a.ville, a.code_postal].filter(Boolean).join(' ');
    const typePart = a.type_bien ? ' · ' + _typeBienLabel(a.type_bien) : '';
    const px = a.prix ? ' · ' + Number(a.prix).toLocaleString('fr-FR').replace(/,/g,' ') + (_isLocation(a) ? ' EUR /mois' : ' EUR') : '';
    const titrePart = a.titre ? ' — ' + String(a.titre).slice(0, 60) : '';
    return '#' + a.id + ' · ' + (cityPart || '—') + typePart + px + titrePart;
  };

  // Types : on prefere la map backend (libelle officiel + duree_label) sinon fallback hardcode.
  const typeOptions = Object.keys(types).length > 0
    ? Object.values(types).map((t) => ({ code: t.code, label: t.label + (t.duree_label ? ' — ' + t.duree_label : '') }))
    : [
        { code:'DPE', label:'DPE — 10 ans' },
        { code:'AMIANTE', label:'Amiante — 3 ans' },
        { code:'PLOMB', label:'Plomb (CREP) — 3 ans' },
        { code:'GAZ', label:'Gaz — 3 ans' },
        { code:'ELECTRICITE', label:'Electricite — 3 ans' },
        { code:'TERMITES', label:'Termites — 6 mois' },
        { code:'ERP', label:'ERP — 6 mois' },
      ];

  const submit = async (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const annonceId = parseInt(form.annonce_id, 10);
    if (!annonceId || !form.type || !form.date_realisation) {
      toast('Bien, type et date sont obligatoires.', 'warning'); return;
    }
    setSaving(true);
    try {
      const payload = { annonce_id: annonceId, type: form.type, date_realisation: form.date_realisation };
      if (form.notes && form.notes.trim()) payload.notes = form.notes.trim();
      await window.SentinelAPI.fetchAuth('/api/diagnostics', { method: 'POST', body: payload });
      toast('Diagnostic ajoute.', 'success');
      setForm({ annonce_id: '', type: 'DPE', date_realisation: new Date().toISOString().slice(0,10), notes: '' });
      reload();
    } catch (err) { toast('Echec : ' + (err.message || err), 'error'); }
    finally { setSaving(false); }
  };

  // Empty state intelligent : si n_total > 0 mais aucun en alerte, dire que
  // tous sont valides (parite V1). Sinon, message "aucun en cours".
  const emptyAllValid = totalCount > 0 && list.length === 0;

  return (
    <div className="page">
      <PageHeader
        crumb={<a onClick={onBack} style={{cursor:'pointer'}}>← Juridique</a>}
        title="Diagnostics legaux"
        sub="DPE, amiante, plomb, gaz, electricite, termites, ERP. Alerte 30j avant expiration."
      />

      {/* Parite V1 : formulaire d'ajout */}
      <Card title="Ajouter un diagnostic" padded style={{marginBottom:16}}>
        <form onSubmit={submit}>
          <div className="grid grid--2" style={{gap:14, marginBottom:14}}>
            <div className="field">
              <label className="field__label">Bien concerne *</label>
              <select className="select" value={form.annonce_id} onChange={(e) => setForm({...form, annonce_id: e.target.value})} required disabled={annonces.length === 0}>
                <option value="">{annonces.length === 0 ? '— Aucune annonce. Cree-en sur /annonces —' : '— Aucun bien selectionne —'}</option>
                {annonces.map((a) => (<option key={a.id} value={a.id}>{annonceLabel(a)}</option>))}
              </select>
            </div>
            <div className="field">
              <label className="field__label">Type de diagnostic *</label>
              <select className="select" value={form.type} onChange={(e) => setForm({...form, type: e.target.value})} required>
                {typeOptions.map((t) => (<option key={t.code} value={t.code}>{t.label}</option>))}
              </select>
            </div>
            <div className="field">
              <label className="field__label">Date de realisation *</label>
              <input className="input" type="date" value={form.date_realisation} onChange={(e) => setForm({...form, date_realisation: e.target.value})} required />
            </div>
            <div className="field">
              <label className="field__label">Notes (optionnel)</label>
              <input className="input" value={form.notes} onChange={(e) => setForm({...form, notes: e.target.value})} placeholder="Ex : DPE classe D, pas de travaux requis" maxLength={2000} />
            </div>
          </div>
          <div style={{display:'flex', justifyContent:'flex-end'}}>
            <button type="submit" className="btn btn--primary" disabled={saving || annonces.length === 0}>
              {saving ? 'Enregistrement…' : 'Ajouter le diagnostic →'}
            </button>
          </div>
        </form>
      </Card>

      <Card title="Diagnostics a signaler" meta={diags === null ? '' : `${fmt.num(totalCount)} suivis · ${fmt.num(dans30)} sous 30 j · ${fmt.num(expires)} expiré${expires > 1 ? 's' : ''}`} className="table-card" flush>
        {diags === null ? <Skel kind="rows" n={4} />
         : emptyAllValid ? <EmptyState icon="lock" title="Aucun diagnostic a signaler"
             desc={'Tous tes diagnostics sont valides > 30 jours. (' + totalCount + ' en base)'}
           />
         : list.length === 0 ? <EmptyState icon="clock" title="Aucun diagnostic en cours"
             desc="Ajoute un premier diagnostic avec le formulaire ci-dessus, ou depuis la fiche d'une annonce."
           />
         : <table className="table">
            <thead><tr><th>Bien</th><th>Type</th><th>Realise le</th><th>Expire le</th><th className="num" style={{textAlign:'right'}}>Jours restants</th><th></th></tr></thead>
            <tbody>
              {list.map((d) => {
                // Audit V2 : backend renvoie days_remaining (pas jours_restants)
                // et type_label deja calcule.
                const jr = d.days_remaining;
                const overdue = jr != null && jr < 0;
                const soon = jr != null && jr <= 30 && jr >= 0;
                const typeLabel = (types && types[d.type] && types[d.type].label) || d.type_label || d.type;
                return (
                  <tr key={d.id}>
                    <td>{'Annonce #' + d.annonce_id}</td>
                    <td>{typeLabel}</td>
                    <td className="num" style={{fontSize:12, color:'var(--color-text-muted)'}}>{d.date_realisation || '—'}</td>
                    <td className="num" style={{fontSize:12, color: overdue ? 'var(--color-danger)' : soon ? 'var(--color-warning)' : 'var(--color-text-muted)'}}>{d.date_expiration || '—'}</td>
                    <td className="num" style={{textAlign:'right', color: overdue ? 'var(--color-danger)' : soon ? 'var(--color-warning)' : 'var(--color-text)'}}>{jr != null ? jr + ' j' : '—'}</td>
                    <td className="actions"><button className="btn btn--sm btn--danger" onClick={() => remove(d)}><I.trash /></button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>}
      </Card>
    </div>
  );
};

/* COFFRE — branche sur /api/documents */
const CoffreFort = () => {
  const { toast } = useApp();
  const [docs, setDocs] = useState(null);
  const [cats, setCats] = useState([]);
  const [filterCat, setFilterCat] = useState('');
  const [uploadCat, setUploadCat] = useState('DIVERS');
  const [uploadDesc, setUploadDesc] = useState('');
  const [uploadFile, setUploadFile] = useState(null);
  const [uploading, setUploading] = useState(false);

  const reload = () => {
    if (!window.SentinelAPI) { setDocs([]); return; }
    setDocs(null);
    const qs = filterCat ? '?category=' + encodeURIComponent(filterCat) : '';
    window.SentinelAPI.fetchAuth('/api/documents' + qs)
      .then((r) => setDocs(r.data || []))
      .catch(() => { setDocs([]); toast('Erreur chargement coffre.', 'error'); });
  };
  useEffect(() => { reload(); }, [filterCat]);
  useEffect(() => {
    if (!window.SentinelAPI) return;
    window.SentinelAPI.fetchAuth('/api/documents/categories').then((r) => setCats(r.data || [])).catch(() => {});
  }, []);

  const upload = async () => {
    if (!uploadFile) { toast('Selectionne un fichier.', 'warning'); return; }
    const fd = new FormData();
    fd.append('file', uploadFile);
    if (uploadCat) fd.append('category', uploadCat);
    if (uploadDesc) fd.append('description', uploadDesc);
    setUploading(true);
    try {
      await window.SentinelAPI.fetchAuth('/api/documents', { method: 'POST', body: fd });
      toast('Document upload.', 'success'); setUploadFile(null); setUploadDesc(''); reload();
    } catch (e) { toast('Echec upload : ' + (e.message || e), 'error'); }
    finally { setUploading(false); }
  };

  const download = async (d) => {
    try {
      const token = (window.SentinelAPI && window.SentinelAPI.getToken && window.SentinelAPI.getToken()) || '';
      const r = await fetch('/api/documents/' + d.id + '/download', { headers: { Authorization: 'Bearer ' + token } });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      // Audit V2 : backend serialize_document renvoie `filename`, pas nom_original/nom_fichier.
      const a = document.createElement('a'); a.href = url; a.download = d.filename || ('doc-' + d.id);
      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
    } catch (e) { toast('Echec telechargement : ' + (e.message || e), 'error'); }
  };
  const remove = async (d) => {
    if (!confirm('Supprimer ' + (d.filename || 'ce document') + ' ?')) return;
    try { await window.SentinelAPI.fetchAuth('/api/documents/' + d.id, { method: 'DELETE' }); toast('Document supprime.', 'success'); reload(); }
    catch (e) { toast('Echec : ' + (e.message || e), 'error'); }
  };

  const list = docs || [];
  const fmtSize = (b) => {
    if (b == null) return '—';
    if (b < 1024) return b + ' B';
    if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
    return (b / 1024 / 1024).toFixed(2) + ' MB';
  };
  const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('fr-FR', { day:'2-digit', month:'short', year:'numeric' }) + ' a ' + new Date(iso).toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit' }) : '—';

  return (
    <Card title="Coffre-fort documentaire" flush>
      <div style={{padding:'16px 20px', display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))', gap:12, alignItems:'end', borderBottom:'1px solid var(--color-border)'}}>
        <div className="field"><label className="field__label">Fichier</label>
          <input type="file" onChange={(e) => setUploadFile(e.target.files && e.target.files[0])} style={{fontSize:12}} /></div>
        <div className="field"><label className="field__label">Categorie</label>
          <select className="select" value={uploadCat} onChange={(e) => setUploadCat(e.target.value)}>
            {(cats.length > 0 ? cats.map((c) => ({ code: c.code || c, label: c.label || c.code || c })) : [{code:'DIVERS',label:'Divers'},{code:'MANDAT',label:'Mandat'},{code:'RIB',label:'RIB'},{code:'CNI',label:'CNI'},{code:'RCP',label:'RCP'}]).map((c) => (
              <option key={c.code} value={c.code}>{c.label}</option>
            ))}
          </select>
        </div>
        <div className="field"><label className="field__label">Description</label>
          <input className="input" value={uploadDesc} onChange={(e) => setUploadDesc(e.target.value)} placeholder="Optionnel" /></div>
        <button className="btn btn--primary" onClick={upload} disabled={uploading || !uploadFile}>
          <I.upload /> {uploading ? 'Upload…' : 'Ajouter'}
        </button>
      </div>
      <div style={{padding:'12px 20px', borderBottom:'1px solid var(--color-border)', display:'flex', alignItems:'center', gap:12}}>
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Filtre</span>
        <select className="select" style={{width:200}} value={filterCat} onChange={(e) => setFilterCat(e.target.value)}>
          <option value="">Toutes categories</option>
          {/* Audit V2 : meme normalisation que le dropdown d'upload ci-dessus —
             cats est [{code, label}] depuis #68, faut pas rendre un objet
             comme enfant React (sinon "Objects are not valid as a React child"
             -> crash LegalHub -> ecran noir). */}
          {(cats.length > 0 ? cats.map((c) => ({ code: c.code || c, label: c.label || c.code || c })) : [{code:'DIVERS',label:'Divers'},{code:'MANDAT',label:'Mandat'},{code:'RIB',label:'RIB'},{code:'CNI',label:'CNI'},{code:'RCP',label:'RCP'}]).map((c) => (
            <option key={c.code} value={c.code}>{c.label}</option>
          ))}
        </select>
      </div>
      {docs === null ? <Skel kind="rows" n={3} />
       : list.length === 0 ? <EmptyState icon="lock" title={filterCat ? 'Aucun document dans cette catégorie' : 'Aucun document pour l\'instant'} desc="Ajoute une pièce depuis le formulaire ci-dessus : elle est chiffrée et archivée dans le coffre-fort." />
       : <table className="table">
          <thead><tr><th>Fichier</th><th>Categorie</th><th className="num" style={{textAlign:'right'}}>Taille</th><th>Date</th><th></th></tr></thead>
          <tbody>
            {list.map((d) => (
              <tr key={d.id}>
                <td><span style={{fontSize:13}}>{d.filename || ('doc-' + d.id)}</span>
                  {d.description && <div style={{fontSize:11, color:'var(--color-text-muted)'}}>{d.description}</div>}</td>
                <td><Pill>{d.category || 'DIVERS'}</Pill></td>
                <td className="num" style={{textAlign:'right'}}>{fmtSize(d.size_bytes)}</td>
                <td className="num" style={{fontSize:12, color:'var(--color-text-muted)'}}>{fmtDate(d.uploaded_at)}</td>
                <td className="actions">
                  <button className="btn btn--sm" onClick={() => download(d)} title="Telecharger"><I.download /></button>
                  <button className="btn btn--sm btn--danger" onClick={() => remove(d)} title="Supprimer"><I.trash /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>}
    </Card>
  );
};

/* ============================================================ */
/* EXPORT                                                         */
/* ============================================================ */
Object.assign(window, {
  fmt, ScoreBar, ChartArea,
  DashboardPage, ClientsPage, AnnoncesPage, Detail,
  CartePage, OutilsPage, PhotoLocPage, EstimationPage, LegalPage,
});