// Genius — contenu généré, audience CRM, programmation Brevo
function NewsletterDoc({ draft, idea, slotId }) {
  return <div className="nl">
    <div className="nl-top">Groupe Verlaine · Le solaire au prix juste</div>
    <div className="nl-hero">
      <div className="nl-kicker">{idea.phase} · Occitanie</div>
      <div className="nl-h">{draft.title}</div>
    </div>
    <div className="nl-img"><image-slot id={slotId} shape="rect" placeholder={'Visuel généré — glissez une image\n' + draft.imagePrompt.slice(0, 70) + '…'}></image-slot></div>
    <div className="nl-body">
      <p className="nl-hook">{draft.hook}</p>
      <ul className="nl-ul">{draft.bullets.map((b, i) => <li key={i}><span className="nl-tick">✓</span><span>{b}</span></li>)}</ul>
      <div className="nl-cta-wrap"><span className="nl-cta">{draft.cta}</span><div className="nl-cta-note">Étude gratuite et sans engagement · Réponse sous 24 h</div></div>
      <div className="nl-sign">Vincent Verlaine<br /><span>Groupe Verlaine — 04 67 00 00 00</span></div>
    </div>
    <div className="nl-foot">Vous recevez cet e-mail en tant que client ou prospect de Groupe Verlaine.<br />Se désinscrire · Préférences</div>
  </div>;
}

