// Genius — dashboard et sélection d'idée
function Dashboard({ onIdeas }) {
  const [crm, setCrm] = React.useState(null);
  React.useEffect(() => {
    fetch((window.GENIUS_API || '') + '?action=crm_signals', { method:'POST', headers:{ 'Content-Type':'application/json','X-Genius-Key': window.GENIUS_FRONT_KEY || '' } })
      .then(r => r.json()).then(j => { if (j && j.ok) setCrm(j); }).catch(()=>{});
  }, []);
  const fmt = n => (n==null? '—' : String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '));
  const crmTotal = crm && crm.tiles && crm.tiles[0] ? crm.tiles[0].value : null;
  const top = GENIUS_IDEAS[0];
  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Lundi 27 juillet · 08:42</div>
        <h1 className="page-h">Bonjour Vincent</h1>
        <div className="page-sub">Genius a analysé <b>2 431 signaux</b> de marché et <b>18 realtime feeds</b> depuis hier soir. 3 opportunités sortent du lot.</div>
      </div>
      <div className="head-actions"><Btn kind="ghost" icon="refresh" size="sm">Relancer l'analyse</Btn><Btn icon="bulb" onClick={onIdeas}>Idées de campagne</Btn></div>
    </div>

    <div className="hero-alert">
      <div className="ha-left">
        <Badge tone="coral" soft={false}>Priorité du jour</Badge>
        <div className="ha-title">{top.title}</div>
        <div className="ha-sub">{top.why}</div>
        <div className="ha-meta">
          <span><Icon name="clock" size={14} />{top.urgency}</span>
          <span><Icon name="users" size={14} />{top.reach.toLocaleString('fr-FR')} contacts ciblables</span>
          <span><Icon name="target" size={14} />{top.expected.rdv} RDV attendus</span>
        </div>
      </div>
      <div className="ha-right"><ScoreRing value={top.score} size={78} /><div className="ha-score-lbl">Score de pertinence</div><Btn size="sm" iconRight="arrow" onClick={onIdeas}>Traiter</Btn></div>
    </div>

    <div className="dash-grid">
      <div className="dash-col">
        <Card pad={0}>
          <SectionHead title="Veille marché" sub="Sources publiques et signaux d'intention, rafraîchis en continu" right={<Badge tone="green">Live</Badge>} />
          <div className="mkt-list">{GENIUS_MARKET.map(m => <div className="mkt" key={m.id}>
            <div className={`mkt-delta t-${m.tone}`}>{m.delta}</div>
            <div className="mkt-body">
              <div className="mkt-top"><Badge tone="navy">{m.tag}</Badge><span className="mkt-date">{m.date}</span></div>
              <div className="mkt-title">{m.title}</div>
              <div className="mkt-detail">{m.detail}</div>
              <div className="mkt-src"><Icon name="link" size={12} />{m.source}</div>
            </div>
          </div>)}</div>
        </Card>

        <Card pad={0}>
          <SectionHead title="Performance des campagnes" sub="Derniers envois — ouvertures, clics et RDV générés" right={<Btn kind="ghost" size="sm" iconRight="arrow">Tout voir</Btn>} />
          <table className="tbl">
            <thead><tr><th>Campagne</th><th>Envoyée</th><th>Audience</th><th>Ouverture</th><th>Clic</th><th>RDV</th></tr></thead>
            <tbody>{GENIUS_PERF.map(p => <tr key={p.id}>
              <td className="td-name">{p.name}</td>
              <td className="td-mut">{p.sent}</td>
              <td className="td-mut">{p.audience.toLocaleString('fr-FR')}</td>
              <td><div className="td-bar"><span>{p.open.toFixed(1)} %</span><Meter value={p.open} max={100} /></div></td>
              <td><div className="td-bar"><span>{p.click.toFixed(1)} %</span><Meter value={p.click} max={15} tone="coral" /></div></td>
              <td><b className={`td-rdv ${p.trend}`}>{p.rdv}</b></td>
            </tr>)}</tbody>
          </table>
        </Card>
      </div>

      <div className="dash-col">
        <Card pad={0}>
          <SectionHead title="Signaux CRM" sub={"Lecture seule — " + (crmTotal!=null ? fmt(crmTotal) : "8 412") + " contacts analysés"} right={<Badge tone="blue"><Icon name="db" size={11} /> Sync 5 min</Badge>} />
          <div className="crm-list">{GENIUS_CRM.map(c => <div className="crmi" key={c.id}>
            <div className="crmi-top"><span className={`crmi-count t-${c.tone}`}>{c.count.toLocaleString('fr-FR')}</span><Badge tone={c.tone}>{c.kind}</Badge></div>
            <div className="crmi-label">{c.label}</div>
            <div className="crmi-note">{c.note}</div>
          </div>)}</div>
        </Card>
        <Card>
          <div className="mini-head">Analyse en cours</div>
          <div className="analysis">{[['Tarifs & réglementation','100'],['Intentions de recherche','100'],['Prix fournisseurs','72'],['Concurrence régionale','48']].map(([l,v]) =>
            <div className="an-row" key={l}><div className="an-l"><span>{l}</span><span className="an-v">{v} %</span></div><Meter value={+v} tone={+v === 100 ? 'green' : 'navy'} /></div>)}</div>
          <div className="an-foot"><Icon name="spark" size={13} /> Prochain cycle complet à 12:00</div>
        </Card>
      </div>
    </div>
  </div>;
}

function IdeaPicker({ onPick }) {
  const [open, setOpen] = React.useState('i1');
  return <div className="page">
    <div className="page-head">
      <div>
        <div className="page-eyebrow">Étape 1 — Idée de campagne</div>
        <h1 className="page-h">4 campagnes proposées pour cette semaine</h1>
        <div className="page-sub">Classées par score de pertinence : croisement entre signaux de marché, saisonnalité et volume ciblable dans votre CRM.</div>
      </div>
      <Btn kind="ghost" icon="refresh" size="sm">Générer d'autres idées</Btn>
    </div>
    <div className="ideas">{GENIUS_IDEAS.map(idea => {
      const isOpen = open === idea.id;
      return <div className={`idea${isOpen ? ' open' : ''}`} key={idea.id}>
        <div className="idea-main" onClick={() => setOpen(isOpen ? null : idea.id)}>
          <ScoreRing value={idea.score} />
          <div className="idea-body">
            <div className="idea-tags"><Badge tone="navy" soft={false}>{idea.phase}</Badge><Badge tone="amber">{idea.urgency}</Badge><span className="idea-reach"><Icon name="users" size={13} />{idea.reach.toLocaleString('fr-FR')} contacts</span></div>
            <div className="idea-title">{idea.title}</div>
            <div className="idea-hook">{idea.hook}</div>
          </div>
          <div className="idea-cta"><Btn size="sm" kind={isOpen ? 'primary' : 'ghost'} iconRight="arrow" onClick={e => { e.stopPropagation(); onPick(idea); }}>Sélectionner</Btn><span className="idea-exp">{isOpen ? 'Réduire' : 'Détails'}</span></div>
        </div>
        {isOpen && <div className="idea-more">
          <div className="im-col">
            <div className="im-lbl"><Icon name="spark" size={13} /> Pourquoi maintenant</div>
            <p className="im-why">{idea.why}</p>
            <div className="im-srcs">{idea.sources.map(s => <span className="src" key={s}><Icon name="link" size={11} />{s}</span>)}</div>
          </div>
          <div className="im-col im-col-2">
            <div className="im-lbl">Angles proposés</div>
            <ul className="im-bul">{idea.bullets.map((b,i) => <li key={i}>{b}</li>)}</ul>
            <div className="im-exp"><span>Ouverture estimée <b>{idea.expected.open}</b></span><span>RDV attendus <b>{idea.expected.rdv}</b></span></div>
          </div>
        </div>}
      </div>;
    })}</div>
  </div>;
}

Object.assign(window, { Dashboard, IdeaPicker });