// Genius — Onglet Configuration (multi-tenant)
// Chaque entreprise (espace de travail) configure : identité de marque, secteur,
// sources de veille, source de données (CRM), e-mail (Brevo/SES), SMS (Twilio).
// Les livrables adopteront la marque du tenant ; l'outil reste brandé Genius.

const GCFG_DEFAULT = {
  brand:   { name:'', logo:'', colors:{ primary:'#0047ff', accent:'#d80027', text:'#0a0d14', bg:'#ffffff' }, font:'Archivo' },
  company: { sector:'', description:'', audience:'', website:'', country:'France', tone:'Factuel, sans hype' },
  sources: [],
  crm:     { type:'', base_url:'', creds:{ api_key:'', token:'', secret:'', password:'' } },
  email:   { provider:'brevo', brevo_key:'', sender_name:'', sender_email:'', ses:{ region:'eu-west-1', access_key:'', secret_key:'' } },
  sms:     { provider:'twilio', twilio:{ account_sid:'', auth_token:'', from:'' } },
};
const GCFG_SECRETS = ['email.brevo_key','email.ses.secret_key','sms.twilio.auth_token','crm.creds.api_key','crm.creds.token','crm.creds.secret','crm.creds.password'];

// ---- helpers immuables ----
function gGet(o, path){ return path.split('.').reduce((a,k)=> (a==null?undefined:a[k]), o); }
function gSet(o, path, val){ const ks=path.split('.'); const root=Array.isArray(o)?o.slice():{...o}; let ref=root; for(let i=0;i<ks.length-1;i++){ const k=ks[i]; ref[k]=(ref[k]&&typeof ref[k]==='object')?(Array.isArray(ref[k])?ref[k].slice():{...ref[k]}):{}; ref=ref[k]; } ref[ks[ks.length-1]]=val; return root; }
function gMerge(base, over){ const baseObj = base && typeof base==='object' && !Array.isArray(base); if(over==null) return base; if(typeof over!=='object'||Array.isArray(over)) return baseObj ? base : over; const out={...base}; for(const k in over){ out[k]= (base && typeof base[k]==='object' && !Array.isArray(base[k]) && over[k] && typeof over[k]==='object' && !Array.isArray(over[k])) ? gMerge(base[k],over[k]) : over[k]; } return out; }
function gHex(r,g,b){ return '#'+[r,g,b].map(x=>Math.max(0,Math.min(255,x)).toString(16).padStart(2,'0')).join(''); }
function gExtractPalette(dataUrl, cb){
  try{
    const img=new Image();
    img.onload=()=>{ try{
      const w=56, h=Math.max(1,Math.round(56*img.height/img.width));
      const cv=document.createElement('canvas'); cv.width=w; cv.height=h;
      const ctx=cv.getContext('2d'); ctx.drawImage(img,0,0,w,h);
      const d=ctx.getImageData(0,0,w,h).data, map={};
      for(let i=0;i<d.length;i+=4){ if(d[i+3]<128) continue; const r=d[i],g=d[i+1],b=d[i+2],mx=Math.max(r,g,b),mn=Math.min(r,g,b);
        if(mx>238&&mn>228) continue; if(mx<22) continue; if(mx-mn<16) continue;
        const key=(r>>4)+'-'+(g>>4)+'-'+(b>>4); const m=map[key]||(map[key]={n:0,r:0,g:0,b:0}); m.n++; m.r+=r; m.g+=g; m.b+=b; }
      const arr=Object.values(map).sort((a,b)=>b.n-a.n).slice(0,2).map(o=>gHex(Math.round(o.r/o.n),Math.round(o.g/o.n),Math.round(o.b/o.n)));
      cb(arr);
    }catch(e){ cb([]); } };
    img.onerror=()=>cb([]);
    img.src=dataUrl;
  }catch(e){ cb([]); }
}

const CRM_TYPES = [
  { v:'verlaine',   l:'CRM Groupe Verlaine', native:true },
  { v:'hubspot',    l:'HubSpot' },
  { v:'salesforce', l:'Salesforce' },
  { v:'pipedrive',  l:'Pipedrive' },
  { v:'brevo',      l:'Contacts Brevo' },
  { v:'csv',        l:'Import CSV' },
  { v:'none',       l:'Aucun (marché seul)' },
];

