const { useState } = React;

function AdminOverview({ pending }) {
  return (
    <div className="page">
      <div className="page-h"><div><h1>Vue d'ensemble</h1><p>Nordis Conseil · 30 derniers jours</p></div><div className="live"><i />Interception active</div></div>
      <div className="stats">{VOLUMES.map(v => <Stat key={v.k} {...v} v={v.k === "En attente" ? pending : v.v} />)}</div>
      <div className="cols">
        <Card title="Volume analysé" sub="Analysés par jour, dont corrigés automatiquement" right={<div className="lgd"><span><i className="sw-a" />Analysés</span><span><i className="sw-c" />Corrigés</span></div>}><Bars /></Card>
        <Card title="Coût d'utilisation de l'IA" sub="Mois en cours">
          <div className="cost-tot"><b>297,70 €</b><span>sur un plafond de 600 €</span></div>
          <div className="meter"><i style={{ width: "49.6%" }} /></div>
          <div className="cost-list">{COSTS.map(c => (
            <div className="cost-row" key={c.model}>
              <div><b>{c.model}</b><em>{c.use}</em></div>
              <div className="cost-n"><span>{c.tok} jetons</span><b>{c.eur.toFixed(2).replace(".", ",")} €</b></div>
            </div>
          ))}</div>
          <p className="foot">Coût moyen par e-mail analysé : <b>0,024 €</b></p>
        </Card>
      </div>
      <Card title="Journal des décisions" sub="Revues effectuées par les consultants">
        <table className="tbl">
          <thead><tr><th>E-mail</th><th>Expéditeur</th><th>Niveau</th><th>Décision</th><th>Consultant</th></tr></thead>
          <tbody>
            {QUEUE.filter(m => m.status !== "attente").concat(QUEUE.filter(m => m.status === "attente").slice(0, 3)).map(m => (
              <tr key={m.id}><td><b>{m.subject}</b><em>{m.id}</em></td><td>{m.from.name}</td><td><RiskTag level={m.risk} small /></td>
                <td>{m.status === "valide" ? <Pill tone="ok">Validé</Pill> : m.status === "refuse" ? <Pill tone="no">Refusé</Pill> : <Pill tone="mid">En attente</Pill>}</td>
                <td>{m.decidedBy || "—"}</td></tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

function AdminMail() {
  const [boxes, setBoxes] = useState(MAILBOXES);
  const [form, setForm] = useState(false);
  const fix = id => setBoxes(b => b.map(x => x.id === id ? { ...x, state: "connecté", detail: "OAuth · 58 boîtes synchronisées", hook: "Filtrage SMTP sortant actif", sync: "à l'instant" } : x));
  return (
    <div className="page">
      <div className="page-h"><div><h1>Messagerie</h1><p>Cyclope s'intercale entre la messagerie de l'entreprise et le destinataire final.</p></div><Btn kind="primary" icon="plug" onClick={() => setForm(!form)}>Ajouter un service</Btn></div>

      {form ? <Card title="Nouvelle connexion" sub="Les identifiants sont chiffrés côté serveur et jamais exposés aux consultants.">
        <div className="grid2">
          <Field label="Service"><select><option>Google Workspace</option><option>Microsoft 365</option><option>SMTP / IMAP générique</option></select></Field>
          <Field label="Domaine"><input placeholder="exemple.fr" /></Field>
          <Field label="Identifiant client (client ID)" mono><input placeholder="1042…apps.googleusercontent.com" /></Field>
          <Field label="Secret client" mono hint="Stocké chiffré (AES-256)."><input type="password" placeholder="••••••••••••" /></Field>
          <Field label="Compte de délégation" hint="Permet la lecture du flux sortant."><input placeholder="cyclope@exemple.fr" /></Field>
          <Field label="Mode d'interception"><select><option>Mail hook sortant (recommandé)</option><option>Filtrage SMTP relais</option></select></Field>
        </div>
        <div className="row-end"><Btn onClick={() => setForm(false)}>Annuler</Btn><Btn kind="primary" icon="check" onClick={() => setForm(false)}>Tester et connecter</Btn></div>
      </Card> : null}

      <div className="conns">{boxes.map(b => (
        <Card key={b.id} title={b.name} sub={b.domain} right={b.state === "connecté" ? <Pill tone="ok">Connecté</Pill> : <Pill tone="no">Erreur</Pill>}>
          <dl className="kv">
            <div><dt>Authentification</dt><dd>{b.detail}</dd></div>
            <div><dt>Interception</dt><dd className={b.state === "connecté" ? "" : "warn"}>{b.hook}</dd></div>
            <div><dt>Dernière synchronisation</dt><dd>{b.sync}</dd></div>
          </dl>
          <div className="row-end">{b.state === "connecté" ? <Btn size="s">Reconfigurer</Btn> : <Btn size="s" kind="primary" icon="plug" onClick={() => fix(b.id)}>Renouveler le jeton</Btn>}</div>
        </Card>
      ))}</div>

      <Card title="Comportement du filtrage" sub="Ce que Cyclope fait des e-mails analysés">
        <div className="rules">
          <div className="rule"><div><b>Aucun risque détecté</b><p>Correction rédactionnelle appliquée puis envoi immédiat, sans intervention.</p></div><Pill tone="ok">Automatique</Pill></div>
          <div className="rule"><div><b>Risque faible ou moyen</b><p>Mise en attente dans l'espace consultant, expéditeur notifié.</p></div><Pill tone="mid">Revue</Pill></div>
          <div className="rule"><div><b>Risque critique</b><p>Mise en attente et alerte immédiate aux consultants disponibles.</p></div><Pill tone="no">Revue + alerte</Pill></div>
          <div className="rule"><div><b>Service d'IA indisponible</b><p>Envoi de l'e-mail sans analyse, consigné dans le journal.</p></div><Pill tone="n">Repli</Pill></div>
        </div>
      </Card>
    </div>
  );
}

function AdminAI() {
  const [sel, setSel] = useState({ anthropic: "Claude Sonnet 4.5", openai: "GPT-4o mini", google: "Gemini 2.5 Flash" });
  const [active, setActive] = useState("anthropic");
  const [reveal, setReveal] = useState(null);
  const [th, setTh] = useState({ crit: 75, mid: 45 });
  return (
    <div className="page">
      <div className="page-h"><div><h1>Intelligence artificielle</h1><p>Clés d'accès, modèles utilisés et seuils de mise en attente.</p></div></div>

      <div className="provs">{PROVIDERS.map(p => (
        <Card key={p.id} title={p.name} sub={p.state === "connecté" ? "Clé enregistrée" : "Aucune clé enregistrée"}
          right={<label className="radio"><input type="radio" name="prov" checked={active === p.id} onChange={() => setActive(p.id)} disabled={p.state !== "connecté"} /><span>{active === p.id ? "Fournisseur principal" : "Définir principal"}</span></label>}>
          <Field label="Clé API" mono hint={p.state === "connecté" ? "Dernière vérification : il y a 3 h · valide" : "Requise pour activer ce fournisseur."}>
            <div className="inp-row"><input type="text" value={reveal === p.id ? p.key.replace(/•+/g, "3f9a2c7d41e8") : p.key} placeholder="sk-…" readOnly={p.state === "connecté"} />{p.state === "connecté" ? <button className="ib" onClick={() => setReveal(reveal === p.id ? null : p.id)} aria-label="Afficher"><Ic d="copy" s={15} /></button> : null}</div>
          </Field>
          <Field label="Modèle"><select value={sel[p.id]} onChange={e => setSel({ ...sel, [p.id]: e.target.value })} disabled={p.state !== "connecté"}>{p.models.map(m => <option key={m}>{m}</option>)}</select></Field>
        </Card>
      ))}</div>

      <div className="cols">
        <Card title="Répartition des tâches" sub="Un modèle rapide pour la correction, un modèle raisonneur pour le risque">
          <div className="rules">
            <div className="rule"><div><b>Détection des e-mails à risque</b><p>Analyse du contenu, des engagements et du ton.</p></div><select className="sel-s" defaultValue="Claude Sonnet 4.5">{PROVIDERS.flatMap(p => p.models).map(m => <option key={m}>{m}</option>)}</select></div>
            <div className="rule"><div><b>Correction rédactionnelle</b><p>Orthographe, grammaire, syntaxe, formulation.</p></div><select className="sel-s" defaultValue="Claude Haiku 4.5">{PROVIDERS.flatMap(p => p.models).map(m => <option key={m}>{m}</option>)}</select></div>
            <div className="rule"><div><b>Modèle de repli</b><p>Utilisé si le fournisseur principal ne répond pas sous 3 s.</p></div><select className="sel-s" defaultValue="GPT-4o mini">{PROVIDERS.flatMap(p => p.models).map(m => <option key={m}>{m}</option>)}</select></div>
          </div>
        </Card>
        <Card title="Seuils de mise en attente" sub="Score de risque au-delà duquel l'e-mail est retenu">
          <div className="slider"><div className="sl-h"><span>Risque critique — alerte immédiate</span><b>{th.crit}</b></div><input type="range" min="50" max="95" value={th.crit} onChange={e => setTh({ ...th, crit: +e.target.value })} /></div>
          <div className="slider"><div className="sl-h"><span>Risque moyen — mise en attente</span><b>{th.mid}</b></div><input type="range" min="20" max="70" value={th.mid} onChange={e => setTh({ ...th, mid: +e.target.value })} /></div>
          <p className="foot">En dessous de <b>{th.mid}</b>, l'e-mail part immédiatement après correction. Sur les 30 derniers jours, ce réglage aurait retenu <b>191 e-mails</b> sur 12 480.</p>
          <div className="cats-cfg">{Object.entries(CATS).map(([k, c]) => <div className="cc" key={k}><div><b>{c.label}</b><p>{c.desc}</p></div><Toggle on={true} onChange={() => {}} label={c.label} /></div>)}</div>
        </Card>
      </div>
    </div>
  );
}

function AdminPeople() {
  const [list, setList] = useState(CONSULTANTS);
  const [invite, setInvite] = useState(false);
  return (
    <div className="page">
      <div className="page-h"><div><h1>Consultants et accès</h1><p>Les consultants revoient les e-mails retenus. Ils n'ont accès à aucun réglage technique.</p></div><Btn kind="primary" icon="users" onClick={() => setInvite(!invite)}>Inviter un consultant</Btn></div>
      {invite ? <Card title="Inviter un consultant">
        <div className="grid2">
          <Field label="Nom et prénom"><input placeholder="Prénom Nom" /></Field>
          <Field label="Adresse e-mail professionnelle"><input placeholder="prenom.nom@nordis.fr" /></Field>
          <Field label="Rôle"><select><option>Consultant</option><option>Administrateur</option></select></Field>
          <Field label="Périmètre de revue"><select><option>Tous les e-mails de l'entreprise</option><option>Une équipe en particulier</option></select></Field>
        </div>
        <div className="row-end"><Btn onClick={() => setInvite(false)}>Annuler</Btn><Btn kind="primary" icon="check" onClick={() => setInvite(false)}>Envoyer l'invitation</Btn></div>
      </Card> : null}
      <Card pad={false}>
        <table className="tbl tbl-p">
          <thead><tr><th>Consultant</th><th>Rôle</th><th>Périmètre</th><th>Activité</th><th>Accès</th></tr></thead>
          <tbody>{list.map((c, i) => (
            <tr key={c.email}>
              <td><div className="who"><span className="av">{c.name.split(" ").map(w => w[0]).join("")}</span><div><b>{c.name}</b><em>{c.email}</em></div></div></td>
              <td>{c.role === "Administratrice" || c.role === "Administrateur" ? <Pill tone="pri">{c.role}</Pill> : <Pill tone="n">{c.role}</Pill>}</td>
              <td>{c.scope}</td>
              <td className={c.last === "En ligne" ? "on-now" : ""}>{c.last}</td>
              <td><Toggle on={c.active} onChange={v => setList(l => l.map((x, j) => j === i ? { ...x, active: v } : x))} label={`Accès de ${c.name}`} /></td>
            </tr>
          ))}</tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { AdminOverview, AdminMail, AdminAI, AdminPeople });