/* admin.jsx — Utilisateurs & rôles, Paramètres du tenant */
const { useState } = React;

function UsersView() {
  const D = window.DATA;
  const [users, setUsers] = useState(D.USERS);
  const [invite, setInvite] = useState(false);
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("ops");
  const roleName = (id) => (D.ROLES.find(r => r.id===id) || {}).name || id;

  const doInvite = () => {
    if (!email.trim()) return;
    setUsers(u => [...u, { name: email.split("@")[0].replace(/\./g," ").replace(/\b\w/g, c=>c.toUpperCase()), email, role, status:"invited", last:"—" }]);
    setInvite(false); setEmail(""); setRole("ops");
  };

  return (
    <div className="page page--wide">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Utilisateurs & rôles</h1>
          <p>Gérez les accès de votre équipe et les permissions associées à chaque rôle.</p>
        </div>
        <div className="page-head__actions">
          <button className="btn btn--primary" onClick={() => setInvite(true)}><Ic name="Plus" /> Inviter un utilisateur</button>
        </div>
      </div>

      <div className="grid cols-4" style={{ marginBottom:"var(--gap)" }}>
        {D.ROLES.map(r => (
          <div key={r.id} className="card" style={{ padding:16 }}>
            <div style={{ display:"flex", alignItems:"center", gap:9, marginBottom:8 }}>
              <span className="kpi__ic" style={{ width:30, height:30 }}><Ic name="Lock" width={15} height={15}/></span>
              <span style={{ fontWeight:600, fontSize:13.5 }}>{r.name}</span>
            </div>
            <p style={{ margin:"0 0 10px", fontSize:12, color:"var(--text-2)", lineHeight:1.45, minHeight:52 }}>{r.desc}</p>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
              <span className="tag">{r.perms} permissions</span>
              <span className="mono" style={{ fontSize:12, color:"var(--text-3)" }}>{users.filter(u=>u.role===r.id).length} membre(s)</span>
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card__head"><div><h3>Membres de l'équipe</h3><p>{users.length} utilisateurs</p></div></div>
        <table className="table">
          <thead><tr><th>Utilisateur</th><th>Rôle</th><th>Statut</th><th>Dernière activité</th><th></th></tr></thead>
          <tbody>
            {users.map((u,i) => (
              <tr key={i}>
                <td>
                  <div style={{ display:"flex", alignItems:"center", gap:11 }}>
                    <div className="avatar">{u.name.split(" ").map(n=>n[0]).slice(0,2).join("")}</div>
                    <div><div style={{ fontWeight:600 }}>{u.name}</div><div className="muted" style={{ fontSize:12 }}>{u.email}</div></div>
                  </div>
                </td>
                <td><Badge tone={u.role==="admin"?"blue":u.role==="builder"?"violet":"gray"}>{roleName(u.role)}</Badge></td>
                <td><StatusBadge s={u.status} /></td>
                <td className="muted">{u.last}</td>
                <td style={{ textAlign:"right" }}><button className="btn btn--ghost btn--icon btn--sm"><Ic name="Dots" /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {invite && (
        <Modal title="Inviter un utilisateur" icon="Users" onClose={() => setInvite(false)}
          foot={<><button className="btn" onClick={() => setInvite(false)}>Annuler</button><button className="btn btn--primary" onClick={doInvite}>Envoyer l'invitation</button></>}>
          <div className="field"><label>Adresse e-mail</label><input className="input" placeholder="prenom.nom@mutuelle-horizon.fr" value={email} onChange={e=>setEmail(e.target.value)} /></div>
          <div className="field"><label>Rôle</label>
            <select className="select" value={role} onChange={e=>setRole(e.target.value)}>
              {D.ROLES.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
            </select>
            <span className="hint">{(D.ROLES.find(r=>r.id===role)||{}).desc}</span>
          </div>
        </Modal>
      )}
    </div>
  );
}

function SettingsView({ tenant, setTweak }) {
  const [tab, setTab] = useState("general");
  const tabs = [["general","Général"],["security","Sécurité & conformité"],["api","API & webhooks"],["env","Environnements"]];

  return (
    <div className="page">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Paramètres du tenant</h1>
          <p>Configuration de votre espace de confiance.</p>
        </div>
      </div>

      <div style={{ display:"flex", gap:8, marginBottom:"var(--gap)", flexWrap:"wrap", borderBottom:"1px solid var(--border)", paddingBottom:0 }}>
        {tabs.map(([id,l]) => (
          <button key={id} onClick={() => setTab(id)} style={{ border:"none", background:"none", padding:"9px 4px", marginRight:14, fontSize:13.5, fontWeight:600,
            color: tab===id?"var(--primary-strong)":"var(--text-3)", borderBottom: tab===id?"2px solid var(--primary)":"2px solid transparent", marginBottom:-1 }}>{l}</button>
        ))}
      </div>

      {tab==="general" && (
        <div className="grid" style={{ gridTemplateColumns:"1fr 1fr", maxWidth:900 }}>
          <div className="card">
            <div className="card__head"><div><h3>Identité du tenant</h3><p>Visible par vos équipes</p></div></div>
            <div className="card__body">
              <div className="field"><label>Raison sociale</label><input className="input" value={tenant.name} onChange={e => setTweak("tenantName", e.target.value)} /></div>
              <div className="field"><label>Identifiant tenant</label><input className="input mono" value="mut-horizon-prod" readOnly style={{ color:"var(--text-3)" }} /></div>
              <div className="field" style={{ marginBottom:0 }}><label>Secteur</label>
                <select className="select"><option>Mutuelle / Assurance santé</option><option>Banque</option><option>Assurance</option><option>Télécom</option></select>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card__head"><div><h3>Logo & couleur</h3><p>Réglable aussi via le panneau Tweaks</p></div></div>
            <div className="card__body">
              <div style={{ display:"flex", alignItems:"center", gap:14, marginBottom:16 }}>
                <div className="brandmark" style={{ width:56, height:56, fontSize:22, background:tenant.color }}>{tenant.initials}</div>
                <div className="field" style={{ flex:1, marginBottom:0 }}><label>Monogramme</label><input className="input" maxLength={3} value={tenant.initials} onChange={e => setTweak("tenantInitials", e.target.value.toUpperCase())} /></div>
              </div>
              <label style={{ fontSize:12.5, fontWeight:600, color:"var(--text-2)" }}>Couleur de marque</label>
              <div style={{ display:"flex", gap:9, marginTop:8 }}>
                {["#2d4d8f","#1f6f5c","#5b4b9e","#3a3f4b","#a8552c"].map(c => (
                  <button key={c} onClick={() => setTweak("tenantColor", c)} style={{ width:36, height:36, borderRadius:9, background:c, border: tenant.color===c?"2.5px solid var(--text)":"2.5px solid transparent", cursor:"pointer", boxShadow:"var(--shadow-sm)" }} />
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {tab==="security" && (
        <div className="card" style={{ maxWidth:760 }}>
          <div className="card__head"><div><h3>Sécurité & conformité</h3><p>Paramètres applicables à l'ensemble du tenant</p></div></div>
          <div style={{ padding:"4px 0" }}>
            {[
              ["Authentification forte (MFA)","Obligatoire pour tous les administrateurs", true],
              ["Connexion SSO (SAML 2.0)","Fédération avec votre annuaire d'entreprise", true],
              ["Conservation des preuves","Dossiers de preuve conservés 10 ans (SAE)", true],
              ["Hébergement des données","Données hébergées en France · certifié HDS", true],
              ["Journalisation RGPD","Traçabilité complète des accès aux données personnelles", true],
            ].map(([t,d,on],i) => (
              <div key={i} style={{ display:"flex", alignItems:"center", gap:12, padding:"13px 18px", borderBottom:"1px solid var(--border)" }}>
                <div style={{ flex:1 }}><div style={{ fontWeight:600, fontSize:13.5 }}>{t}</div><div className="muted" style={{ fontSize:12 }}>{d}</div></div>
                <Badge tone={on?"green":"gray"} dot>{on?"Activé":"Désactivé"}</Badge>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab==="api" && (
        <div className="card" style={{ maxWidth:760 }}>
          <div className="card__head"><div><h3>Clés d'API & webhooks</h3><p>Intégration de la plateforme à votre SI</p></div>
            <div style={{ flex:1 }} /><button className="btn btn--sm btn--primary"><Ic name="Plus" /> Nouvelle clé</button>
          </div>
          <table className="table">
            <thead><tr><th>Clé</th><th>Environnement</th><th>Créée</th><th></th></tr></thead>
            <tbody>
              {[["pk_live_••••4f2a","Production","12/03/2026"],["pk_test_••••9c71","Bac à sable","12/03/2026"]].map((r,i) => (
                <tr key={i}><td className="mono">{r[0]}</td><td><Badge tone={i?"gray":"green"}>{r[1]}</Badge></td><td className="muted">{r[2]}</td>
                  <td style={{textAlign:"right"}}><button className="btn btn--ghost btn--sm"><Ic name="Copy" width={14} height={14}/> Copier</button></td></tr>
              ))}
            </tbody>
          </table>
          <div className="card__foot"><Ic name="Info" width={15} height={15}/> <span className="muted" style={{ fontSize:12.5 }}>Webhook configuré : <span className="mono">https://si.mutuelle-horizon.fr/hooks/confiance</span></span></div>
        </div>
      )}

      {tab==="env" && (
        <div className="grid cols-2" style={{ maxWidth:760 }}>
          {[["Production","green","Environnement de production — opérations réelles facturées."],["Bac à sable","gray","Environnement de test — opérations simulées, non facturées."]].map(([n,t,d]) => (
            <div key={n} className="card" style={{ padding:18 }}>
              <div style={{ display:"flex", alignItems:"center", gap:9, marginBottom:8 }}><Ic name="Globe" width={18} height={18}/><span style={{ fontWeight:600 }}>{n}</span><div style={{flex:1}}/><Badge tone={t} dot>{t==="green"?"Actif":"Test"}</Badge></div>
              <p style={{ margin:0, fontSize:12.5, color:"var(--text-2)" }}>{d}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { UsersView, SettingsView });