function ContentStep({ idea, draft, setDraft, onNext }) {
  const [phase, setPhase] = React.useState(draft._gen ? 'done' : 'idle');
  const [tick, setTick] = React.useState(0);
  const [tab, setTab] = React.useState('mail');
  const [err, setErr] = React.useState('');
  const gsteps = ['Rédaction du corps de la newsletter', 'Génération du visuel (GPT Image)', 'Mise en page HTML responsive', 'Contrôle anti-spam et accessibilité'];
  const run = async () => {
    setPhase('gen'); setTick(0); setErr('');
    try {
      const r = await fetch((window.GENIUS_API || '') + '?action=generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Genius-Key': window.GENIUS_FRONT_KEY || '' },
        body: JSON.stringify({ with_image: true, brief: { title: draft.title, hook: draft.hook, bullets: draft.bullets, tone: draft.tone, cta: draft.cta, phase: idea.phase, imagePrompt: draft.imagePrompt } })
      });
      const j = await r.json();
      if (!j.ok) throw new Error(j.error || 'Échec de la génération');
      setDraft({ ...draft, _gen: j });
      setPhase('done');
    } catch (e) { setErr(String(e.message || e)); setPhase('idle'); }
  };
  React.useEffect(() => {
    if (phase !== 'gen' || tick >= gsteps.length) return;
    const t = setTimeout(() => setTick(tick + 1), 750);
    return () => clearTimeout(t);
  }, [phase, tick]);
  const up = (k, v) => setDraft({ ...draft, [k]: v });
  const setBullet = (i, v) => { const b = [...draft.bullets]; b[i] = v; up('bullets', b); };

  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Étape 2 — Contenu</div>
        <h1 className="page-h">Ajustez le message, Genius produit le reste</h1>
        <div className="page-sub">Le titre et les arguments sont modifiables. Le visuel et la newsletter HTML sont générés à partir de cette version.</div>
      </div>
      {phase === 'done' && <Btn iconRight="arrow" onClick={onNext}>Choisir l'audience</Btn>}
    </div>

    <div className="two-col">
      <Card className="brief">
        <div className="mini-head">Brief éditable</div>
        <label className="fld"><span>Titre de la campagne</span><textarea rows={2} value={draft.title} onChange={e => up('title', e.target.value)} /></label>
        <label className="fld"><span>Accroche</span><textarea rows={2} value={draft.hook} onChange={e => up('hook', e.target.value)} /></label>
        <div className="fld"><span>Arguments ({draft.bullets.length})</span>
          <div className="bullets">{draft.bullets.map((b, i) => <div className="bul" key={i}>
            <span className="bul-n">{i + 1}</span>
            <textarea rows={2} value={b} onChange={e => setBullet(i, e.target.value)} />
            <button className="bul-x" onClick={() => up('bullets', draft.bullets.filter((_, j) => j !== i))}><Icon name="x" size={13} /></button>
          </div>)}</div>
          <button className="add-bul" onClick={() => up('bullets', [...draft.bullets, ''])}><Icon name="plus" size={13} /> Ajouter un argument</button>
        </div>
        <div className="fld"><span>Ton</span><div className="chips">{['Urgence factuelle', 'Pédagogique', 'Chaleureux'].map(t =>
          <button key={t} className={`chip${draft.tone === t ? ' on' : ''}`} onClick={() => up('tone', t)}>{t}</button>)}</div></div>
        <label className="fld"><span>Bouton d'action</span><input value={draft.cta} onChange={e => up('cta', e.target.value)} /></label>
        <label className="fld"><span>Prompt du visuel <em>GPT Image</em></span><textarea rows={3} value={draft.imagePrompt} onChange={e => up('imagePrompt', e.target.value)} /></label>
        {err && <div style={{ color: 'var(--coral)', fontSize: 12.5, fontWeight: 700, margin: '4px 0 10px' }}>{err} — réessayez.</div>}
        <Btn full icon={phase === 'gen' ? 'refresh' : 'spark'} onClick={run} disabled={phase === 'gen'}>
          {phase === 'gen' ? 'Génération…' : phase === 'done' ? 'Régénérer' : 'Générer visuel + newsletter'}
        </Btn>
      </Card>

      <div className="output">
        {phase === 'idle' && <div className="empty">
          <div className="empty-ic"><Icon name="image" size={26} /></div>
          <div className="empty-t">Aucun rendu pour l'instant</div>
          <div className="empty-d">Lancez la génération : Genius produit un visuel promotionnel et une newsletter HTML prête à envoyer, aux couleurs de Verlaine.</div>
        </div>}
        {phase === 'gen' && <div className="empty">
          <div className="empty-ic spin"><Icon name="spark" size={26} /></div>
          <div className="empty-t">Genius travaille…</div>
          <div className="gsteps">{gsteps.map((s, i) => <div className={`gstep${i < tick ? ' done' : i === tick ? ' now' : ''}`} key={s}>
            <span className="gs-dot">{i < tick ? <Icon name="check" size={11} w={3} /> : ''}</span>{s}</div>)}</div>
        </div>}
        {phase === 'done' && <>
          <div className="tabs">
            <button className={tab === 'mail' ? 'on' : ''} onClick={() => setTab('mail')}><Icon name="mail" size={15} /> Newsletter HTML</button>
            <button className={tab === 'img' ? 'on' : ''} onClick={() => setTab('img')}><Icon name="image" size={15} /> Visuel promotionnel</button>
            <span className="tabs-meta">Poids {(draft._gen && draft._gen.weight_kb) || 48} ko · Score anti-spam 9,4/10</span>
          </div>
          {tab === 'mail' ? <div className="mail-frame"><div className="mail-scale">{draft._gen ? <div dangerouslySetInnerHTML={{ __html: draft._gen.newsletter_html }} /> : <NewsletterDoc draft={draft} idea={idea} slotId="genius-nl-visual" />}</div></div>
            : <div className="img-out">
              <div className="img-big">{draft._gen && draft._gen.image ? <img src={draft._gen.image} alt="" style={{ width: '100%', display: 'block', borderRadius: 14 }} /> : <image-slot id="genius-promo-main" shape="rounded" radius="14" placeholder="Visuel 1024×1024"></image-slot>}</div>
              <div className="img-side">
                <div className="mini-head">Prompt utilisé</div>
                <p className="img-prompt">{draft.imagePrompt}</p>
                <div className="img-vars">{['Format carré 1024', 'Bannière 1200×628', 'Story 1080×1920'].map((v, i) =>
                  <div className={`ivar${i === 0 ? ' on' : ''}`} key={v}><span /><span>{v}</span></div>)}</div>
                <Btn kind="ghost" size="sm" icon="refresh" full>Générer une variante</Btn>
              </div>
            </div>}
        </>}
      </div>
    </div>
  </div>;
}

