/* global React, Icon, Chip, Button, Avatar, api */

/* ── Invite / Add member modal ───────────────────────── */
function InviteModal({ roles, onClose, onAdded }) {
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", role: "", password: "" });
  const [error, setError] = React.useState("");
  const [saving, setSaving] = React.useState(false);
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  async function handleSubmit(e) {
    e.preventDefault();
    if (!form.name.trim())     { setError("Name is required.");         return; }
    if (!form.email.trim())    { setError("Email is required.");        return; }
    if (!form.password.trim()) { setError("Password is required.");     return; }
    if (!form.role)            { setError("Please select a role.");     return; }
    setError(""); setSaving(true);
    try {
      const res = await api.post("/users", {
        name:     form.name.trim(),
        email:    form.email.trim(),
        phone:    form.phone.trim(),
        password: form.password.trim(),
        role:     form.role,
      });
      onAdded(res.data);
    } catch (err) {
      setError(err.message || "Failed to add member.");
      setSaving(false);
    }
  }

  const selectedRole = roles.find(r => r._id === form.role);

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Team</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Add team member</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <form onSubmit={handleSubmit} className="modal-body">
          {error && (
            <div style={{ background: "var(--danger-50)", color: "var(--danger-700)", border: "1px solid var(--danger-200)", borderRadius: 6, padding: "8px 12px", fontSize: 13 }}>
              {error}
            </div>
          )}
          <div className="field">
            <label>Full name</label>
            <input placeholder="e.g. Ahmed Al-Rashidi" value={form.name} onChange={set("name")} autoFocus />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Email address</label>
              <input type="email" placeholder="name@company.ae" value={form.email} onChange={set("email")} />
            </div>
            <div className="field">
              <label>Phone number</label>
              <input placeholder="+971 50 000 0000" value={form.phone} onChange={set("phone")} />
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Role</label>
              <select value={form.role} onChange={set("role")}>
                <option value="">Select a role…</option>
                {roles.map(r => <option key={r._id} value={r._id}>{r.name}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Temporary password</label>
              <input type="password" placeholder="Min. 6 characters" value={form.password} onChange={set("password")} />
            </div>
          </div>
          {selectedRole && selectedRole.permissions && selectedRole.permissions.length > 0 && (
            <div style={{ background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "14px 16px" }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--fg-3)", fontWeight: 600, marginBottom: 8 }}>
                Permissions for {selectedRole.name}
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {selectedRole.permissions.map(p => (
                  <div key={p} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--fg-2)" }}>
                    <Icon name="check" size={12} /> {p}
                  </div>
                ))}
              </div>
            </div>
          )}
          <div className="modal-footer">
            <Button variant="secondary" type="button" onClick={onClose}>Cancel</Button>
            <Button type="submit" icon="user-plus" disabled={saving}>{saving ? "Adding…" : "Add member"}</Button>
          </div>
        </form>
      </div>
    </>
  );
}

