// misc-pages.jsx — OdooPage · IntegPage · StoragePage · EquipePage
// Portage de pg-odoo / pg-integ / pg-storage / pg-equipe (audits-energies.html) → design-v1

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

/* ══════════════════════════════════════════════════════════════════════════════
   ODOO PAGE
══════════════════════════════════════════════════════════════════════════════ */

function OdooPage() {
  const [syncMode, setSyncMode] = useState('full-auto');
  const [syncLog, setSyncLog]   = useState('— logs Odoo XML-RPC —');
  const [syncing, setSyncing]   = useState(false);
  const [status, setStatus]     = useState('Vérification…');

  useEffect(() => {
    window.AE_API?.fetch('/api/odoo/status').then(d => {
      setStatus(d?.connected ? `✅ Connecté — ${d.uid ? `UID ${d.uid}` : 'OK'}` : `❌ ${d?.error || 'Non connecté'}`);
    }).catch(() => setStatus('❌ Erreur serveur'));
  }, []);

  const runSync = async () => {
    setSyncing(true);
    setSyncLog('⏳ Lancement de la synchronisation…\n');
    try {
      const data = await window.AE_API.postJson('/api/odoo/sync', { mode: syncMode });
      const lines = [];
      if (data?.partners) lines.push(`✅ Contacts : ${data.partners} synchronisés`);
      if (data?.leads)    lines.push(`✅ Opportunités : ${data.leads} synchronisées`);
      if (data?.quotes)   lines.push(`✅ Devis : ${data.quotes} synchronisés`);
      if (data?.error)    lines.push(`❌ Erreur : ${data.error}`);
      if (!lines.length)  lines.push(`✅ ${JSON.stringify(data)}`);
      setSyncLog(lines.join('\n'));
      window.AE_API?.hydrate?.();
    } catch(e) {
      setSyncLog(`❌ ${e.message}`);
    }
    setSyncing(false);
  };

  const odooNav = (path) => window.open(`https://discovery1.odoo.com${path}`, '_blank');
  const openApp = () => {
    const a = document.createElement('a');
    a.href = 'odoo://discovery1.odoo.com';
    a.click();
    setTimeout(() => window.open('https://discovery1.odoo.com/web', '_blank'), 1200);
  };

  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}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>🟣 Odoo <span style={{color:'var(--signal)'}}>Direct</span></div>
            <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Accès complet à votre instance Odoo · Navigation native · Sync CRM</div>
          </div>
          <div style={{display:'flex',gap:8}}>
            <button className="btn b-primary" onClick={openApp}>🖥 Ouvrir Odoo (app)</button>
            <button className="btn b-ghost" onClick={()=>window.open('https://discovery1.odoo.com/web','_blank')}>↗ Web</button>
          </div>
        </div>
      </div>

      <div style={{padding:'16px 24px',display:'flex',flexDirection:'column',gap:16}}>
        {/* Sync bar */}
        <div style={{background:'linear-gradient(135deg,rgba(11,61,145,.06),rgba(0,179,115,.10))',border:'1.5px solid var(--signal)',borderRadius:12,padding:'14px 18px'}}>
          <div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
            <div style={{display:'flex',alignItems:'center',gap:10,flex:1,minWidth:200}}>
              <div style={{width:32,height:32,background:'var(--signal)',borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',fontSize:16}}>💎</div>
              <div>
                <div style={{fontSize:13,fontWeight:700}}>Importer Odoo → CRM Discovery</div>
                <div style={{fontSize:11,color:'var(--t2)'}}>{status}</div>
              </div>
            </div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap',alignItems:'center'}}>
              <select className="fs" value={syncMode} onChange={e=>setSyncMode(e.target.value)} style={{fontSize:11,padding:'6px 10px'}}>
                <option value="full-auto">🔁 Tout importer + auto 15 min</option>
                <option value="full">📥 Tout importer (manuel)</option>
                <option value="incremental">⚡ Sync incrémentale</option>
                <option value="preview">👁 Aperçu sans importer</option>
              </select>
              <button className="btn b-primary" onClick={runSync} disabled={syncing} style={{fontSize:12}}>
                {syncing ? '⏳ En cours…' : '🚀 Lancer'}
              </button>
            </div>
          </div>
          {syncLog !== '— logs Odoo XML-RPC —' && (
            <div style={{marginTop:12,background:'#1e293b',borderRadius:8,padding:'10px 12px',fontFamily:'monospace',fontSize:10.5,color:'#94a3b8',whiteSpace:'pre-wrap',lineHeight:1.8}}>
              {syncLog}
            </div>
          )}
        </div>

        {/* Quick nav */}
        <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
          {[
            ['/odoo/sales','🧾 Devis'],['/odoo/contacts','👥 Contacts'],['/odoo/inventory','📦 Stock'],
            ['/odoo/accounting','💰 Compta'],['/odoo/purchase','🛒 Achats'],['/odoo/project','📁 Projets'],
            ['/odoo/employees','👤 RH'],['/web#action=mail.action_discuss','💬 Messagerie'],
          ].map(([p,l]) => (
            <button key={p} className="btn b-ghost" style={{fontSize:11,padding:'5px 10px'}} onClick={()=>odooNav(p)}>{l}</button>
          ))}
        </div>

        {/* Cards */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
          {/* App card */}
          <div style={{background:'#714B6710',border:'1.5px solid #714B67',borderRadius:12,padding:16,cursor:'pointer'}} onClick={openApp}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
              <div style={{width:44,height:44,background:'#714B67',borderRadius:10,display:'flex',alignItems:'center',justifyContent:'center',fontSize:22,color:'#fff'}}>🖥</div>
              <div>
                <div style={{fontSize:14,fontWeight:700}}>Application Odoo <span style={{fontSize:9,background:'#714B67',color:'#fff',padding:'2px 6px',borderRadius:4,marginLeft:4}}>PRIORITAIRE</span></div>
                <div style={{fontSize:11,color:'var(--t2)'}}>App installée sur votre poste</div>
              </div>
            </div>
            <div style={{fontSize:11,color:'var(--t2)',lineHeight:1.6,marginBottom:10}}>Tente d'ouvrir Odoo via l'app native (PWA, desktop ou mobile via <code>odoo://</code>). Bascule auto sur la version web si non détectée.</div>
            <button className="btn b-primary" style={{width:'100%',background:'#714B67'}} onClick={e=>{e.stopPropagation();openApp();}}>🖥 Ouvrir l'app Odoo</button>
          </div>
          {/* CRM native */}
          <div style={{background:'var(--signal-tint)',border:'1.5px solid var(--signal)',borderRadius:12,padding:16,cursor:'pointer'}} onClick={()=>window.AE_NAV?.('crm')}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
              <div style={{width:44,height:44,background:'var(--signal)',borderRadius:10,display:'flex',alignItems:'center',justifyContent:'center',fontSize:22}}>🔗</div>
              <div>
                <div style={{fontSize:14,fontWeight:700}}>Odoo Hub — vue native</div>
                <div style={{fontSize:11,color:'var(--t2)'}}>Recommandé · dans le SaaS</div>
              </div>
            </div>
            <div style={{fontSize:11,color:'var(--t2)',lineHeight:1.6,marginBottom:10}}>Données Odoo affichées nativement via XML-RPC : devis, contacts, factures, projets, RH… Aucun blocage, intégré au design Discovery.</div>
            <button className="btn b-primary" style={{width:'100%'}} onClick={e=>{e.stopPropagation();window.AE_NAV?.('crm');}}>→ Ouvrir CRM natif</button>
          </div>
          {/* Fullscreen */}
          <div style={{background:'#714B6708',border:'1.5px solid #714B67',borderRadius:12,padding:16}}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
              <div style={{width:44,height:44,background:'#714B67',borderRadius:10,display:'flex',alignItems:'center',justifyContent:'center',fontSize:22,color:'#fff'}}>🟣</div>
              <div>
                <div style={{fontSize:14,fontWeight:700}}>Odoo plein écran</div>
                <div style={{fontSize:11,color:'var(--t2)'}}>Nouvel onglet</div>
              </div>
            </div>
            <div style={{fontSize:11,color:'var(--t2)',lineHeight:1.6,marginBottom:10}}>Pour les actions complexes nécessitant l'UI Odoo complète. Odoo bloque l'embarquement en iframe (X-Frame-Options).</div>
            <button className="btn b-ghost" style={{width:'100%',borderColor:'#714B67',color:'#714B67'}}
              onClick={()=>window.open('https://discovery1.odoo.com/web','_blank')}>↗ Ouvrir Odoo plein écran</button>
          </div>
        </div>

        {/* Connexion info */}
        <div style={{background:'#714B6708',border:'1.5px solid #714B6733',borderRadius:12,padding:'14px 18px'}}>
          <div style={{fontSize:12,fontWeight:700,color:'#714B67',marginBottom:10}}>🟣 Connexion XML-RPC</div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:12}}>
            {[['Instance','discovery1.odoo.com'],['Base','discovery1'],['Utilisateur','discovery@auditsenergies.com']].map(([k,v])=>(
              <div key={k} style={{background:'var(--bg3)',borderRadius:9,padding:'9px 11px',border:'1px solid var(--border)'}}>
                <div style={{fontSize:9,color:'var(--t2)',textTransform:'uppercase',marginBottom:2}}>{k}</div>
                <div style={{fontSize:11.5,fontWeight:600}}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
            <button className="btn b-primary" onClick={()=>{
              window.AE_API?.fetch('/api/odoo/status').then(d=>{
                setStatus(d?.connected ? `✅ Connecté UID ${d.uid}` : `❌ ${d?.error||'Échec'}`);
              });
            }}>🔌 Tester la connexion</button>
            {[['partners','👥 Sync Contacts'],['leads','📊 Sync Opportunités'],['quotes','📄 Sync Devis']].map(([k,l])=>(
              <button key={k} className="btn b-ghost" onClick={()=>{ setSyncMode('incremental'); runSync(); }}>{l}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════════
   INTEG PAGE
══════════════════════════════════════════════════════════════════════════════ */

const INTEGRATIONS = {
  crm: {
    title:'🏢 CRM & ERP',
    items: [
      { logo:'O', bg:'#714B67', name:'Odoo', sub:'XML-RPC · discovery1.odoo.com', status:'connected', action:'Voir', onAction: ()=>window.AE_NAV?.('odoo') },
      { logo:'S', bg:'#0052CC', name:'Salesforce', sub:'OAuth2 · REST', status:'soon' },
      { logo:'H', bg:'#FF5A1F', name:'HubSpot', sub:'API Key · Webhooks', status:'soon' },
      { logo:'Z', bg:'#C8202F', name:'Zoho CRM', sub:'OAuth2', status:'soon' },
      { logo:'P', bg:'#1A1A1A', name:'Pipedrive', sub:'API Token', status:'soon' },
      { logo:'M', bg:'#00ACC1', name:'Microsoft Dynamics', sub:'Azure AD', status:'soon' },
      { logo:'D', bg:'linear-gradient(135deg,#00b373,#0065bd)', name:'CRM AE (intégré)', sub:'Inclus dans l\'abonnement', status:'included' },
    ]
  },
  gov: {
    title:'🇫🇷 APIs gouvernementales — CEE & données publiques',
    items: [
      { logo:'RF', bg:'#000091', name:'API Entreprise (gouv.fr)', sub:'SIRET, KBIS, attestations fiscales/sociales', status:'connected' },
      { logo:'SR', bg:'#000091', name:'Sirene INSEE', sub:'Base entreprises FR · gratuit', status:'connected' },
      { logo:'AD', bg:'#0078D4', name:'API Adresse (BAN)', sub:'Géocodage adresse · cadastre', status:'connected' },
      { logo:'CE', bg:'#00A95C', name:'Fiches CEE — ecologie.gouv.fr', sub:'FROST réglementaires officielles', status:'soon' },
      { logo:'EM', bg:'#9C27B0', name:'EMMY (PNCEE)', sub:'Dépôt dossiers CEE auprès du PNCEE', status:'soon' },
      { logo:'CD', bg:'#FF6F00', name:'Cadastre · IGN', sub:'Parcelles · références cadastrales', status:'connected' },
    ]
  },
  email: {
    title:'📧 Email & Communication',
    items: [
      { logo:'G', bg:'#EA4335', name:'Gmail / Google Workspace', sub:'OAuth2', status:'soon' },
      { logo:'M', bg:'#0078D4', name:'Microsoft 365', sub:'Outlook · Teams · Calendar', status:'soon' },
      { logo:'S', bg:'#4A154B', name:'Slack', sub:'Notifications projets/agents', status:'soon' },
      { logo:'SM', bg:'#3B5998', name:'SMTP générique', sub:'Tout serveur mail', status:'imap', action:'Configurer', onAction:()=>window.AE_NAV?.('comm') },
    ]
  },
  storage: {
    title:'📁 Stockage & Documents',
    items: [
      { logo:'GD', bg:'#0F9D58', name:'Google Drive', sub:'OAuth2', status:'soon' },
      { logo:'D', bg:'#0061FF', name:'Dropbox', sub:'Archivage rapports CEE', status:'soon' },
      { logo:'OD', bg:'#0078D4', name:'OneDrive / SharePoint', sub:'Microsoft 365', status:'soon' },
      { logo:'S3', bg:'#FF9900', name:'AWS S3 / OVH Object Storage', sub:'S3-compatible', status:'soon' },
      { logo:'L', bg:'#22c55e', name:'Local (par défaut)', sub:'Stockage serveur · uploads/', status:'connected' },
    ]
  },
};

const STATUS_BADGE = {
  connected: { label:'✅ Connecté',  bg:'var(--signal-tint)',  color:'var(--signal)' },
  included:  { label:'Inclus',       bg:'var(--plasma-tint)',  color:'var(--plasma)' },
  soon:      { label:'Bientôt',      bg:'var(--copper-tint)',  color:'var(--copper)' },
  imap:      { label:'IMAP actif',   bg:'var(--signal-tint)',  color:'var(--signal)' },
};

function IntegRow({ item }) {
  const badge = STATUS_BADGE[item.status] || STATUS_BADGE.soon;
  return (
    <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderBottom:'1px solid var(--border)'}}>
      <div style={{width:30,height:30,background:item.bg,borderRadius:7,display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:800,color:'#fff',flexShrink:0}}>
        {item.logo}
      </div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:12,fontWeight:600}}>{item.name}</div>
        <div style={{fontSize:10,color:'var(--t2)'}}>{item.sub}</div>
      </div>
      {item.action && item.onAction ? (
        <button className="btn b-ghost" style={{fontSize:10,padding:'3px 9px'}} onClick={item.onAction}>{item.action}</button>
      ) : (
        <span style={{fontSize:10,fontWeight:700,color:badge.color,background:badge.bg,padding:'2px 8px',borderRadius:10,whiteSpace:'nowrap'}}>
          {badge.label}
        </span>
      )}
    </div>
  );
}

function IntegPage() {
  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}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>🔌 <span style={{color:'var(--signal)'}}>Intégrations</span></div>
            <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Connectez Audits Énergies à votre stack — CRM, ERP, APIs gouvernementales, Email, Stockage</div>
          </div>
          <button className="btn b-primary" onClick={()=>window.AE_NAV?.('webhooks')}>+ Nouvelle connexion webhook</button>
        </div>
      </div>

      <div style={{padding:'16px 24px',display:'flex',flexDirection:'column',gap:14}}>
        {Object.entries(INTEGRATIONS).map(([key, section]) => (
          <div key={key} 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}}>
              {section.title}
            </div>
            <div style={{padding:'6px 16px 12px'}}>
              {section.items.map((item,i) => <IntegRow key={i} item={item} />)}
            </div>
          </div>
        ))}

        {/* Webhook universel */}
        <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}}>⚡ Webhook universel — Intégrer n'importe quoi</div>
          <div style={{padding:'14px 16px'}}>
            <div style={{fontSize:11,color:'var(--t2)',marginBottom:12,lineHeight:1.6}}>
              N'importe quel outil supportant les webhooks ou une API REST peut être connecté. Idéal pour Zapier, Make, n8n, IFTTT ou tout système maison.
            </div>
            <button className="btn b-primary" onClick={()=>window.AE_NAV?.('webhooks')}>→ Gérer les webhooks</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════════
   STORAGE PAGE