function AudienceStep({ draft, aud, setAud, onNext }) {
  const [q, setQ] = React.useState('');
  const [resolved, setResolved] = React.useState(null);
  const [asking, setAsking] = React.useState(false);
  const [segments, setSegments] = React.useState(GENIUS_SEGMENTS);
  React.useEffect(() => {
    fetch((window.GENIUS_API || '') + '?action=crm_segments', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Genius-Key': window.GENIUS_FRONT_KEY || '' } })
      .then(r => r.json()).then(j => { if (j && j.ok && j.segments && j.segments.length) { setSegments(j.segments); const def = {}; j.segments.forEach(x => { if (x.on) def[x.id] = true; }); setAud(a => ({ ...a, segs: (a.segs && Object.keys(a.segs).length) ? a.segs : def })); } }).catch(() => {});
  }, []);
  const toggle = id => setAud({ ...aud, segs: { ...aud.segs, [id]: !aud.segs[id] } });
  const base = segments.filter(s => aud.segs[s.id]).reduce((a, s) => a + s.count, 0);
  const total = Math.round(base * 0.93) + (resolved ? resolved.count : 0);
  const ask = () => {
    if (!q.trim() || asking) return; setAsking(true);
    fetch((window.GENIUS_API || '') + '?action=crm_nl_query', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Genius-Key': window.GENIUS_FRONT_KEY || '' }, body: JSON.stringify({ query: q.trim() }) })
      .then(r => r.json()).then(j => { setAsking(false); if (j && j.ok) setResolved({ count: j.count, label: j.interpretation || q.trim() }); }).catch(() => setAsking(false));
  };

  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Étape 3 — Audience</div>
        <h1 className="page-h">Qui doit recevoir cette campagne ?</h1>
        <div className="page-sub">Genius interroge le CRM en lecture seule et propose les segments les plus alignés avec le message. Vous pouvez aussi décrire l'audience en une phrase.</div>
      </div>
      <Btn iconRight="arrow" onClick={onNext} disabled={total === 0}>Programmer l'envoi</Btn>
    </div>

    <div className="two-col two-col-b">
      <div className="aud-main">
        <Card pad={0}>
          <SectionHead title="Segments proposés par Genius" sub="Score d'alignement avec le message de la campagne" right={<Badge tone="blue"><Icon name="db" size={11} /> Lecture seule</Badge>} />
          <div className="segs">{segments.map(s => <label className={`seg${aud.segs[s.id] ? ' on' : ''}${s.warn ? ' warn' : ''}`} key={s.id}>
            <input type="checkbox" checked={!!aud.segs[s.id]} onChange={() => toggle(s.id)} />
            <span className="seg-box"><Icon name="check" size={12} w={3} /></span>
            <div className="seg-body">
              <div className="seg-top"><span className="seg-label">{s.label}</span>{s.warn && <Badge tone="coral">Déconseillé</Badge>}</div>
              <div className="seg-why">{s.why}</div>
            </div>
            <div className="seg-num"><b>{s.count.toLocaleString('fr-FR')}</b><span>contacts</span></div>
            <div className="seg-match"><Meter value={s.match} tone={s.match > 80 ? 'green' : s.match > 50 ? 'navy' : 'coral'} /><span>{s.match} % aligné</span></div>
          </label>)}</div>
        </Card>

        <Card>
          <div className="mini-head"><Icon name="spark" size={14} /> Décrire l'audience en langage naturel</div>
          <div className="nlq">
            <textarea rows={2} value={q} onChange={e => setQ(e.target.value)} placeholder="Ex. : les clients PV installés avant 2022 dans l'Hérault et le Gard qui n'ont jamais eu de devis batterie" />
            <Btn size="sm" icon="db" onClick={ask} disabled={asking}>{asking ? 'Interrogation…' : 'Interroger le CRM'}</Btn>
          </div>
          {resolved && <div className="nlq-res">
            <div className="nlq-res-top"><Badge tone="green"><Icon name="check" size={11} /> Requête résolue</Badge><span>{resolved.count} contacts ajoutés</span></div>
            <code>clients WHERE techno = 'PV' AND install_date &lt; 2022-01-01 AND dept IN (34, 30) AND devis_batterie IS NULL</code>
          </div>}
        </Card>
      </div>

      <div className="aud-side">
        <Card>
          <div className="mini-head">Audience finale</div>
          <div className="aud-total">{total.toLocaleString('fr-FR')}<span>contacts</span></div>
          <div className="aud-break">
            {segments.filter(s => aud.segs[s.id]).map(s => <div key={s.id}><span>{s.label}</span><b>{s.count.toLocaleString('fr-FR')}</b></div>)}
            {resolved && <div><span>Requête libre</span><b>{resolved.count}</b></div>}
            <div className="dedup"><span>Dédoublonnage</span><b>-7 %</b></div>
          </div>
          <div className="aud-excl">
            <div className="mini-head">Exclusions automatiques</div>
            {['Désinscrits et plaintes', 'Contactés depuis moins de 7 jours', 'Chantiers en cours'].map(e =>
              <div className="excl" key={e}><Icon name="check" size={12} w={2.6} />{e}</div>)}
          </div>
        </Card>
        <Card>
          <div className="mini-head">Impact estimé</div>
          <div className="est">{[['Ouvertures', Math.round(total * 0.44)], ['Clics', Math.round(total * 0.068)], ['RDV attendus', Math.round(total * 0.017)]].map(([l, v]) =>
            <div className="est-row" key={l}><span>{l}</span><b>{v.toLocaleString('fr-FR')}</b></div>)}</div>
          <div className="an-foot"><Icon name="chart" size={13} /> Basé sur vos 12 derniers envois comparables</div>
        </Card>
      </div>
    </div>
  </div>;
}

function SendStep({ idea, draft, total, onDone }) {
  const [date, setDate] = React.useState('2026-07-29');
  const [time, setTime] = React.useState('10:00');
  const slug = 'tarif-rachat-aout';
  const utm = `https://groupe-verlaine.fr/lp/${slug}?utm_source=brevo&utm_medium=email&utm_campaign=${slug}&utm_content=cta-principal&utm_term=pv-9kwc`;
  const [copied, setCopied] = React.useState(false);
  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Étape 4 — Envoi</div>
        <h1 className="page-h">Tout est prêt. Dernière relecture.</h1>
        <div className="page-sub">Landing page générée, tags UTM en place, audience verrouillée. L'envoi part de Brevo à l'heure choisie.</div>
      </div>
      <Btn icon="send" onClick={onDone}>Programmer dans Brevo</Btn>
    </div>

    <div className="recap">
      <Card className="rc rc-mail" pad={0}>
        <div className="rc-head"><Icon name="mail" size={15} /> Newsletter</div>
        <div className="rc-mail-frame"><div className="rc-mail-scale">{draft._gen ? <div dangerouslySetInnerHTML={{ __html: draft._gen.newsletter_html }} /> : <NewsletterDoc draft={draft} idea={idea} slotId="genius-nl-visual" />}</div></div>
        <div className="rc-foot"><span>Objet : {draft.title.slice(0, 52)}…</span><Badge tone="green">Validée</Badge></div>
      </Card>

      <div className="rc-col">
        <Card>
          <div className="rc-head"><Icon name="users" size={15} /> Audience</div>
          <div className="rc-big">{total.toLocaleString('fr-FR')} <span>contacts</span></div>
          <div className="rc-lines">
            <div><span>Segments retenus</span><b>3 + 1 requête</b></div>
            <div><span>Exclusions appliquées</span><b>412</b></div>
            <div><span>Source</span><b>CRM Verlaine (lecture seule)</b></div>
          </div>
        </Card>
        <Card>
          <div className="rc-head"><Icon name="clock" size={15} /> Date et heure</div>
          <div className="dt"><input type="date" value={date} onChange={e => setDate(e.target.value)} /><input type="time" value={time} onChange={e => setTime(e.target.value)} /></div>
          <div className="dt-hint"><Icon name="spark" size={13} /> Genius recommande <b>mercredi 10:00</b> : meilleur taux d'ouverture sur vos 12 derniers envois (+6,2 pts vs moyenne).</div>
        </Card>
      </div>

      <div className="rc-col">
        <Card pad={0}>
          <div className="rc-head" style={{ padding:'18px 20px 0' }}><Icon name="doc" size={15} /> Landing page générée</div>
          <div className="lp-frame">
            <div className="lp-bar"><span /><span /><span /><div className="lp-url">groupe-verlaine.fr/lp/{slug}</div></div>
            <div className="lp-body">
              <div className="lp-nav"><b>VERLAINE</b><span>Étude gratuite</span></div>
              <div className="lp-hero">
                <div className="lp-h">{draft.title}</div>
                <div className="lp-p">{draft.hook}</div>
                <div className="lp-form"><span className="lp-in">Code postal</span><span className="lp-in">Téléphone</span><span className="lp-btn">{draft.cta}</span></div>
              </div>
              <div className="lp-args">{draft.bullets.slice(0, 3).map((b, i) => <div key={i}><span>0{i + 1}</span>{b.slice(0, 44)}…</div>)}</div>
            </div>
          </div>
          <div className="rc-foot"><span>Formulaire relié au CRM · RGPD</span><Badge tone="green">Publiée</Badge></div>
        </Card>
        <Card>
          <div className="rc-head"><Icon name="link" size={15} /> Traçage UTM</div>
          <div className="utm">{utm}</div>
          <div className="utm-row">
            <div className="utm-tags">{[['source','brevo'],['medium','email'],['campaign',slug]].map(([k,v]) => <span key={k}><i>{k}</i>{v}</span>)}</div>
            <Btn kind="ghost" size="sm" icon={copied ? 'check' : 'copy'} onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }}>{copied ? 'Copié' : 'Copier'}</Btn>
          </div>
        </Card>
      </div>
    </div>
  </div>;
}

