function LoopIcon({ size = 14 }) {
  return (<svg width={size} height={size} viewBox="0 0 16 16" fill="none"><path d="M13.5 8a5.5 5.5 0 10-1.6 3.9M13.5 8V4.5M13.5 8H10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"></path></svg>);
}
function BoucleBadge({ on }) {
  return (<span className={'t-boucle' + (on ? ' on' : '')} title={on ? 'Dans la boucle de relance automatique n8n (mail + SMS)' : 'Hors boucle automatique — relances manuelles'}>
    <LoopIcon></LoopIcon>{on ? 'Auto' : 'Manuel'}
  </span>);
}
function ModelesScreen() {
  const ex = TALOS_DOSSIERS.find(d => d.id === 271748);
  const [selected, setSelected] = React.useState('r1_email');
  const t = TALOS_TEMPLATES[selected];
  return (<div className="t-modeles">
    <section className="t-rules">
      <h3>Workflow de relance <span className="t-rules-tag"><LoopIcon></LoopIcon> boucle n8n</span></h3>
      <div className="t-flow">
        <div className="t-flow-step"><b>Détection CRM</b><span>statut « À relancer » (manuel) ou auto : solde compta &gt; 0 ET délai &gt; 15 j après installation</span></div>
        <i>→</i>
        <div className="t-flow-step"><b>Relance 1</b><span>+30 j — mail avec accusé de lecture + SMS</span></div>
        <i>→</i>
        <div className="t-flow-step"><b>Dernier avis</b><span>+45 j — paiement sous 7 j sinon contentieux + pénalités</span></div>
        <i>→</i>
        <div className="t-flow-step t-flow-step--red"><b>Contentieux</b><span>+52 j — transfert juridique, sortie de boucle</span></div>
      </div>
      <div className="t-rules-grid">
        <div><b>Sortie de boucle</b><span>Paiement détecté en compta, échéancier accepté, ou passage contentieux. Exclusion manuelle possible sur chaque fiche.</span></div>
        <div><b>Chèques impayés</b><span>Statut CRM « Chèque revenu impayé » (montant + date de retour) créé depuis la ligne compta — remonte dans l'onglet Chèques impayés et redescend au CRM.</span></div>
        <div><b>Appels Aircall</b><span>Historique entrants / sortants avec résumé synchronisé sur chaque fiche client.</span></div>
      </div>
    </section>
    <section className="t-tpl">
      <h3>Modèles de relance</h3>
      <div className="t-tpl-cols">
        <div className="t-tpl-list">
          {Object.entries(TALOS_TEMPLATES).map(([k, v]) => (
            <button key={k} className={selected === k ? 'on' : ''} onClick={() => setSelected(k)}>
              <ChanIcon t={k.includes('sms') ? 'sms' : 'email'}></ChanIcon>{v.label}
            </button>))}
        </div>
        <div className="t-tpl-preview">
          <div className="t-tpl-meta">Aperçu avec le dossier #{ex.id} — {ex.prenom} {ex.nom}{t.ar && <span className="t-flag t-flag--amber">Accusé de lecture activé</span>}</div>
          <textarea readOnly value={t.body(ex)} rows={14}></textarea>
          <span className="t-tpl-hint">Variables injectées par n8n : nom, pôle, date facture, solde, référence (ID client + activité).</span>
        </div>
      </div>
    </section>
  </div>);
}
Object.assign(window, { LoopIcon, BoucleBadge, ModelesScreen });