function CfgField({ label, hint, children }){
  return <label className="fld"><span>{label}{hint && <em> · {hint}</em>}</span>{children}</label>;
}
function Secret({ label, path, cfg, set, secretsSet }){
  const saved = !!secretsSet[path];
  return <CfgField label={label} hint={saved ? 'enregistré' : null}>
    <input type="password" autoComplete="new-password" value={gGet(cfg,path)||''}
      placeholder={saved ? '•••••••••••• (laisser vide pour conserver)' : ''}
      onChange={e=>set(path, e.target.value)} />
  </CfgField>;
}

function ConfigPage(){
  const [cfg, setCfg] = React.useState(GCFG_DEFAULT);
  const [secretsSet, setSecretsSet] = React.useState({});
  const [loaded, setLoaded] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [savedAt, setSavedAt] = React.useState(null);
  const [suggesting, setSuggesting] = React.useState(false);
  const [msg, setMsg] = React.useState(null);

  const tenant = React.useMemo(() => {
    try { const u = (window.GENIUS_AUTH && GENIUS_AUTH.user && GENIUS_AUTH.user()) || {}; return String(u.email || '').split('@')[1] || 'default'; }
    catch (e) { return 'default'; }
  }, []);
  const api = (action, payload={}) => fetch(window.GENIUS_API+'?action='+action, {
    method:'POST', headers:{'Content-Type':'application/json','X-Genius-Key':window.GENIUS_FRONT_KEY},
    body: JSON.stringify({ tenant, ...payload })
  }).then(r=>r.json());

  React.useEffect(()=>{ api('config_get').then(r=>{
    if(r && r.ok){
      const raw = (r.config && typeof r.config==='object' && !Array.isArray(r.config)) ? r.config : {};
      let c = gMerge(GCFG_DEFAULT, raw);
      GCFG_SECRETS.forEach(p=>{ c = gSet(c, p, ''); });   // masques -> champs vides
      setCfg(c); setSecretsSet(r.secrets_set||{});
    }
    setLoaded(true);
  }).catch(()=>setLoaded(true)); }, []);

  const normalize = (o) => gMerge(GCFG_DEFAULT, (o && typeof o === 'object' && !Array.isArray(o)) ? o : {});
  const set = (path, val) => setCfg(c => normalize(gSet(c, path, val)));
  const save = () => { setSaving(true); setMsg(null); api('config_save', { config: cfg }).then(r=>{
    setSaving(false);
    if(r && r.ok){ setSavedAt(new Date()); setMsg({t:'ok', x:'Configuration enregistrée.'});
      GCFG_SECRETS.forEach(p=>{ if((gGet(cfg,p)||'')!=='') setSecretsSet(s=>({...s,[p]:true})); });
    } else setMsg({t:'err', x:(r&&r.error)||'Échec de l’enregistrement.'});
  }).catch(()=>{ setSaving(false); setMsg({t:'err', x:'Erreur réseau.'}); }); };

  const onLogo = e => { const f=e.target.files && e.target.files[0]; if(!f) return;
    const rd=new FileReader(); rd.onload=()=>{ const url=rd.result; set('brand.logo', url);
      gExtractPalette(url, cols=>{ if(cols[0]) set('brand.colors.primary', cols[0]); if(cols[1]) set('brand.colors.accent', cols[1]); });
    }; rd.readAsDataURL(f);
  };
  const suggest = () => { if(!cfg.company.sector){ setMsg({t:'err',x:'Renseigne d’abord le secteur d’activité.'}); return; }
    setSuggesting(true); api('suggest_sources', { sector:cfg.company.sector, description:cfg.company.description, country:cfg.company.country }).then(r=>{
      setSuggesting(false);
      if(r && r.ok && r.sources){ const have=new Set((cfg.sources||[]).map(s=>(s.url||s.name).toLowerCase()));
        const add=r.sources.filter(s=>!have.has((s.url||s.name).toLowerCase()));
        set('sources', [...(cfg.sources||[]), ...add]);
      } else setMsg({t:'err', x:'La proposition de sources a échoué.'});
    }).catch(()=>{ setSuggesting(false); setMsg({t:'err',x:'Erreur réseau.'}); });
  };

  const c = normalize(cfg); // garde-fou ultime : cfg toujours complet au rendu
  const col = (c.brand || {}).colors || {};
  const provBrevo = ((c.email || {}).provider || 'brevo') !== 'ses';

  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Espace de travail · {tenant}</div>
        <h1 className="page-h">Configuration</h1>
        <p className="page-sub">Tout ce que Genius utilise pour cette entreprise : identité de marque appliquée aux livrables, secteur analysé, sources de veille, données CRM et canaux d’envoi. Les secrets sont stockés côté serveur, jamais réaffichés.</p>
      </div>
      <div className="head-actions">
        {savedAt && <span className="cfg-saved"><Icon name="check" size={14} w={2.6} /> à jour</span>}
        <Btn icon="check" onClick={save} disabled={saving || !loaded}>{saving ? 'Enregistrement…' : 'Enregistrer'}</Btn>
      </div>
    </div>

    {msg && <div className={`cfg-msg cfg-msg-${msg.t}`}><Icon name={msg.t==='ok'?'check':'bolt'} size={15} /> {msg.x}</div>}
    {!loaded && <Card pad={22}><div className="empty-d">Chargement de la configuration…</div></Card>}

    {loaded && <div className="cfg-grid">

      {/* 1 — IDENTITÉ DE MARQUE */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Identité de marque" sub="Appliquée à tous les livrables (newsletter, LP, SMS). Genius s’efface, la marque du client habille le rendu." />
        <div className="cfg-body cfg-2c">
          <div>
            <CfgField label="Nom de la marque"><input value={cfg.brand.name} onChange={e=>set('brand.name',e.target.value)} placeholder="ex. Groupe Verlaine" /></CfgField>
            <CfgField label="Logo" hint="PNG/SVG — la palette est extraite automatiquement">
              <div className="cfg-logo">
                <label className="cfg-drop">
                  <input type="file" accept="image/*" onChange={onLogo} hidden />
                  {cfg.brand.logo ? <img src={cfg.brand.logo} alt="logo" /> : <span><Icon name="image" size={18} /> Choisir un fichier</span>}
                </label>
                {cfg.brand.logo && <button className="cfg-link" onClick={()=>set('brand.logo','')}>Retirer</button>}
              </div>
            </CfgField>
            <CfgField label="Police des livrables">
              <select value={cfg.brand.font} onChange={e=>set('brand.font',e.target.value)}>
                {['Archivo','Helvetica Neue','Inter','Poppins','Montserrat','Lato','Roboto','Georgia'].map(f=><option key={f}>{f}</option>)}
              </select>
            </CfgField>
          </div>
          <div>
            <div className="cfg-lbl">Couleurs de marque</div>
            <div className="cfg-cols">
              {[['primary','Principale'],['accent','Accent'],['text','Texte'],['bg','Fond']].map(([k,l])=>
                <div className="cfg-col" key={k}>
                  <input type="color" value={col[k]||'#000000'} onChange={e=>set('brand.colors.'+k, e.target.value)} />
                  <div><b>{l}</b><input className="cfg-hex" value={col[k]||''} onChange={e=>set('brand.colors.'+k, e.target.value)} /></div>
                </div>)}
            </div>
            <div className="cfg-preview" style={{ background:col.bg||'#fff', color:col.text||'#0a0d14' }}>
              <div className="cfg-prev-ey" style={{ color:col.accent }}>APERÇU LIVRABLE</div>
              <div className="cfg-prev-h">Votre campagne, à votre marque</div>
              <span className="cfg-prev-btn" style={{ background:col.primary||'#0047ff' }}>Bouton d’action</span>
            </div>
          </div>
        </div>
      </Card>

      {/* 2 — ENTREPRISE & SECTEUR */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Entreprise & secteur" sub="Nourrit l’analyse et les idées de campagne. Plus c’est précis, plus les propositions sont ciblées." />
        <div className="cfg-body cfg-2c">
          <div>
            <CfgField label="Secteur d’activité"><input value={cfg.company.sector} onChange={e=>set('company.sector',e.target.value)} placeholder="ex. Rénovation énergétique / photovoltaïque" /></CfgField>
            <CfgField label="Cible / clientèle"><input value={cfg.company.audience} onChange={e=>set('company.audience',e.target.value)} placeholder="ex. Propriétaires de maison individuelle" /></CfgField>
            <div className="cfg-2">
              <CfgField label="Site web"><input value={cfg.company.website} onChange={e=>set('company.website',e.target.value)} placeholder="https://…" /></CfgField>
              <CfgField label="Pays"><input value={cfg.company.country} onChange={e=>set('company.country',e.target.value)} /></CfgField>
            </div>
          </div>
          <div>
            <CfgField label="Description de l’entreprise"><textarea rows={4} value={cfg.company.description} onChange={e=>set('company.description',e.target.value)} placeholder="Activité, offres, positionnement, zone géographique…" /></CfgField>
            <CfgField label="Ton de communication"><input value={cfg.company.tone} onChange={e=>set('company.tone',e.target.value)} placeholder="ex. Factuel, sans hype" /></CfgField>
          </div>
        </div>
      </Card>

      {/* 3 — SOURCES DE VEILLE */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Sources de veille marché" sub="Là où Genius ira chercher l’info marché pour proposer des campagnes adaptées à ton secteur."
          right={<Btn kind="ghost" size="sm" icon="trend" onClick={suggest} disabled={suggesting}>{suggesting?'Analyse…':'Proposer des sources'}</Btn>} />
        <div className="cfg-body">
          {(!cfg.sources || cfg.sources.length===0) && <div className="cfg-empty">Renseigne ton secteur ci-dessus puis clique « Proposer des sources » — Genius suggère des sources fiables (officiel, données, presse, tendances, réglementaire).</div>}
          {cfg.sources && cfg.sources.map((s,i)=>
            <div className={`cfg-src${s.on===false?' off':''}`} key={i}>
              <Toggle on={s.on!==false} onChange={v=>set('sources', cfg.sources.map((x,j)=>j===i?{...x,on:v}:x))} label="Activer" />
              <div className="cfg-src-main">
                <div className="cfg-src-top"><b>{s.name||'Source'}</b> {s.type && <span className="badge soft badge-navy">{s.type}</span>}</div>
                {s.why && <div className="cfg-src-why">{s.why}</div>}
                {s.url && <a className="cfg-src-url" href={s.url} target="_blank" rel="noopener">{s.url}</a>}
              </div>
              <button className="cfg-del" onClick={()=>set('sources', cfg.sources.filter((_,j)=>j!==i))} aria-label="Supprimer"><Icon name="x" size={15} /></button>
            </div>)}
          <button className="add-bul" onClick={()=>set('sources',[...(cfg.sources||[]),{name:'',type:'Officiel',url:'',why:'',on:true}])}><Icon name="plus" size={14} /> Ajouter une source manuellement</button>
        </div>
      </Card>

      {/* 4 — SOURCE DE DONNÉES / CRM */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Source de données (CRM)" sub="D’où proviennent les contacts pour cibler les campagnes. Verlaine en natif ; les autres connecteurs arrivent." />
        <div className="cfg-body">
          <div className="cfg-crm-types">
            {CRM_TYPES.map(t=>
              <button key={t.v} className={`cfg-crm${cfg.crm.type===t.v?' on':''}`} onClick={()=>set('crm.type',t.v)}>
                <Icon name="db" size={16} /><span>{t.l}</span>
                {t.native ? <span className="badge soft badge-green">natif</span> : <span className="badge soft badge-amber">bientôt</span>}
              </button>)}
          </div>
          {cfg.crm.type && cfg.crm.type!=='verlaine' && cfg.crm.type!=='none' && <div className="cfg-2c" style={{marginTop:16}}>
            <div>
              <CfgField label="URL / domaine du compte" hint="optionnel"><input value={cfg.crm.base_url} onChange={e=>set('crm.base_url',e.target.value)} placeholder="ex. votresociete.hubspot.com" /></CfgField>
              <Secret label="Clé API / Access token" path="crm.creds.api_key" cfg={cfg} set={set} secretsSet={secretsSet} />
            </div>
            <div>
              <Secret label="Token secondaire" path="crm.creds.token" cfg={cfg} set={set} secretsSet={secretsSet} />
              <div className="cfg-note"><Icon name="lock" size={13} /> Le connecteur {(CRM_TYPES.find(x=>x.v===cfg.crm.type)||{}).l} sera activé en phase 2. Les identifiants sont stockés chiffrés dès maintenant.</div>
            </div>
          </div>}
          {cfg.crm.type==='verlaine' && <div className="cfg-note" style={{marginTop:14}}><Icon name="check" size={14} /> Connecté nativement au CRM Groupe Verlaine (lecture seule).</div>}
        </div>
      </Card>

      {/* 5 — E-MAIL */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Envoi e-mail" sub="Fournisseur d’envoi des campagnes e-mail." />
        <div className="cfg-body">
          <div className="cfg-seg">
            {[['brevo','Brevo'],['ses','Amazon SES']].map(([v,l])=>
              <button key={v} className={`cfg-segb${(cfg.email.provider||'brevo')===v?' on':''}`} onClick={()=>set('email.provider',v)}>{l}</button>)}
          </div>
          <div className="cfg-2c" style={{marginTop:16}}>
            <div>
              {provBrevo
                ? <Secret label="Clé API Brevo" path="email.brevo_key" cfg={cfg} set={set} secretsSet={secretsSet} />
                : <CfgField label="Région AWS"><input value={cfg.email.ses.region} onChange={e=>set('email.ses.region',e.target.value)} placeholder="eu-west-1" /></CfgField>}
            </div>
            <div>
              <CfgField label="Expéditeur — nom"><input value={cfg.email.sender_name} onChange={e=>set('email.sender_name',e.target.value)} placeholder="ex. Groupe Verlaine" /></CfgField>
              <CfgField label="Expéditeur — e-mail"><input value={cfg.email.sender_email} onChange={e=>set('email.sender_email',e.target.value)} placeholder="contact@…" /></CfgField>
            </div>
          </div>
          {!provBrevo && <div className="cfg-2c">
            <div><CfgField label="AWS Access Key ID"><input value={cfg.email.ses.access_key} onChange={e=>set('email.ses.access_key',e.target.value)} placeholder="AKIA…" /></CfgField></div>
            <div><Secret label="AWS Secret Access Key" path="email.ses.secret_key" cfg={cfg} set={set} secretsSet={secretsSet} /></div>
          </div>}
        </div>
      </Card>

      {/* 6 — SMS */}
      <Card pad={0} className="cfg-sec">
        <SectionHead title="Envoi SMS" sub="Canal SMS via Twilio — disponible à côté de l’e-mail dans le parcours campagne." />
        <div className="cfg-body cfg-2c">
          <div>
            <CfgField label="Twilio — Account SID"><input value={cfg.sms.twilio.account_sid} onChange={e=>set('sms.twilio.account_sid',e.target.value)} placeholder="AC…" /></CfgField>
            <Secret label="Twilio — Auth Token" path="sms.twilio.auth_token" cfg={cfg} set={set} secretsSet={secretsSet} />
          </div>
          <div>
            <CfgField label="Numéro / expéditeur" hint="numéro Twilio ou Sender ID alphanumérique"><input value={cfg.sms.twilio.from} onChange={e=>set('sms.twilio.from',e.target.value)} placeholder="+336… ou VERLAINE" /></CfgField>
            <div className="cfg-note"><Icon name="lock" size={13} /> Utilisé pour l’envoi et les rappels SMS. Stocké chiffré.</div>
          </div>
        </div>
      </Card>

      <div className="cfg-foot">
        <Btn icon="check" onClick={save} disabled={saving || !loaded}>{saving ? 'Enregistrement…' : 'Enregistrer la configuration'}</Btn>
      </div>
    </div>}
  </div>;
}
window.ConfigPage = ConfigPage;