══════════════════════════════════════════════════════════════════════════════ */

const FILE_ICONS = {
  'pdf':  { icon:'📄', bg:'#ef444418', color:'#ef4444' },
  'xlsx': { icon:'📊', bg:'#22c55e18', color:'#16a34a' },
  'docx': { icon:'📝', bg:'#3b5bdb18', color:'#3b5bdb' },
  'jpg':  { icon:'🖼️', bg:'#f59e0b18', color:'#b45309' },
  'png':  { icon:'🖼️', bg:'#f59e0b18', color:'#b45309' },
  'mp4':  { icon:'🎬', bg:'#7c3aed18', color:'#7c3aed' },
  'mp3':  { icon:'🎵', bg:'#ec489918', color:'#ec4899' },
  'default': { icon:'📎', bg:'#6b728018', color:'#6b7280' },
};

function fileIcon(name) {
  const ext = (name||'').split('.').pop().toLowerCase();
  return FILE_ICONS[ext] || FILE_ICONS.default;
}

function StoragePage() {
  const [tab, setTab]          = useState('files');
  const [files, setFiles]      = useState([]);
  const [loading, setLoading]  = useState(true);
  const [filter, setFilter]    = useState('all');
  const [search, setSearch]    = useState('');
  const [uploading, setUploading] = useState(false);
  const [uploadMsg, setUploadMsg] = useState('');
  const [status, setStatus]    = useState({ gdrive:false, dropbox:false, local:true });
  const fileInput = useRef(null);

  const loadFiles = useCallback(async () => {
    setLoading(true);
    try {
      const data = await window.AE_API.fetch('/api/storage/files');
      setFiles(data?.files || []);
    } catch { setFiles([]); }
    finally { setLoading(false); }
  }, []);

  const loadStatus = useCallback(async () => {
    try {
      const data = await window.AE_API.fetch('/api/storage/status');
      setStatus(s => ({...s, ...data}));
    } catch {}
  }, []);

  useEffect(() => { loadFiles(); loadStatus(); }, []);

  const displayed = files.filter(f => {
    if (filter !== 'all' && f.source !== filter) return false;
    if (search && !(f.name||'').toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const handleDrop = async (e) => {
    e.preventDefault();
    const file = e.dataTransfer?.files?.[0] || e.target?.files?.[0];
    if (!file) return;
    setUploading(true); setUploadMsg('⏳ Téléversement en cours…');
    try {
      const fd = new FormData();
      fd.append('file', file);
      const resp = await fetch('/api/storage/upload', { method:'POST', body: fd });
      const data = await resp.json();
      if (data?.ok) {
        setUploadMsg('✅ Fichier uploadé avec succès');
        loadFiles();
      } else {
        setUploadMsg(`❌ ${data?.error || 'Erreur upload'}`);
      }
    } catch(err) {
      setUploadMsg(`❌ ${err.message}`);
    }
    setUploading(false);
    setTimeout(()=>setUploadMsg(''), 4000);
  };

  const connectOAuth = async (provider) => {
    const data = await window.AE_API.fetch(`/api/storage/oauth/${provider}`);
    if (data?.url) window.open(data.url, '_blank');
    else alert(`OAuth2 non configuré côté serveur pour ${provider}`);
  };

  const TABS = [{ id:'files', label:'📁 Fichiers' }, { id:'config', label:'⚙️ Configuration' }];

  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={{marginBottom:12}}>
          <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>💾 Documents <span style={{color:'var(--signal)'}}>& Stockage</span></div>
          <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Google Drive · Dropbox · Stockage local · Upload CEE</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 === 'files' && (
        <div style={{flex:1,overflow:'auto',padding:'16px 24px'}}>
          {/* Filtres */}
          <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:12,alignItems:'center'}}>
            {[['all','Tout'],['local','💻 Local'],['gdrive','📄 Google Drive'],['dropbox','📦 Dropbox']].map(([v,l]) => (
              <button key={v} className={`btn ${filter===v?'b-primary':'b-ghost'}`}
                style={{fontSize:11,padding:'4px 12px',borderRadius:20}}
                onClick={()=>setFilter(v)}>{l}</button>
            ))}
            <input className="fi" style={{marginLeft:'auto',maxWidth:220,fontSize:12}}
              placeholder="🔍 Rechercher un fichier…"
              value={search} onChange={e=>setSearch(e.target.value)} />
          </div>

          {/* Grille fichiers */}
          {loading ? (
            <div style={{textAlign:'center',padding:32,color:'var(--t2)'}}>⏳ Chargement…</div>
          ) : displayed.length === 0 ? (
            <div style={{textAlign:'center',padding:48,color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',marginBottom:16}}>
              <div style={{fontSize:32,marginBottom:12}}>📂</div>
              <div style={{fontWeight:700,marginBottom:6}}>Aucun fichier</div>
              <div style={{fontSize:12}}>Uploadez un fichier ci-dessous ou connectez un stockage cloud.</div>
            </div>
          ) : (
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:12,marginBottom:20}}>
              {displayed.map((f,i) => {
                const ic = fileIcon(f.name);
                return (
                  <div key={i} style={{background:'var(--bg2)',border:'1px solid var(--border)',borderRadius:10,padding:12,cursor:'pointer',transition:'border-color .15s'}}
                    onMouseEnter={e=>e.currentTarget.style.borderColor='var(--signal)'}
                    onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border)'}>
                    <div style={{width:40,height:40,background:ic.bg,borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',fontSize:22,marginBottom:8}}>{ic.icon}</div>
                    <div style={{fontSize:11,fontWeight:600,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{f.name}</div>
                    <div style={{fontSize:10,color:'var(--t2)',marginTop:4}}>
                      {f.size && `${(f.size/1024).toFixed(0)} Ko`} {f.source && `· ${f.source}`}
                    </div>
                    {f.url && (
                      <a href={f.url} download style={{display:'block',marginTop:8,fontSize:10,color:'var(--signal)',textDecoration:'none'}}>↓ Télécharger</a>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {/* Drop zone */}
          <div
            style={{border:'2px dashed var(--border)',borderRadius:12,padding:28,textAlign:'center',color:'var(--t2)',cursor:'pointer',transition:'border-color .2s'}}
            onDragOver={e=>{e.preventDefault();e.currentTarget.style.borderColor='var(--signal)'}}
            onDragLeave={e=>e.currentTarget.style.borderColor='var(--border)'}
            onDrop={handleDrop}
            onClick={()=>fileInput.current?.click()}>
            <input ref={fileInput} type="file" style={{display:'none'}} onChange={handleDrop} />
            <div style={{fontSize:30,marginBottom:8}}>📤</div>
            <div style={{fontSize:13,fontWeight:600,marginBottom:4}}>Glisser un fichier ou cliquer</div>
            <div style={{fontSize:11}}>PDF, XLSX, DOCX, images…</div>
          </div>
          {uploadMsg && <div style={{marginTop:8,fontSize:12,color:'var(--t2)'}}>{uploadMsg}</div>}
        </div>
      )}

      {tab === 'config' && (
        <div style={{flex:1,overflow:'auto',padding:'16px 24px'}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:16}}>
            {[
              {
                name:'Local', icon:'💻', bg:'#22c55e22',
                desc:'Stockage sur le serveur dans le dossier uploads/. Actif par défaut, aucune config requise.',
                status: status.local, action:'Ouverture directe', onAction:()=>window.AE_NAV?.('storage'),
              },
              {
                name:'Google Drive', icon:'📄', bg:'#4285F422',
                desc:'Connectez votre Google Drive pour accéder aux fichiers CEE, devis et audits stockés dans le cloud.',
                status: status.gdrive, action:'Connecter Drive', onAction:()=>connectOAuth('gdrive'),
              },
              {
                name:'Dropbox', icon:'📦', bg:'#0061FF22',
                desc:'Synchronisez automatiquement les rapports PDF CEE générés vers votre espace Dropbox.',
                status: status.dropbox, action:'Connecter Dropbox', onAction:()=>connectOAuth('dropbox'),
              },
              {
                name:'AWS S3 / OVH', icon:'☁️', bg:'#FF990022',
                desc:'Stockage S3-compatible pour les environnements de production avec volume élevé de fichiers.',
                status: false, action:'Configurer', onAction:()=>alert('Configuration S3 : ajoutez AWS_S3_BUCKET, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY dans .env'),
              },
            ].map(p => (
              <div key={p.name} style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',padding:20}}>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
                  <div style={{width:36,height:36,background:p.bg,borderRadius:10,display:'flex',alignItems:'center',justifyContent:'center',fontSize:20}}>{p.icon}</div>
                  <div>
                    <div style={{fontWeight:700,fontSize:14}}>{p.name}</div>
                    <div style={{fontSize:11,color:p.status?'var(--signal)':'var(--t2)',fontWeight:p.status?600:400}}>
                      {p.status ? '✅ Connecté' : '❌ Non connecté'}
                    </div>
                  </div>
                </div>
                <div style={{fontSize:12,color:'var(--t2)',marginBottom:14,lineHeight:1.6}}>{p.desc}</div>
                <button className={`btn ${p.status?'b-ghost':'b-primary'}`} style={{fontSize:12,width:'100%'}} onClick={p.onAction}>
                  {p.action}
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════════
   EQUIPE PAGE
══════════════════════════════════════════════════════════════════════════════ */

function EquipePage() {
  const [members, setMembers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showAdd, setShowAdd] = useState(false);
  const [form, setForm]       = useState({ name:'', email:'', role:'technician', phone:'' });
  const [saving, setSaving]   = useState(false);

  const ROLES = [
    { id:'admin',      label:'Admin',       color:'var(--rouge)' },
    { id:'manager',    label:'Manager',     color:'var(--plasma)' },
    { id:'technician', label:'Technicien',  color:'var(--signal)' },
    { id:'commercial', label:'Commercial',  color:'var(--copper)' },
    { id:'viewer',     label:'Lecteur',     color:'var(--t2)' },
  ];

  const roleLabel = (id) => ROLES.find(r=>r.id===id)?.label || id;
  const roleColor = (id) => ROLES.find(r=>r.id===id)?.color || 'var(--t2)';

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const data = await window.AE_API.fetch('/api/org/members');
      setMembers(data?.members || data || []);
    } catch { setMembers([]); }
    finally { setLoading(false); }
  }, []);

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

  const handleSave = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSaving(true);
    try {
      await window.AE_API.postJson('/api/org/members', form);
      setForm({ name:'', email:'', role:'technician', phone:'' });
      setShowAdd(false);
      load();
    } catch {}
    setSaving(false);
  };

  const handleDelete = async (id) => {
    if (!confirm('Retirer ce membre ?')) return;
    await window.AE_API.fetch(`/api/org/members/${id}`, { method:'DELETE' });
    setMembers(prev=>prev.filter(m=>m.id!==id));
  };

  const initials = (name) => (name||'?').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  const avatarBg = (name) => { const h = [...(name||'')].reduce((a,c)=>a+c.charCodeAt(0),0); const colors=['#3b5bdb','#00b373','#f59e0b','#ef4444','#7c3aed','#ec4899']; return colors[h%colors.length]; };

  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)'}}>Équipe</span></div>
          <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>Collaborateurs · Rôles · Accès</div>
        </div>
        <button className="btn b-primary" onClick={()=>setShowAdd(v=>!v)}>
          {showAdd ? '✕ Annuler' : '+ Inviter un membre'}
        </button>
      </div>

      <div style={{flex:1,overflow:'auto',padding:'16px 24px'}}>
        {showAdd && (
          <form onSubmit={handleSave} style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',padding:16,marginBottom:16}}>
            <div style={{fontSize:13,fontWeight:700,marginBottom:12}}>Inviter un collaborateur</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginBottom:12}}>
              <div>
                <label className="lbl">Nom complet *</label>
                <input className="fi" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="Prénom Nom" required />
              </div>
              <div>
                <label className="lbl">Email *</label>
                <input className="fi" type="email" value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))} placeholder="email@example.com" required />
              </div>
              <div>
                <label className="lbl">Téléphone</label>
                <input className="fi" value={form.phone} onChange={e=>setForm(f=>({...f,phone:e.target.value}))} placeholder="+33 6 …" />
              </div>
            </div>
            <div style={{marginBottom:12}}>
              <label className="lbl">Rôle</label>
              <div style={{display:'flex',gap:8,marginTop:6,flexWrap:'wrap'}}>
                {ROLES.map(r => (
                  <label key={r.id} style={{
                    display:'flex',alignItems:'center',gap:5,fontSize:11,cursor:'pointer',padding:'5px 12px',
                    borderRadius:8,border:`1px solid ${form.role===r.id?r.color:'var(--border)'}`,
                    background:form.role===r.id?`${r.color}14`:'var(--bg3)',fontWeight:form.role===r.id?700:400,
                  }}>
                    <input type="radio" name="role" value={r.id} checked={form.role===r.id} onChange={()=>setForm(f=>({...f,role:r.id}))} style={{margin:0}} />
                    {r.label}
                  </label>
                ))}
              </div>
            </div>
            <div style={{display:'flex',justifyContent:'flex-end',gap:8}}>
              <button type="button" className="btn b-ghost" onClick={()=>setShowAdd(false)}>Annuler</button>
              <button type="submit" className="btn b-primary" disabled={saving}>{saving?'⏳ Envoi…':'✉️ Inviter'}</button>
            </div>
          </form>
        )}

        {loading ? (
          <div style={{textAlign:'center',padding:32,color:'var(--t2)'}}>⏳ Chargement…</div>
        ) : members.length === 0 ? (
          <div style={{textAlign:'center',padding:48,color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)'}}>
            <div style={{fontSize:32,marginBottom:12}}>👥</div>
            <div style={{fontWeight:700,marginBottom:6}}>Aucun collaborateur</div>
            <div style={{fontSize:12}}>Invitez des membres pour collaborer sur les dossiers CEE.</div>
          </div>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:8}}>
            {members.map((m, i) => (
              <div key={m.id||i} style={{background:'var(--bg2)',borderRadius:10,border:'1px solid var(--border)',padding:'12px 16px',display:'flex',alignItems:'center',gap:12}}>
                <div style={{width:40,height:40,background:avatarBg(m.name),borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:14,color:'#fff',flexShrink:0}}>
                  {initials(m.name)}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontWeight:700,fontSize:13}}>{m.name}</div>
                  <div style={{fontSize:11,color:'var(--t2)',marginTop:2}}>{m.email} {m.phone && `· ${m.phone}`}</div>
                </div>
                <div style={{display:'flex',alignItems:'center',gap:10,flexShrink:0}}>
                  <span style={{fontSize:11,fontWeight:700,color:roleColor(m.role),background:`${roleColor(m.role)}18`,padding:'3px 10px',borderRadius:10}}>
                    {roleLabel(m.role)}
                  </span>
                  {m.isActive !== false && (
                    <span style={{fontSize:9,color:'var(--signal)',background:'var(--signal-tint)',padding:'2px 6px',borderRadius:8}}>Actif</span>
                  )}
                  <button className="btn b-ghost" style={{fontSize:11,color:'var(--rouge)',padding:'4px 8px'}}
                    onClick={()=>handleDelete(m.id)}>🗑️</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { OdooPage, IntegPage, StoragePage, EquipePage });