/* SkyOps — Users & admin: users (invite, role, deactivate), roles & permissions matrix, tenants. */

const AD_SEED = [
  ["Marta Rivera", "m.rivera@iberdrola.es", "Admin", "All", "1 min ago", "active"],
  ["Tomás Aragón", "t.aragon@iberdrola.com", "Operator", "3", "23 min ago", "active"],
  ["Inês Duarte", "ines.duarte@iberdrola.com", "Analyst", "All", "1h ago", "active"],
  ["Elena Vasconcelos", "e.vasconcelos@iberdrola.es", "Manager", "All", "3h ago", "active"],
  ["Luís Ferreira", "l.ferreira@skyops.pt", "Operator", "5", "1h ago", "active"],
  ["Jordi Montaña", "j.montana@iberdrola.es", "Viewer", "2", "yesterday", "idle"],
  ["Alba Soriano", "a.soriano@skyops.pt", "Operator", "1", "—", "invited"],
  ["Helena Duarte", "h.duarte@iberdrola.es", "Viewer", "All", "3d ago", "active"],
].map(([name, email, role, sites, seen, status], i) => ({ id: "U-" + (i + 1), name, email, role, sites, seen, status }));
const adStore = {
  v: (() => { try { return JSON.parse(localStorage.getItem("skyops_users_v1") || "null") || AD_SEED; } catch { return AD_SEED; } })(),
  subs: new Set(),
  set(fn) { this.v = fn(this.v); localStorage.setItem("skyops_users_v1", JSON.stringify(this.v)); this.subs.forEach(s => s(this.v)); },
};
function useUsers() { const [v, setV] = useState(adStore.v); useEffect(() => { adStore.subs.add(setV); return () => adStore.subs.delete(setV); }, []); return v; }
const adLog = (text) => window.skyAudit && window.skyAudit("users", text);

function AdminPage() {
  const users = useUsers();
  const [tab, setTab] = useState(() => { const t = localStorage.getItem("skyops_admin_tab"); localStorage.removeItem("skyops_admin_tab"); return t || "users"; });
  const [q, setQ] = useState("");
  const [invite, setInvite] = useState(false);
  const can = window.skyCan ? window.skyCan("users.manage") : true;
  const rows = users.filter(u => !q || (u.name + u.email + u.role).toLowerCase().includes(q.toLowerCase()));
  const pgU = usePaged(rows, "users");
  const upd = (u, patch, msg) => { adStore.set(l => l.map(x => x.id === u.id ? { ...x, ...patch } : x)); window.skyToast(msg); adLog(msg); };
  return (
    <div className="page">
      <div className="page-head">
        <div className="title"><div className="kicker">System</div><h1>Users & admin</h1>
          <div className="sub">Who can see and do what in {window.skyTenant ? window.skyTenant() : "this tenant"}. Integrations and data settings live in <a href="#" onClick={e => { e.preventDefault(); localStorage.setItem("skyops_settings_sec", "integrations"); window.dispatchEvent(new CustomEvent("skyops:go", { detail: "settings" })); }}>Settings</a>.</div></div>
        <div className="actions"><button className="btn btn-primary" data-perm="users.manage" onClick={() => setInvite(true)}><Icon name="plus"/>Invite user</button></div>
      </div>
      <div className="tabs" style={{ marginBottom: 16 }}>
        {[["users", `Users · ${users.filter(u => u.status !== "deactivated").length}`], ["roles", "Roles & permissions"], ["tenants", "Tenants"], ["audit", "Audit log"]].map(([v, l]) => <button key={v} className={tab === v ? "on" : ""} onClick={() => setTab(v)}>{l}</button>)}
      </div>
      {!can && <div className="rb-banner"><Icon name="shield" size={13}/><span>You are signed in as <b>{window.skyRole()}</b>. Only Admins can invite users or change roles.</span></div>}

      {tab === "users" && <div className="card">
        <div className="card-hd">Users<span className="sub">{users.filter(u => u.status === "active").length} active · {users.filter(u => u.status === "invited").length} invited</span>
          <div className="actions"><label className="cr-search"><Icon name="search" size={12}/><input value={q} onChange={e => setQ(e.target.value)} placeholder="Search name, email, role"/></label></div></div>
        <table className="tbl">
          <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Sites</th><th>Last seen</th><th>Status</th><th className="r"></th></tr></thead>
          <tbody>{pgU.rows.map(u => (
            <tr key={u.id} style={{ opacity: u.status === "deactivated" ? .5 : 1 }}>
              <td><div className="row" style={{ gap: 8 }}><div className="ad-av">{u.name.split(" ").map(w => w[0]).slice(0, 2).join("")}</div><span style={{ fontWeight: 500 }}>{u.name}</span></div></td>
              <td className="sec mono" style={{ fontSize: 11 }}>{u.email}</td>
              <td><select className="sel ad-role" value={u.role} disabled={!can || u.status === "deactivated"} onChange={e => upd(u, { role: e.target.value }, `${u.name} → ${e.target.value}`)} title={RB_ROLE_D[u.role]}>{RB_ROLES.map(r => <option key={r}>{r}</option>)}</select></td>
              <td className="num sec">{u.sites}</td>
              <td className="mono sec" style={{ fontSize: 11 }}>{u.seen}</td>
              <td><Pill tone={u.status === "active" ? "ok" : u.status === "invited" ? "warn" : ""}><span className="dot"/>{u.status}</Pill></td>
              <td className="r"><div className="cr-acts">
                {u.status === "invited" && <button className="btn btn-ghost btn-xs" data-perm="users.manage" onClick={() => upd(u, {}, `Invitation re-sent to ${u.email}`)}>Resend</button>}
                {u.status !== "deactivated" ? <button className="btn btn-ghost btn-xs" data-perm="users.manage" onClick={() => confirm(`Deactivate ${u.name}? They lose access immediately; history is kept.`) && upd(u, { status: "deactivated" }, `${u.name} deactivated`)}>Deactivate</button>
                  : <button className="btn btn-ghost btn-xs" data-perm="users.manage" onClick={() => upd(u, { status: "active" }, `${u.name} reactivated`)}>Reactivate</button>}
              </div></td>
            </tr>))}</tbody>
        </table><Pager pg={pgU} label="users"/>
      </div>}

      {tab === "roles" && <div className="card">
        <div className="card-hd">Roles & permissions<span className="sub">Your role: {window.skyRole()} · enforced across the app</span></div>
        <table className="tbl ad-mx">
          <thead><tr><th>Permission</th>{RB_ROLES.map(r => <th key={r} className="c" title={RB_ROLE_D[r]}>{r}</th>)}</tr></thead>
          <tbody>{RB_ACTIONS.map(([k, l, g], i) => <React.Fragment key={k}>
            {(i === 0 || RB_ACTIONS[i - 1][2] !== g) && <tr className="ad-grp"><td colSpan={RB_ROLES.length + 1}>{g}</td></tr>}
            <tr><td>{l}</td>{RB_ROLES.map(r => <td key={r} className="c">{RB_MATRIX[r].includes(k) ? <Icon name="check" size={13}/> : <span className="sec">—</span>}</td>)}</tr>
          </React.Fragment>)}</tbody>
        </table>
        <div className="ad-roles">{RB_ROLES.map(r => <div key={r}><b>{r}</b><span>{RB_ROLE_D[r]} · {users.filter(u => u.role === r && u.status !== "deactivated").length} users</span></div>)}</div>
      </div>}

      {tab === "tenants" && <div className="card"><table className="tbl">
        <thead><tr><th>Tenant</th><th>Scope</th><th>Identity provider</th><th className="r"></th></tr></thead>
        <tbody>{(window.TN_LIST || []).map(t => <tr key={t.name}><td><b>{t.name}</b>{t.name === window.skyTenant() && <span className="pill ok" style={{ marginLeft: 8 }}><span className="dot"/>current</span>}</td><td className="sec">{window.tnSummary(t)}</td><td className="sec">{t.sandbox ? "—" : /Solaria/.test(t.name) ? "Okta" : "Microsoft Entra ID"}</td>
          <td className="r">{t.name !== window.skyTenant() && <button className="btn btn-secondary btn-xs" onClick={() => confirm(`Switch to ${t.name}?`) && window.tnSwitch(t.name)}>Switch</button>}</td></tr>)}</tbody>
      </table></div>}

      {tab === "audit" && window.AuditLog && <window.AuditLog/>}
      {invite && <AdInvite onClose={() => setInvite(false)}/>}
    </div>
  );
}

