/* Users — team roster: multi-role tags, active status, last login. */

const U = window.Ds1Threshold_e046d3;

function Users() {
  const api = window.OneDayUsers;
  const [users, setUsers] = React.useState(() => api.load());
  const [q, setQ] = React.useState("");
  const [sort, setSort] = React.useState({ key: "lastLogin", dir: "desc" });
  const [adding, setAdding] = React.useState(false);
  const [draft, setDraft] = React.useState({ name: "", email: "", phone: "", role: api.ALL_ROLES[0] });

  const refresh = () => setUsers(api.load());
  const toggleActive = (u) => { api.upsert({ id: u.id, active: !u.active }); refresh(); };
  const addUser = () => {
    if (!draft.name.trim()) return;
    api.upsert({ id: api.nextId(), name: draft.name.trim(), email: draft.email.trim(), phone: draft.phone.trim(), roles: draft.role ? [draft.role] : [], active: true, lastLogin: "" });
    refresh(); setAdding(false); setDraft({ name: "", email: "", phone: "", role: api.ALL_ROLES[0] });
  };
  const initials = (n) => n.split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();
  const lastMs = (u) => u.lastLogin ? Date.parse(u.lastLogin) || 0 : 0;

  const filtered = users.filter((u) => {
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    return u.name.toLowerCase().includes(s) || (u.email || "").toLowerCase().includes(s) || (u.roles || []).some((r) => r.toLowerCase().includes(s));
  });
  const getters = { name: (u) => u.name, email: (u) => u.email, active: (u) => (u.active ? 1 : 0), lastLogin: (u) => lastMs(u), roles: (u) => (u.roles || []).length };
  const rows = sortList(filtered, sort.key, sort.dir, getters[sort.key]);
  const activeCount = users.filter((u) => u.active).length;

  return (
    <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22, gap: 16, flexWrap: "wrap" }}>
        <div>
          <h1 style={{ margin: 0, fontSize: "var(--text-2xl)", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>Users &amp; Permissions</h1>
          <p style={{ margin: "4px 0 0", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>{activeCount} active · {users.length} total team members</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--input-bg)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "8px 12px" }}>
            <Icon name="Search" size={15} color="var(--text-muted)" />
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search name, email, role…" style={{ border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", width: 200, color: "var(--text-primary)" }} />
          </div>
          <U.Button variant="primary" onClick={() => setAdding((a) => !a)}><Icon name={adding ? "X" : "UserPlus"} size={16} />{adding ? "Cancel" : "Add User"}</U.Button>
        </div>
      </div>

      {adding && (
        <U.Card style={{ marginBottom: 20 }}>
          <U.Eyebrow size="2xs" style={{ marginBottom: 14 }}>New Team Member</U.Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1.6fr 1fr 1.2fr auto", gap: 12, alignItems: "end" }}>
            <U.Input label="Full Name" value={draft.name} onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))} placeholder="Jordan Vega" />
            <U.Input label="Email" value={draft.email} onChange={(e) => setDraft((d) => ({ ...d, email: e.target.value }))} placeholder="jordan@onedaysanantonio.com" />
            <U.Input label="Phone" value={draft.phone} onChange={(e) => setDraft((d) => ({ ...d, phone: e.target.value }))} placeholder="(210) 555-0148" />
            <U.Select label="Primary Role" value={draft.role} onChange={(e) => setDraft((d) => ({ ...d, role: e.target.value }))} options={api.ALL_ROLES} />
            <U.Button variant="deep" onClick={addUser}><Icon name="Check" size={16} />Add</U.Button>
          </div>
        </U.Card>
      )}

      <U.Card padding="none" style={{ overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1.6fr 1fr 2.4fr 0.7fr 0.9fr", gap: 14, padding: "12px 20px", background: "var(--surface-sunken)", borderBottom: "1px solid var(--border-subtle)" }}>
          <SortHeader label="Name" k="name" sort={sort} setSort={setSort} />
          <SortHeader label="Email" k="email" sort={sort} setSort={setSort} />
          <U.Eyebrow size="2xs">Phone</U.Eyebrow>
          <SortHeader label="Roles" k="roles" sort={sort} setSort={setSort} />
          <SortHeader label="Active" k="active" sort={sort} setSort={setSort} />
          <SortHeader label="Last Login" k="lastLogin" sort={sort} setSort={setSort} align="right" />
        </div>
        {rows.map((u) => (
          <div key={u.id} style={{ display: "grid", gridTemplateColumns: "1.4fr 1.6fr 1fr 2.4fr 0.7fr 0.9fr", gap: 14, padding: "12px 20px", alignItems: "center", borderBottom: "1px solid var(--border-subtle)", opacity: u.active ? 1 : 0.6 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
              <div style={{ width: 32, height: 32, borderRadius: "var(--radius-full)", background: "var(--color-primary-soft)", border: "1px solid var(--color-primary-ring)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)", fontWeight: 700, fontSize: 11, flexShrink: 0 }}>{initials(u.name)}</div>
              <span style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{u.name}{u.star && <span style={{ color: "var(--color-accent)", marginLeft: 4 }}>★</span>}</span>
            </div>
            <div style={{ fontSize: "var(--text-xs)", color: "var(--text-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{u.email}</div>
            <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{u.phone || "—"}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
              {(u.roles || []).length === 0 && <span style={{ fontSize: "var(--text-2xs)", color: "var(--text-faint)" }}>—</span>}
              {(u.roles || []).map((r) => (
                <span key={r} style={{ fontSize: "var(--text-2xs)", fontWeight: 600, padding: "2px 8px", borderRadius: "var(--radius-full)", background: api.MANAGER_ROLES.includes(r) ? "var(--color-primary-soft)" : "var(--neutral-100)", color: api.MANAGER_ROLES.includes(r) ? "var(--color-primary-deep)" : "var(--text-secondary)", whiteSpace: "nowrap" }}>{r}</span>
              ))}
            </div>
            <div><U.Switch checked={!!u.active} onChange={() => toggleActive(u)} /></div>
            <div style={{ textAlign: "right", fontSize: "var(--text-xs)", color: "var(--text-muted)", fontVariantNumeric: "tabular-nums" }}>{u.lastLogin || "—"}</div>
          </div>
        ))}
        {rows.length === 0 && <div style={{ padding: 28, textAlign: "center", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No users match “{q}”.</div>}
      </U.Card>
      <p style={{ margin: "14px 0 0", fontSize: "var(--text-2xs)", color: "var(--text-muted)" }}>Manager roles (Owner, Accounting / General / Operations Manager) can see and approve all commissions; everyone else sees only their own.</p>
    </div>
  );
}

window.Users = Users;