// final-pages.jsx — PNceePage · ReseauPage · ReportsPage
// Pages v1 pour les 3 derniers Placeholders de design-v1

const { useState, useEffect, useCallback, useMemo } = React;

/* ══════════════════════════════════════════════════════════════════════════════
   PNCEE PAGE — Dépôts EMMY / PNCEE
══════════════════════════════════════════════════════════════════════════════ */

function PNceePage() {
  const [dossiers, setDossiers] = useState([]);
  const [loading, setLoading]   = useState(true);
  const [tab, setTab]           = useState('pending'); // 'pending' | 'config'
  const [emmyUrl, setEmmyUrl]   = useState(localStorage.getItem('emmy_url') || 'https://www.emmy.fr');
  const [emmyLogin, setEmmyLogin] = useState(localStorage.getItem('emmy_login') || '');
  const [selected, setSelected] = useState([]);
  const [exporting, setExporting] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      // Récupère les dossiers prêts à être déposés (status = approved)
      const data = await window.AE_API.fetch('/api/cee/drafts?status=approved&limit=50');
      setDossiers(data?.dossiers || data?.rows || []);
    } catch { setDossiers([]); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { load(); }, []);

  // Pré-sélection depuis fiche dossier (P2.4 — bouton "Préparer dépôt PNCEE")
  useEffect(() => {
    if (!dossiers.length) return;
    const presetRef = (() => { try { return sessionStorage.getItem('pncee_preselect'); } catch (_) { return null; } })();
    if (!presetRef) return;
    const hit = dossiers.find(d => (d.reference || d.ref) === presetRef);
    if (hit) setSelected([hit.id]);
    try { sessionStorage.removeItem('pncee_preselect'); } catch (_) {}
  }, [dossiers]);

  const toggleSelect = (id) => setSelected(prev =>
    prev.includes(id) ? prev.filter(x=>x!==id) : [...prev, id]
  );

  const toggleAll = () => {
    if (selected.length === dossiers.length) setSelected([]);
    else setSelected(dossiers.map(d=>d.id));
  };

  const exportCsv = () => {
    const sel = dossiers.filter(d => selected.includes(d.id));
    if (!sel.length) { alert('Sélectionnez au moins un dossier'); return; }
    const header = ['reference','beneficiaire','siret','adresse','zone','fostCode','kwhCumac','prime_eur','status','createdAt'];
    const rows = sel.map(d => header.map(k => JSON.stringify(d[k]||'')).join(','));
    const csv = [header.join(','),...rows].join('\n');
    const blob = new Blob([csv], {type:'text/csv;charset=utf-8'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href=url; a.download=`depot_emmy_${new Date().toISOString().slice(0,10)}.csv`; a.click();
    URL.revokeObjectURL(url);
  };

  const openEmmy = () => {
    window.open(emmyUrl||'https://www.emmy.fr', '_blank');
  };

  const kpiTotals = useMemo(() => {
    const sel = selected.length ? dossiers.filter(d=>selected.includes(d.id)) : dossiers;
    return {
      count: sel.length,
      kwh: sel.reduce((s,d)=>s+(d.kwhCumac||0),0),
      prime: sel.reduce((s,d)=>s+(d.prime_eur||d.primeTotale||0),0),
    };
  }, [dossiers, selected]);

  const TABS = [
    { id:'pending', label:'📋 Dossiers à déposer' },
    { id:'config',  label:'⚙️ Configuration EMMY' },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'18px 24px 0',borderBottom:'1px solid var(--border)',flexShrink:0}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
          <div>
            <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>🏛️ Dépôts <span style={{color:'var(--signal)'}}>PNCEE</span></div>
            <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Générateur CSV/XML EMMY · Simulation pré-dépôt · Suivi des acceptations</div>
          </div>
          <div style={{display:'flex',gap:8}}>
            <button className="btn b-ghost" onClick={exportCsv} disabled={!selected.length}>
              📥 Exporter CSV ({selected.length})
            </button>
            <button className="btn b-primary" onClick={openEmmy}>↗ Portail EMMY</button>
          </div>
        </div>
        <div style={{display:'flex',gap:2}}>
          {TABS.map(t=>(
            <button key={t.id} onClick={()=>setTab(t.id)}
              style={{padding:'8px 16px',fontSize:12,fontWeight:600,border:'none',cursor:'pointer',
                background:tab===t.id?'var(--bg1)':'transparent',
                color:tab===t.id?'var(--t1)':'var(--t2)',
                borderBottom:tab===t.id?'2px solid var(--signal)':'2px solid transparent',
                borderRadius:'6px 6px 0 0'}}>
              {t.label}
            </button>
          ))}
        </div>
      </div>

      {tab === 'pending' && (
        <div style={{flex:1,overflow:'auto',padding:'16px 24px',display:'flex',flexDirection:'column',gap:12}}>
          {/* KPI strip */}
          {kpiTotals.count > 0 && (
            <div style={{display:'flex',gap:12}}>
              {[
                ['📁 Dossiers', kpiTotals.count, ''],
                ['⚡ Volume CEE', kpiTotals.kwh.toLocaleString('fr-FR'), ' kWhc'],
                ['💰 Prime totale', kpiTotals.prime.toLocaleString('fr-FR'), ' €'],
              ].map(([l,v,u])=>(
                <div key={l} style={{flex:1,background:'var(--bg2)',borderRadius:10,border:'1px solid var(--border)',padding:'10px 14px'}}>
                  <div style={{fontSize:11,color:'var(--t2)',marginBottom:4}}>{l}</div>
                  <div style={{fontSize:18,fontWeight:800}}>{v}{u}</div>
                </div>
              ))}
            </div>
          )}

          {/* Tableau dossiers */}
          <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
            <div style={{padding:'10px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:10}}>
              <input type="checkbox" checked={selected.length===dossiers.length&&dossiers.length>0} onChange={toggleAll} />
              <span style={{fontSize:12,fontWeight:700,flex:1}}>
                {loading ? 'Chargement…' : `${dossiers.length} dossier${dossiers.length>1?'s':''} approvée${dossiers.length>1?'s':''} prêts`}
              </span>
              <button className="btn b-ghost" onClick={load} style={{fontSize:11}}>🔄</button>
            </div>
            {loading ? (
              <div style={{padding:32,textAlign:'center',color:'var(--t2)'}}>⏳ Chargement…</div>
            ) : dossiers.length === 0 ? (
              <div style={{padding:48,textAlign:'center',color:'var(--t2)'}}>
                <div style={{fontSize:32,marginBottom:12}}>📭</div>
                <div style={{fontWeight:700,marginBottom:6}}>Aucun dossier approuvé en attente de dépôt</div>
                <div style={{fontSize:12}}>Les dossiers approuvés dans le module Dossiers CEE apparaissent ici.</div>
                <button className="btn b-primary" style={{marginTop:12}} onClick={()=>window.AE_NAV?.('dossiers')}>→ Module Dossiers</button>
              </div>
            ) : (
              <table style={{width:'100%',borderCollapse:'collapse',fontSize:11}}>
                <thead>
                  <tr style={{background:'var(--bg3)'}}>
                    <th style={{width:36,padding:'7px 10px'}}></th>
                    {['Référence','Bénéficiaire','SIRET','Zone','FOST','kWh cumac','Prime €'].map(h=>(
                      <th key={h} style={{padding:'7px 10px',textAlign:'left',fontSize:10,color:'var(--t2)',fontWeight:600}}>{h}</th>
                    ))}
                    <th style={{padding:'7px 10px',textAlign:'center',fontSize:10,color:'var(--t2)',fontWeight:600}}>Statut</th>
                  </tr>
                </thead>
                <tbody>
                  {dossiers.map((d,i)=>(
                    <tr key={d.id} style={{borderBottom:'1px solid var(--border)',background:i%2===0?'':'var(--bg3)'}}>
                      <td style={{padding:'7px 10px',textAlign:'center'}}>
                        <input type="checkbox" checked={selected.includes(d.id)} onChange={()=>toggleSelect(d.id)} />
                      </td>
                      <td style={{padding:'7px 10px',fontWeight:700,color:'var(--plasma)'}}>{d.reference||d.ref||'—'}</td>
                      <td style={{padding:'7px 10px'}}>{d.beneficiaireNom||d.benef||'—'}</td>
                      <td style={{padding:'7px 10px',fontFamily:'monospace',fontSize:10}}>{d.siret||'—'}</td>
                      <td style={{padding:'7px 10px'}}>{d.zone||'—'}</td>
                      <td style={{padding:'7px 10px'}}>{d.fostCode||d.fosts?.[0]||'—'}</td>
                      <td style={{padding:'7px 10px',fontWeight:700,color:'var(--signal-deep)'}}>{(d.kwhCumac||0).toLocaleString('fr-FR')}</td>
                      <td style={{padding:'7px 10px',fontWeight:700,color:'var(--copper)'}}>{(d.prime_eur||d.primeTotale||0).toLocaleString('fr-FR')}</td>
                      <td style={{padding:'7px 10px',textAlign:'center'}}>
                        <span style={{fontSize:9,fontWeight:700,background:'var(--signal-tint)',color:'var(--signal)',borderRadius:8,padding:'2px 7px'}}>
                          Prêt EMMY
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      )}

      {tab === 'config' && (
        <div style={{flex:1,overflow:'auto',padding:'16px 24px',display:'flex',flexDirection:'column',gap:14}}>
          {/* EMMY config */}
          <div style={{background:'var(--bg2)',borderRadius:12,border:'1.5px solid #9C27B033',overflow:'hidden'}}>
            <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:10}}>
              <div style={{width:32,height:32,background:'#9C27B0',borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,color:'#fff'}}>E</div>
              <div>
                <div style={{fontSize:13,fontWeight:700}}>Portail EMMY (PNCEE)</div>
                <div style={{fontSize:11,color:'var(--t2)'}}>Espace de dépôt officiel des dossiers CEE</div>
              </div>
            </div>
            <div style={{padding:'14px 16px',display:'flex',flexDirection:'column',gap:10}}>
              <div>
                <label className="lbl">URL portail EMMY</label>
                <input className="fi" value={emmyUrl} onChange={e=>{ setEmmyUrl(e.target.value); localStorage.setItem('emmy_url',e.target.value); }} placeholder="https://www.emmy.fr" />
              </div>
              <div>
                <label className="lbl">Identifiant EMMY</label>
                <input className="fi" value={emmyLogin} onChange={e=>{ setEmmyLogin(e.target.value); localStorage.setItem('emmy_login',e.target.value); }} placeholder="votre@email.com" />
              </div>
              <div style={{display:'flex',gap:8}}>
                <button className="btn b-primary" onClick={openEmmy}>↗ Ouvrir EMMY</button>
                <a href="https://www.ecologie.gouv.fr/politiques-publiques/certificats-economies-denergie" target="_blank" rel="noopener" className="btn b-ghost" style={{textDecoration:'none'}}>🔗 PNCEE ecologie.gouv.fr</a>
              </div>
            </div>
          </div>

          {/* Process dépôt */}
          <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
            <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>📋 Processus de dépôt</div>
            <div style={{padding:'14px 16px'}}>
              {[
                ['1','Sélectionner les dossiers','Cochez les dossiers approuvés dans l\'onglet "Dossiers à déposer"'],
                ['2','Exporter le CSV','Cliquez "Exporter CSV" pour télécharger le fichier de dépôt'],
                ['3','Se connecter EMMY','Ouvrez le portail EMMY et connectez-vous avec vos identifiants'],
                ['4','Importer sur EMMY','Chargez le CSV dans EMMY et validez le dépôt'],
                ['5','Accusé de réception','EMMY renvoie un accusé — conservez-le dans les pièces du dossier'],
              ].map(([num,titre,desc])=>(
                <div key={num} style={{display:'flex',gap:12,marginBottom:14}}>
                  <div style={{width:26,height:26,background:'var(--plasma)',borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:800,color:'#fff',flexShrink:0}}>{num}</div>
                  <div>
                    <div style={{fontSize:12,fontWeight:700,marginBottom:2}}>{titre}</div>
                    <div style={{fontSize:11,color:'var(--t2)'}}>{desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESEAU PAGE — Annuaire RGE / Installateurs certifiés
══════════════════════════════════════════════════════════════════════════════ */

const RGE_DOMAINES = [
  { id:'',           label:'Toutes spécialités' },
  { id:'CHAUFFAGE',  label:'Chauffage / PAC' },
  { id:'FROID',      label:'Froid commercial' },
  { id:'ISOLATION',  label:'Isolation' },
  { id:'SOLAIRE',    label:'Solaire PV' },
  { id:'GTB',        label:'GTB / Automatisme' },
  { id:'AUDIT',      label:'Audit énergétique' },
];

function ReseauPage() {
  const [cp, setCp]             = useState('');
  const [domaine, setDomaine]   = useState('');
  const [results, setResults]   = useState([]);
  const [loading, setLoading]   = useState(false);
  const [selected, setSelected] = useState(null);
  const [searched, setSearched] = useState(false);

  const handleSearch = async () => {
    if (!cp && !domaine) return;
    setLoading(true); setSearched(true);
    try {
      // API RGE gouv.fr
      const params = new URLSearchParams();
      if (cp) params.set('codepostal', cp);
      if (domaine) params.set('activite', domaine);
      params.set('nb', '20');
      const resp = await fetch(`https://data.ademe.fr/data-fair/api/v1/datasets/liste-des-entreprises-rge-2/lines?${params}`)
        .then(r=>r.json()).catch(()=>null);
      setResults(resp?.results || []);
    } catch { setResults([]); }
    finally { setLoading(false); }
  };

  const initials = (name) => (name||'?').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  const bg = (name) => { const h=[...(name||'')].reduce((a,c)=>a+c.charCodeAt(0),0); return ['var(--plasma)','#00b373','var(--amber)','var(--rouge)','#7c3aed'][h%5]; };

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'18px 24px 12px',borderBottom:'1px solid var(--border)',flexShrink:0}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>👷 Réseau <span style={{color:'var(--signal)'}}>RGE</span></div>
            <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Annuaire installateurs certifiés · Matching bénéficiaire ↔ installateur · API ADEME</div>
          </div>
          <a href="https://france-renov.gouv.fr/professionnels/trouver-artisan-rge" target="_blank" rel="noopener" className="btn b-ghost" style={{textDecoration:'none',fontSize:11}}>
            🔗 France Rénov RGE
          </a>
        </div>
      </div>

      <div style={{flex:1,overflow:'hidden',display:'flex',flexDirection:'column',padding:'16px 24px',gap:12}}>
        {/* Barre de recherche */}
        <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',padding:'14px 16px',display:'flex',gap:10,alignItems:'flex-end',flexShrink:0,flexWrap:'wrap'}}>
          <div style={{flex:'0 0 160px'}}>
            <label className="lbl">Code postal</label>
            <input className="fi" value={cp} onChange={e=>setCp(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&handleSearch()}
              placeholder="75001, 69000…" maxLength={5} />
          </div>
          <div style={{flex:1,minWidth:200}}>
            <label className="lbl">Spécialité / Domaine</label>
            <select className="fs" value={domaine} onChange={e=>setDomaine(e.target.value)}>
              {RGE_DOMAINES.map(d=><option key={d.id} value={d.id}>{d.label}</option>)}
            </select>
          </div>
          <button className="btn b-primary" onClick={handleSearch} disabled={loading} style={{height:38,whiteSpace:'nowrap'}}>
            {loading ? '⏳' : '🔍 Rechercher'}
          </button>
        </div>

        {/* Résultats */}
        <div style={{flex:1,overflow:'hidden',display:'flex',gap:14}}>
          {/* Liste */}
          <div style={{flex:'0 0 340px',overflow:'auto',display:'flex',flexDirection:'column',gap:6}}>
            {!searched ? (
              <div style={{padding:32,textAlign:'center',color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',height:'100%',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
                <div style={{fontSize:32,marginBottom:12}}>🔍</div>
                <div style={{fontWeight:700,marginBottom:6}}>Recherchez un installateur RGE</div>
                <div style={{fontSize:12}}>Entrez un code postal et/ou une spécialité pour trouver les installateurs certifiés près de vos chantiers.</div>
              </div>
            ) : loading ? (
              <div style={{padding:32,textAlign:'center',color:'var(--t2)'}}>⏳ Recherche en cours…</div>
            ) : results.length === 0 ? (
              <div style={{padding:32,textAlign:'center',color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)'}}>
                <div style={{fontSize:24,marginBottom:8}}>🤷</div>
                Aucun installateur RGE trouvé pour ces critères.
              </div>
            ) : results.map((r,i) => {
              const nom = r['nom_de_l_entreprise'] || r['nom'] || '—';
              const adr = [r['adresse'],r['code_postal'],r['commune']].filter(Boolean).join(' ');
              return (
                <div key={i} onClick={()=>setSelected(r)}
                  style={{
                    padding:'10px 14px',background:selected===r?'var(--signal-tint)':'var(--bg2)',
                    borderLeft:`3px solid ${selected===r?'var(--signal)':'transparent'}`,
                    border:'1px solid var(--border)',borderRadius:8,cursor:'pointer',
                  }}>
                  <div style={{display:'flex',gap:10,alignItems:'center'}}>
                    <div style={{width:36,height:36,background:bg(nom),borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:12,color:'#fff',flexShrink:0}}>
                      {initials(nom)}
                    </div>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontWeight:700,fontSize:12,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{nom}</div>
                      <div style={{fontSize:10,color:'var(--t2)',marginTop:2}}>{r['siret']||'—'}</div>
                      <div style={{fontSize:10,color:'var(--t2)'}}>{adr}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Détail */}
          <div style={{flex:1,background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'auto'}}>
            {!selected ? (
              <div style={{height:'100%',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--t2)'}}>
                <div style={{textAlign:'center'}}>
                  <div style={{fontSize:32,marginBottom:12}}>👷</div>
                  <div style={{fontSize:12}}>Sélectionnez un installateur pour voir sa fiche</div>
                </div>
              </div>
            ) : (
              <div style={{padding:20}}>
                <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:16}}>
                  <div style={{width:52,height:52,background:bg(selected['nom_de_l_entreprise']||''),borderRadius:12,display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:18,color:'#fff'}}>
                    {initials(selected['nom_de_l_entreprise']||'')}
                  </div>
                  <div>
                    <div style={{fontSize:16,fontWeight:800}}>{selected['nom_de_l_entreprise']||'—'}</div>
                    <div style={{fontSize:11,color:'var(--t2)'}}>{selected['forme_juridique']||''}</div>
                    <span style={{fontSize:10,fontWeight:700,background:'var(--signal-tint)',color:'var(--signal)',borderRadius:8,padding:'2px 8px'}}>RGE Certifié</span>
                  </div>
                </div>
                {[
                  ['SIRET', selected['siret']],
                  ['Adresse', [selected['adresse'],selected['code_postal'],selected['commune']].filter(Boolean).join(' ')],
                  ['Téléphone', selected['telephone']],
                  ['Email', selected['email']],
                  ['Qualification', selected['qualification']],
                  ['Domaine', selected['domaine_de_travaux']||selected['activite']],
                  ['Date expiration certif.', selected['date_fin_de_validite']],
                ].filter(([,v])=>v).map(([k,v])=>(
                  <div key={k} style={{display:'flex',gap:12,padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                    <div style={{width:160,fontSize:11,color:'var(--t2)',flexShrink:0}}>{k}</div>
                    <div style={{fontSize:12,fontWeight:600}}>{v}</div>
                  </div>
                ))}
                <div style={{marginTop:16,display:'flex',gap:8}}>
                  <button className="btn b-primary" onClick={()=>{ navigator.clipboard?.writeText(selected['siret']||''); }}>📋 Copier SIRET</button>
                  {selected['email'] && <a href={`mailto:${selected['email']}`} className="btn b-ghost" style={{textDecoration:'none'}}>✉️ Contacter</a>}
                  <button className="btn b-ghost" onClick={()=>window.AE_NAV?.('crm')}>👤 Voir CRM</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════════
   REPORTS PAGE — Tableau de bord reporting
══════════════════════════════════════════════════════════════════════════════ */

function KpiCard({ label, value, unit, color, icon, sub }) {
  return (
    <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',padding:'16px 18px'}}>
      <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
        <div style={{width:32,height:32,background:`${color}22`,borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',fontSize:16}}>
          {icon}
        </div>
        <div style={{fontSize:11,color:'var(--t2)',fontWeight:600}}>{label}</div>
      </div>
      <div style={{fontSize:26,fontWeight:800,color,lineHeight:1}}>{value}<span style={{fontSize:13,fontWeight:400,marginLeft:4,color:'var(--t2)'}}>{unit}</span></div>
      {sub && <div style={{fontSize:11,color:'var(--t2)',marginTop:6}}>{sub}</div>}
    </div>
  );
}

function SimpleBarChart({ data, color }) {
  if (!data?.length) return null;
  const max = Math.max(...data.map(d=>d.count||0), 1);
  return (
    <div style={{display:'flex',alignItems:'flex-end',gap:3,height:80,paddingTop:4}}>
      {data.slice(-20).map((d,i)=>(
        <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:2,minWidth:0}}>
          <div style={{width:'100%',background:color||'var(--signal)',borderRadius:'2px 2px 0 0',height:`${Math.max(2,(d.count/max)*72)}px`,minHeight:2}} />
          {data.length <= 10 && <div style={{fontSize:8,color:'var(--t2)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:'100%'}}>{d.date||d.label}</div>}
        </div>
      ))}
    </div>
  );
}

function ReportsPage() {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [period, setPeriod]   = useState('30'); // jours
  const [exporting, setExporting] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [commStats, metrics] = await Promise.all([
        window.AE_API.fetch('/api/comm/stats').catch(()=>null),
        window.AE_API.fetch('/api/metrics').catch(()=>null),
      ]);
      setData({ commStats, metrics });
    } catch { setData({}); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { load(); }, []);

  const exportReport = (format = 'csv') => {
    const reportDate = new Date().toLocaleDateString('fr-FR');
    const dossiers   = window.DOSSIERS || [];
    const visites    = window.VISITES  || [];
    const opps       = data?.metrics?.crm || {};
    const m          = data?.metrics;

    if (format === 'csv') {
      // CSV consolidé multi-section
      const sections = [
        ['# Rapport Audits Énergies', reportDate],
        [''],
        ['## Indicateurs principaux'],
        ['Indicateur', 'Valeur', 'Unité'],
        ['Dossiers CEE total', m?.dossiers?.total ?? dossiers.length, ''],
        ['Volume CEE', ((m?.dossiers?.kwhCumacSum ?? dossiers.reduce((s,d)=>s+(d.kwhCumac||d.cumac||0),0)) / 1e6).toFixed(2), 'GWhc'],
        ['Prime totale', m?.dossiers?.primeSum ?? dossiers.reduce((s,d)=>s+(d.primeTotale||d.amount||0),0), '€'],
        ['Visites terrain', m?.visites?.total ?? visites.length, ''],
        ['Visites complétées', visites.filter(v=>v.status==='completed').length, ''],
        ['Emails traités', data?.commStats?.byStatus?.find(s=>s.status==='processed')?.count || 0, ''],
        ['Opportunités CRM', m?.crm?.total || 0, ''],
        ['Contacts', m?.contacts?.total || 0, ''],
        ['Signatures', m?.signatures?.total || 0, ''],
        [''],
        ['## Détail dossiers'],
        ['Référence', 'Client', 'FOST', 'kWh cumac', 'Prime €', 'Stage', 'Score'],
        ...dossiers.map(d => [d.ref, d.client, d.fost, d.cumac||d.kwhCumac||0, d.amount||d.primeTotale||0, d.stage, d.risk||d.coherence||'']),
        [''],
        ['## Détail visites'],
        ['Référence', 'Client', 'Technicien', 'Statut', 'Type', 'Durée (s)'],
        ...visites.map(v => [v.ref, v.client||'—', v.technicianName, v.status, v.type, v.durationSeconds||0]),
      ];
      const csv = sections.map(row => Array.isArray(row) ? row.map(c => JSON.stringify(c||'')).join(',') : '').join('\n');
      const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url; a.download = `rapport_${reportDate.replace(/\//g, '-')}.csv`; a.click();
      URL.revokeObjectURL(url);
      window.toast?.success('Rapport CSV téléchargé');
    } else if (format === 'pdf') {
      // PDF via fenêtre print
      const html = `
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Rapport Audits Énergies — ${reportDate}</title>
<style>
  body{font-family:'Helvetica Neue',Arial,sans-serif;max-width:780px;margin:30px auto;color:#0E1010;line-height:1.5;padding:20px}
  h1{color:#0E1010;border-bottom:3px solid #3FE07C;padding-bottom:10px;margin-top:0}
  h2{color:#0E1010;margin-top:30px;border-bottom:1px solid #ddd;padding-bottom:6px;font-size:18px}
  table{border-collapse:collapse;width:100%;font-size:11px;margin-top:10px}
  th{background:#0E1010;color:#fff;padding:8px;text-align:left;font-weight:600;font-size:10px;letter-spacing:0.5px;text-transform:uppercase}
  td{padding:7px 8px;border-bottom:1px solid #eee}
  tr:nth-child(even){background:#fafafa}
  .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
  .kpi{padding:14px;border:1px solid #ddd;border-radius:8px;background:#fafafa}
  .kpi-label{font-size:9px;color:#666;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
  .kpi-value{font-size:22px;font-weight:700;margin-top:4px;color:#0E1010}
  .kpi-unit{font-size:11px;color:#666;margin-left:4px}
  .footer{margin-top:40px;padding-top:14px;border-top:1px solid #ddd;font-size:9px;color:#999;text-align:center}
  @media print{body{margin:0;padding:14mm}.no-print{display:none}}
</style></head><body>
<h1>Rapport Audits Énergies</h1>
<div style="color:#666;margin-bottom:20px">Édité le ${reportDate} · Période : ${period} jours · Cockpit CEE v4</div>

<div class="kpi-grid">
  <div class="kpi"><div class="kpi-label">Dossiers CEE</div><div class="kpi-value">${m?.dossiers?.total ?? dossiers.length}</div></div>
  <div class="kpi"><div class="kpi-label">Volume CEE</div><div class="kpi-value">${((m?.dossiers?.kwhCumacSum ?? dossiers.reduce((s,d)=>s+(d.kwhCumac||d.cumac||0),0)) / 1e6).toFixed(2)}<span class="kpi-unit">GWhc</span></div></div>
  <div class="kpi"><div class="kpi-label">Prime totale</div><div class="kpi-value">${(m?.dossiers?.primeSum ?? dossiers.reduce((s,d)=>s+(d.primeTotale||d.amount||0),0)).toLocaleString('fr-FR')}<span class="kpi-unit">€</span></div></div>
  <div class="kpi"><div class="kpi-label">Visites terrain</div><div class="kpi-value">${m?.visites?.total ?? visites.length}</div></div>
  <div class="kpi"><div class="kpi-label">Opportunités CRM</div><div class="kpi-value">${m?.crm?.total || 0}</div></div>
  <div class="kpi"><div class="kpi-label">Contacts</div><div class="kpi-value">${m?.contacts?.total || 0}</div></div>
</div>

<h2>Détail dossiers (${dossiers.length})</h2>
<table>
  <thead><tr><th>Réf.</th><th>Client</th><th>FOST</th><th>kWh cumac</th><th>Prime €</th><th>Stage</th></tr></thead>
  <tbody>${dossiers.slice(0, 100).map(d => `<tr><td>${d.ref}</td><td>${d.client}</td><td>${d.fost||'—'}</td><td>${(d.cumac||d.kwhCumac||0).toLocaleString('fr-FR')}</td><td>${(d.amount||d.primeTotale||0).toLocaleString('fr-FR')}</td><td>${d.stage}</td></tr>`).join('')}</tbody>
</table>

<h2>Détail visites (${visites.length})</h2>
<table>
  <thead><tr><th>Réf.</th><th>Technicien</th><th>Statut</th><th>Type</th><th>Durée</th></tr></thead>
  <tbody>${visites.slice(0, 100).map(v => `<tr><td>${v.ref}</td><td>${v.technicianName||'—'}</td><td>${v.status}</td><td>${v.type}</td><td>${Math.round((v.durationSeconds||0)/60)} min</td></tr>`).join('')}</tbody>
</table>

<div class="footer">Audits Énergies SAS · Cockpit CEE · Document généré automatiquement</div>
<button class="no-print" style="margin-top:30px;padding:10px 20px;background:#0E1010;color:#fff;border:none;border-radius:6px;cursor:pointer" onclick="window.print()">🖨 Imprimer / PDF</button>
</body></html>`;
      const w = window.open('', '_blank');
      w.document.write(html);
      w.document.close();
      window.toast?.success('Aperçu PDF ouvert — cliquez Imprimer pour télécharger');
    }
  };

  // KPIs — priorité aux vraies stats DB depuis /api/metrics, fallback sur window globals
  const m = data?.metrics;
  const dossiers  = window.DOSSIERS || [];
  const visites   = window.VISITES  || [];

  // Dossiers : priorité metrics.dossiers (DB), fallback sur window.DOSSIERS (mock)
  const dossiersTotal = m?.dossiers?.total ?? dossiers.length;
  const dossiersByStatus = useMemo(() => {
    if (m?.dossiers?.byStatus?.length) {
      return m.dossiers.byStatus.reduce((acc, r) => { acc[r.key] = r.count; return acc; }, {});
    }
    const s = {}; dossiers.forEach(d => { s[d.status] = (s[d.status] || 0) + 1; }); return s;
  }, [m, dossiers]);
  const fallbackKwh   = useMemo(() => dossiers.reduce((s, d) => s + (d.kwhCumac || d.volumes?.total || 0), 0), [dossiers]);
  const fallbackPrime = useMemo(() => dossiers.reduce((s, d) => s + (d.primeTotale || d.prime_eur || 0), 0), [dossiers]);
  const totalKwh   = m?.dossiers?.kwhCumacSum ?? fallbackKwh;
  const totalPrime = m?.dossiers?.primeSum    ?? fallbackPrime;

  // Visites : priorité metrics.visites
  const visitesTotal     = m?.visites?.total ?? visites.length;
  const visitesCompleted = m?.visites?.byStatus?.find(s => s.key === 'completed')?.count ?? visites.filter(v => v.status === 'completed').length;

  // Email stats — déjà via data.commStats
  const emailStats = data?.commStats;
  const emailTotal   = m?.emails?.total ?? emailStats?.byStatus?.reduce((s, b) => s + (parseInt(b.count) || 0), 0) ?? 0;
  const emailPending = m?.emails?.byStatus?.find(b => b.key === 'pending')?.count ?? emailStats?.byStatus?.find(b => b.status === 'pending')?.count ?? 0;

  // Indicateurs additionnels disponibles depuis metrics
  const oppsTotal  = m?.crm?.total ?? 0;
  const contactsTotal = m?.contacts?.total ?? 0;
  const signaturesTotal = m?.signatures?.total ?? 0;
  const approvalsTotal = m?.approvals?.total ?? 0;

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'auto'}}>
      {/* Header */}
      <div style={{padding:'18px 24px 12px',borderBottom:'1px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>📊 <span style={{color:'var(--signal)'}}>Reporting</span></div>
          <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>KPIs consolidés · Volume CEE · Activité terrain · Exports white-label</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <select className="fs" value={period} onChange={e=>setPeriod(e.target.value)} style={{fontSize:11}}>
            <option value="7">7 derniers jours</option>
            <option value="30">30 derniers jours</option>
            <option value="90">3 derniers mois</option>
            <option value="365">12 derniers mois</option>
          </select>
          <button className="btn b-ghost" onClick={load}>🔄 Rafraîchir</button>
          <button className="btn b-ghost" onClick={() => exportReport('csv')}>📊 CSV</button>
          <button className="btn b-primary" onClick={() => exportReport('pdf')}>📄 PDF</button>
        </div>
      </div>

      {loading ? (
        <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--t2)'}}>⏳ Chargement des données…</div>
      ) : (
        <div style={{padding:'16px 24px',display:'flex',flexDirection:'column',gap:16}}>
          {/* KPIs principaux */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
            <KpiCard label="Dossiers CEE" value={dossiersTotal} unit="dossiers" color="var(--plasma)" icon="📁"
              sub={`${dossiersByStatus['approved']||0} approuvés · ${(dossiersByStatus['pending']||0)+(dossiersByStatus['draft']||0)} en cours`} />
            <KpiCard label="Volume CEE" value={totalKwh > 0 ? (totalKwh/1000000).toFixed(1):'0'} unit="GWhc" color="#059669" icon="⚡"
              sub={totalPrime > 0 ? `${totalPrime.toLocaleString('fr-FR')} € de prime` : 'Calcul sur dossiers'} />
            <KpiCard label="Visites terrain" value={visitesTotal} unit="visites" color="var(--copper)" icon="🎥"
              sub={`${visitesCompleted} terminées`} />
            <KpiCard label="Emails reçus" value={emailTotal} unit="emails" color="var(--signal)" icon="📧"
              sub={emailPending > 0 ? `${emailPending} en attente de traitement` : 'Tous traités'} />
          </div>

          {/* Bandeau secondaire : autres KPIs depuis /api/metrics */}
          {m && (
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
              <KpiCard label="Opportunités CRM" value={oppsTotal} unit="opps" color="#3b5bdb" icon="🎯"
                sub={m.recent?.opps30 ? `${m.recent.opps30} nouvelles 30j` : '—'} />
              <KpiCard label="Contacts" value={contactsTotal} unit="contacts" color="#7c3aed" icon="👥"
                sub={`${m.contacts?.orgs || 0} organisations`} />
              <KpiCard label="Signatures" value={signaturesTotal} unit="docs" color="#06b6d4" icon="✍️"
                sub={`${m.signatures?.byStatus?.find(s=>s.key==='signed')?.count || 0} signés`} />
              <KpiCard label="Dépôts approuvés" value={approvalsTotal} unit="dépôts" color="#f59e0b" icon="🏛️"
                sub={`${m.approvals?.byStatus?.find(s=>s.key==='approved')?.count || 0} prêts`} />
            </div>
          )}

          {/* D2 — Évolution temporelle Chart.js */}
          <ChartTemporelEvolution dossiers={dossiers} visites={visites} />

          {/* Dossiers par status */}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
              <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>📁 Répartition dossiers CEE</div>
              <div style={{padding:'14px 16px'}}>
                {dossiers.length === 0 ? (
                  <div style={{textAlign:'center',color:'var(--t2)',fontSize:11,padding:12}}>Aucun dossier</div>
                ) : Object.entries(dossiersByStatus).map(([k,v])=>{
                  const pct = Math.round(v/dossiers.length*100);
                  const colors={approved:'var(--signal-deep)',rejected:'var(--rouge)',pending:'var(--amber)',draft:'var(--ink-4)',processing:'var(--plasma)'};
                  const c = colors[k]||'var(--ink-4)';
                  return (
                    <div key={k} style={{marginBottom:10}}>
                      <div style={{display:'flex',justifyContent:'space-between',fontSize:11,marginBottom:4}}>
                        <span style={{textTransform:'capitalize'}}>{k}</span>
                        <span style={{fontWeight:700}}>{v} ({pct}%)</span>
                      </div>
                      <div style={{height:8,background:'var(--bg3)',borderRadius:4,overflow:'hidden'}}>
                        <div style={{width:`${pct}%`,height:'100%',background:c,borderRadius:4,transition:'width .5s'}} />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Emails par jour */}
            <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
              <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>📧 Emails reçus (30 derniers jours)</div>
              <div style={{padding:'14px 16px'}}>
                {emailStats?.perDay?.length ? (
                  <SimpleBarChart data={emailStats.perDay} color="var(--signal)" />
                ) : (
                  <div style={{height:80,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--t2)',fontSize:11}}>Données non disponibles</div>
                )}
                <div style={{marginTop:10,display:'flex',gap:16}}>
                  {emailStats?.bySenderType?.map(b=>(
                    <div key={b.senderType} style={{fontSize:11}}>
                      <span style={{color:'var(--t2)'}}>{b.senderType||'inconnu'} :</span>
                      <strong style={{marginLeft:4}}>{b.count}</strong>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Liens rapides vers modules */}
          <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
            <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>🔗 Accès rapide aux modules</div>
            <div style={{padding:'14px 16px',display:'flex',flexWrap:'wrap',gap:10}}>
              {[
                ['📁 Dossiers CEE','dossiers'],['🎥 Visites','visites'],['☀️ Solaire','solar'],
                ['📋 Audit','audit'],['⚡ Dim.','dim'],['💬 Comm.','comm'],['👥 CRM','crm'],
                ['🏛️ Gov','gov'],['🏛️ PNCEE','pncee'],
              ].map(([l,k])=>(
                <button key={k} className="btn b-ghost" style={{fontSize:12}} onClick={()=>window.AE_NAV?.(k)}>{l}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// D2 — Graphique évolution temporelle (Chart.js)
function ChartTemporelEvolution({ dossiers, visites }) {
  const canvasRef = React.useRef(null);
  const chartRef = React.useRef(null);

  React.useEffect(() => {
    if (!window.Chart || !canvasRef.current) return;

    // Group dossiers + visites par mois sur 12 derniers mois
    const now = new Date();
    const months = [];
    for (let i = 11; i >= 0; i--) {
      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
      months.push({
        key: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`,
        label: d.toLocaleDateString('fr-FR', { month: 'short', year: '2-digit' }),
        dossiers: 0, visites: 0, prime: 0,
      });
    }

    (dossiers || []).forEach(d => {
      const dt = d.created || d.createdAt;
      if (!dt) return;
      const k = dt.slice(0, 7);
      const m = months.find(x => x.key === k);
      if (m) { m.dossiers++; m.prime += (d.amount || d.primeTotale || 0); }
    });
    (visites || []).forEach(v => {
      const dt = v.startedAt;
      if (!dt) return;
      const k = String(dt).slice(0, 7);
      const m = months.find(x => x.key === k);
      if (m) m.visites++;
    });

    const data = {
      labels: months.map(m => m.label),
      datasets: [
        { label: 'Dossiers CEE', data: months.map(m => m.dossiers), borderColor: '#3FE07C', backgroundColor: 'rgba(63,224,124,0.1)', tension: 0.35, yAxisID: 'y' },
        { label: 'Visites IA',   data: months.map(m => m.visites),  borderColor: '#6B4CFF', backgroundColor: 'rgba(107,76,255,0.1)', tension: 0.35, yAxisID: 'y' },
        { label: 'Prime €',      data: months.map(m => m.prime),    borderColor: '#C66A2B', backgroundColor: 'rgba(198,106,43,0.1)', tension: 0.35, yAxisID: 'y1', borderDash: [4, 3] },
      ],
    };

    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new window.Chart(canvasRef.current, {
      type: 'line',
      data,
      options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { position: 'top', labels: { font: { size: 11, family: 'inherit' } } } },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: 'Volume', font: { size: 10 } }, beginAtZero: true },
          y1: { type: 'linear', position: 'right', title: { display: true, text: 'Prime (€)', font: { size: 10 } }, grid: { drawOnChartArea: false }, beginAtZero: true },
          x: { ticks: { font: { size: 10 } } },
        },
      },
    });

    return () => { if (chartRef.current) chartRef.current.destroy(); };
  }, [dossiers, visites]);

  return (
    <div style={{ background: 'var(--bg2)', borderRadius: 12, border: '1px solid var(--border)', overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 13, fontWeight: 700 }}>📈 Évolution sur 12 mois</span>
        <span style={{ fontSize: 11, color: 'var(--t2)' }}>· Dossiers CEE / Visites / Prime €</span>
      </div>
      <div style={{ padding: 16, height: 280 }}>
        {window.Chart ? (
          <canvas ref={canvasRef} />
        ) : (
          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--t2)', fontSize: 11 }}>
            Chart.js non chargé — vérifiez votre connexion CDN
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PNceePage, ReseauPage, ReportsPage });