function DoneScreen({ total, onHome }) {
  return <div className="page done">
    <div className="done-card">
      <div className="done-ic"><Icon name="check" size={30} w={2.6} /></div>
      <h1>Campagne programmée</h1>
      <p>L'envoi partira de Brevo le <b>mercredi 29 juillet à 10:00</b> vers <b>{total.toLocaleString('fr-FR')} contacts</b>. La landing page est en ligne et le traçage UTM est actif.</p>
      <div className="done-tl">{[['Maintenant','Landing page publiée et indexée'],['Mer. 10:00','Envoi Brevo — vague unique'],['Mer. 14:00','Premiers RDV remontés au CRM'],['Ven. 09:00','Relance automatique des non-ouvreurs'],['Lun.','Rapport de performance dans le dashboard']].map(([t,d],i) =>
        <div className="tl" key={t}><span className="tl-dot" /><div><div className="tl-t">{t}</div><div className="tl-d">{d}</div></div></div>)}</div>
      <div className="done-btns"><Btn kind="ghost" icon="back" onClick={onHome}>Retour au dashboard</Btn><Btn icon="bulb" onClick={onHome}>Nouvelle campagne</Btn></div>
    </div>
  </div>;
}

Object.assign(window, { ContentStep, AudienceStep, SendStep, DoneScreen, NewsletterDoc });