/* ── Member drawer ───────────────────────────────────── */
function MemberDrawer({ member, roles, onClose, onUpdated }) {
  const [saving, setSaving] = React.useState(false);

  async function toggleStatus() {
    const next = member.status === "active" ? "inactive" : "active";
    setSaving(true);
    try {
      const res = await api.put("/users/" + member._id, { status: next });
      onUpdated(res.data);
      onClose();
    } catch (_) {} finally { setSaving(false); }
  }

  async function changeRole(roleId) {
    setSaving(true);
    try {
      const res = await api.put("/users/" + member._id, { role: roleId });
      onUpdated(res.data);
    } catch (_) {} finally { setSaving(false); }
  }

  const roleName = member.role ? (member.role.name || member.role) : "—";

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <aside className="drawer">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 22px", borderBottom: "1px solid var(--border-subtle)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar name={member.name} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{member.name}</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{member.email}</div>
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div style={{ padding: 22, overflow: "auto", flex: 1 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 14px", borderRadius: 8, marginBottom: 20, background: "var(--plum-50)", color: "var(--brand-burgundy)", fontWeight: 600, fontSize: 13 }}>
            <Icon name="shield" size={14} /> {roleName}
          </div>

          <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>Contact</div>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 16px", fontSize: 13, marginBottom: 22 }}>
            <span style={{ color: "var(--fg-3)" }}>Email</span><span>{member.email}</span>
            {member.phone && <><span style={{ color: "var(--fg-3)" }}>Phone</span><span style={{ fontFamily: "var(--font-mono)" }}>{member.phone}</span></>}
            <span style={{ color: "var(--fg-3)" }}>Status</span>
            <span>
              <Chip kind={member.status === "active" ? "success" : "default"}>
                {member.status === "active" ? "Active" : "Inactive"}
              </Chip>
            </span>
          </div>

          {roles.length > 0 && (
            <>
              <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>Change role</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {roles.map(r => {
                  const currentRoleId = member.role ? (member.role._id || member.role) : null;
                  const isActive = currentRoleId === r._id;
                  return (
                    <div key={r._id} onClick={() => !saving && changeRole(r._id)} style={{
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "10px 14px", borderRadius: 8, cursor: saving ? "default" : "pointer",
                      border: "1px solid", fontSize: 13, fontWeight: 500,
                      background: isActive ? "var(--plum-50)" : "#fff",
                      color: isActive ? "var(--brand-burgundy)" : "var(--fg-2)",
                      borderColor: isActive ? "var(--brand-burgundy)" : "var(--border-subtle)",
                      opacity: saving ? 0.6 : 1,
                    }}>
                      {r.name}
                      {isActive && <Icon name="check" size={14} />}
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>

        <div style={{ padding: 16, borderTop: "1px solid var(--border-subtle)", display: "flex", gap: 8, justifyContent: "space-between", background: "var(--ink-50)" }}>
          <Button variant="secondary" icon={member.status === "active" ? "user-x" : "user-check"} onClick={toggleStatus} disabled={saving}>
            {member.status === "active" ? "Deactivate" : "Reactivate"}
          </Button>
          <Button variant="secondary" onClick={onClose}>Close</Button>
        </div>
      </aside>
    </>
  );
}

/* ── Main page ───────────────────────────────────────── */
function TeamPage() {
  const [members, setMembers]     = React.useState([]);
  const [roles, setRoles]         = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [showInvite, setShowInvite] = React.useState(false);
  const [openMember, setOpenMember] = React.useState(null);
  const [statusFilter, setStatusFilter] = React.useState("all");

  React.useEffect(() => {
    setLoading(true);
    Promise.all([
      api.get("/users?all=1"),   // all users regardless of status
      api.get("/roles"),
    ]).then(([uRes, rRes]) => {
      setMembers(uRes.data || []);
      setRoles(rRes.data || []);
    }).catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const filtered = members.filter(m =>
    statusFilter === "all" || m.status === statusFilter
  );

  const activeCount = members.filter(m => m.status === "active").length;

  function handleAdded(user) {
    setMembers(prev => [user, ...prev]);
    setShowInvite(false);
  }

  function handleUpdated(user) {
    setMembers(prev => prev.map(m => m._id === user._id ? user : m));
    if (openMember && openMember._id === user._id) setOpenMember(user);
  }

  return (
    <>
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Setup</div>
          <h1 className="page-title">Team &amp; roles</h1>
          <div className="page-sub">{members.length} members · {activeCount} active</div>
        </div>
        <Button icon="user-plus" onClick={() => setShowInvite(true)}>Add member</Button>
      </div>

      {/* Status filter */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-subtle)", marginBottom: 16 }}>
        {[{ id: "all", label: "All" }, { id: "active", label: "Active" }, { id: "inactive", label: "Inactive" }].map(f => (
          <button key={f.id} onClick={() => setStatusFilter(f.id)}
            style={{
              background: "transparent", border: 0, padding: "10px 14px", cursor: "pointer",
              color: statusFilter === f.id ? "var(--brand-burgundy)" : "var(--fg-2)",
              fontWeight: statusFilter === f.id ? 600 : 500,
              fontSize: 13.5, borderBottom: statusFilter === f.id ? "2px solid var(--brand-burgundy)" : "2px solid transparent",
              marginBottom: -1, fontFamily: "inherit",
            }}>
            {f.label}
          </button>
        ))}
      </div>

      <div className="card" style={{ padding: 0 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Member</th>
              <th>Role</th>
              <th>Phone</th>
              <th>Status</th>
              <th style={{ textAlign: "right" }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan="5" style={{ textAlign: "center", padding: "48px 0", color: "var(--fg-3)" }}>Loading…</td></tr>
            ) : filtered.length === 0 ? (
              <tr><td colSpan="5" style={{ textAlign: "center", padding: "48px 0", color: "var(--fg-3)" }}>No team members found.</td></tr>
            ) : filtered.map(m => (
              <tr key={m._id} onClick={() => setOpenMember(m)}>
                <td>
                  <div className="av-row">
                    <Avatar name={m.name} />
                    <div>
                      <div className="nm">{m.name}</div>
                      <div className="sub">{m.email}</div>
                    </div>
                  </div>
                </td>
                <td>
                  {m.role
                    ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 10px", borderRadius: 999, fontSize: 12, fontWeight: 500, background: "var(--plum-50)", color: "var(--brand-burgundy)" }}>
                        {m.role.name || m.role}
                      </span>
                    : <span style={{ color: "var(--fg-4)" }}>—</span>}
                </td>
                <td className="cell-mono cell-muted" style={{ fontSize: 12 }}>{m.phone || "—"}</td>
                <td><Chip kind={m.status === "active" ? "success" : "default"}>{m.status === "active" ? "Active" : "Inactive"}</Chip></td>
                <td style={{ textAlign: "right" }}>
                  <button className="btn btn-ghost btn-sm" onClick={e => { e.stopPropagation(); setOpenMember(m); }}>Open</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>

    {showInvite && (
      <InviteModal roles={roles} onClose={() => setShowInvite(false)} onAdded={handleAdded} />
    )}
    {openMember && (
      <MemberDrawer
        member={openMember}
        roles={roles}
        onClose={() => setOpenMember(null)}
        onUpdated={handleUpdated}
      />
    )}
    </>
  );
}

Object.assign(window, { TeamPage });