function AdInvite({ onClose }) {
  const [f, setF] = useState({ name: "", email: "", role: "Operator", sites: "All" });
  const valid = f.name.trim() && /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email) && !adStore.v.some(u => u.email === f.email.trim());
  const send = () => { adStore.set(l => [...l, { id: "U-" + Date.now(), name: f.name.trim(), email: f.email.trim(), role: f.role, sites: f.sites, seen: "—", status: "invited" }]); window.skyToast(`Invitation sent to ${f.email}`); adLog(`Invited ${f.email} as ${f.role}`); onClose(); };
  return <div className="ni-scrim" onClick={onClose}><div className="ni-modal" role="dialog" onClick={e => e.stopPropagation()} style={{ width: "min(520px,100%)" }}>
    <div className="ni-hd"><div><div className="kicker">Users & admin</div><h3>Invite user</h3></div><button className="ask-hd-btn" onClick={onClose}><Icon name="x" size={13}/></button></div>
    <div className="ni-body"><div className="ni-grid">
      <label className="field"><span>Full name *</span><input className="inp" autoFocus value={f.name} onChange={e => setF(x => ({ ...x, name: e.target.value }))}/></label>
      <label className="field"><span>Email *</span><input className="inp" type="email" value={f.email} onChange={e => setF(x => ({ ...x, email: e.target.value }))}/>{adStore.v.some(u => u.email === f.email.trim()) && <em className="dm-err-t">Already a user</em>}</label>
      <label className="field"><span>Role</span><select className="sel" value={f.role} onChange={e => setF(x => ({ ...x, role: e.target.value }))}>{RB_ROLES.map(r => <option key={r}>{r}</option>)}</select></label>
      <label className="field"><span>Sites</span><select className="sel" value={f.sites} onChange={e => setF(x => ({ ...x, sites: e.target.value }))}><option>All</option>{(window.SITES || []).map(s => <option key={s.id} value={s.name}>{s.name}</option>)}</select></label>
      <div className="field ni-span"><span className="sec" style={{ fontSize: 11.5, textTransform: "none", letterSpacing: 0 }}>{RB_ROLE_D[f.role]}</span></div>
    </div></div>
    <div className="ni-ft"><span className="grow"/><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={!valid} onClick={send}><Icon name="send" size={12}/>Send invitation</button></div>
  </div></div>;
}

Object.assign(window, { AdminPage, adStore });