// Users management page
const UsersPage = ({ t, lang, toast }) => {
  const D = window.MOCK_DATA;
  const [users, setUsers] = React.useState(D.users);
  const [search, setSearch] = React.useState("");
  const [showInvite, setShowInvite] = React.useState(false);
  const [editing, setEditing] = React.useState(null); // user object being edited
  const [newName, setNewName] = React.useState("");
  const [newEmail, setNewEmail] = React.useState("");
  const [newRole, setNewRole] = React.useState("user");
  const [newTeam, setNewTeam] = React.useState("Facilities");
  const [filterRole, setFilterRole] = React.useState("all");

  const openEdit = (u) => {
    setEditing({ ...u, _origEmail: u.email });
  };
  const saveEdit = () => {
    setUsers(users.map(u => u.email === editing._origEmail
      ? { name: editing.name, email: editing.email, role: editing.role, team: editing.team, last: u.last }
      : u));
    toast(t("toast_settings_saved"));
    setEditing(null);
  };

  const filtered = users.filter(u =>
    (filterRole === "all" || u.role === filterRole) &&
    (search === "" || u.name.toLowerCase().includes(search.toLowerCase()) || u.email.toLowerCase().includes(search.toLowerCase()))
  );

  const counts = {
    admin: users.filter(u => u.role === "admin").length,
    user: users.filter(u => u.role === "user").length,
    viewer: users.filter(u => u.role === "viewer").length,
  };

  const submitInvite = () => {
    if (!newName || !newEmail) return;
    setUsers([{ name: newName, email: newEmail, role: newRole, team: newTeam, last: lang === "en" ? "Invited" : "เชิญแล้ว" }, ...users]);
    toast(t("toast_user_added"));
    setShowInvite(false);
    setNewName(""); setNewEmail("");
  };

  const removeUser = (email) => setUsers(users.filter(u => u.email !== email));
  const changeRole = (email, role) => setUsers(users.map(u => u.email === email ? { ...u, role } : u));

  const initialsOf = (name) => name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();

  return (
    <div className="page" data-screen-label="Users">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("us_title")}</h1>
          <p className="page-sub">{t("us_sub")}</p>
        </div>
        <div className="header-actions">
          <button className="btn accent" onClick={() => setShowInvite(true)}>
            <Icon name="plus" className="ico" />{t("us_invite")}
          </button>
        </div>
      </div>

      <div className="row thirds" style={{ marginBottom: 14 }}>
        <div className="kpi">
          <div className="kpi-label"><span className="kpi-dot" style={{ background: "var(--accent)" }}></span>{t("role_admin")}</div>
          <div className="kpi-value num">{counts.admin}</div>
          <div className="kpi-delta">{lang === "en" ? "Full access" : "เข้าถึงเต็มสิทธิ์"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span className="kpi-dot" style={{ background: "var(--text-2)" }}></span>{t("role_user")}</div>
          <div className="kpi-value num">{counts.user}</div>
          <div className="kpi-delta">{lang === "en" ? "Can submit readings" : "บันทึกค่ามิเตอร์ได้"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span className="kpi-dot" style={{ background: "var(--text-3)" }}></span>{t("role_viewer")}</div>
          <div className="kpi-value num">{counts.viewer}</div>
          <div className="kpi-delta">{lang === "en" ? "Read-only" : "ดูอย่างเดียว"}</div>
        </div>
      </div>

      <div className="card">
        <div className="filter-bar">
          <Icon name="search" style={{ color: "var(--text-3)" }} />
          <input type="text" placeholder={lang === "en" ? "Search users…" : "ค้นหาผู้ใช้…"}
                 value={search} onChange={(e) => setSearch(e.target.value)}
                 style={{ flex: 1, maxWidth: 280, border: "1px solid var(--line)", borderRadius: 7, padding: "5px 10px", fontSize: 13 }} />
          <span style={{ width: 1, height: 18, background: "var(--line)", margin: "0 4px" }}></span>
          <label>{t("us_col_role")}</label>
          <select value={filterRole} onChange={(e) => setFilterRole(e.target.value)}>
            <option value="all">{t("filter_all")}</option>
            <option value="admin">{t("role_admin")}</option>
            <option value="user">{t("role_user")}</option>
            <option value="viewer">{t("role_viewer")}</option>
          </select>
          <span className="spacer"></span>
          <span style={{ fontSize: 12, color: "var(--text-3)" }}>
            {filtered.length} {lang === "en" ? "people" : "คน"}
          </span>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>{t("us_col_name")}</th>
                <th>{t("us_col_email")}</th>
                <th>{t("us_col_role")}</th>
                <th>{t("us_col_team")}</th>
                <th>{t("us_col_last")}</th>
                <th style={{ width: 80, textAlign: "right" }}></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((u, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div className="avatar" style={{ width: 26, height: 26, fontSize: 11 }}>{initialsOf(u.name)}</div>
                      <span className="cell-strong">{u.name}</span>
                    </div>
                  </td>
                  <td><span className="cell-mono">{u.email}</span></td>
                  <td>
                    <select value={u.role} onChange={(e) => changeRole(u.email, e.target.value)}
                            style={{ border: "1px solid var(--line)", borderRadius: 6, padding: "3px 8px", fontSize: 12, background: "var(--panel)" }}>
                      <option value="admin">{t("role_admin")}</option>
                      <option value="user">{t("role_user")}</option>
                      <option value="viewer">{t("role_viewer")}</option>
                    </select>
                  </td>
                  <td style={{ color: "var(--text-2)" }}>{u.team}</td>
                  <td style={{ color: "var(--text-3)" }}>{u.last}</td>
                  <td style={{ textAlign: "right" }}>
                    <button className="btn subtle" title={t("edit")} style={{ padding: 6 }} onClick={() => openEdit(u)}><Icon name="edit" /></button>
                    <button className="btn subtle danger" title={t("delete")} style={{ padding: 6 }} onClick={() => removeUser(u.email)}><Icon name="trash" /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {editing && (
        <div className="modal-backdrop" onClick={() => setEditing(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{t("edit")} · {editing.name}</h3>
              <p className="modal-sub">{lang === "en" ? "Update name, email, team, or role." : "แก้ไขชื่อ อีเมล ทีม หรือบทบาท"}</p>
            </div>
            <div className="modal-body">
              <div className="field">
                <label>{t("us_col_name")}</label>
                <input type="text" value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
              </div>
              <div className="field">
                <label>{t("us_col_email")}</label>
                <input type="email" value={editing.email} onChange={(e) => setEditing({ ...editing, email: e.target.value })} />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t("us_col_role")}</label>
                  <select value={editing.role} onChange={(e) => setEditing({ ...editing, role: e.target.value })}>
                    <option value="admin">{t("role_admin")}</option>
                    <option value="user">{t("role_user")}</option>
                    <option value="viewer">{t("role_viewer")}</option>
                  </select>
                </div>
                <div className="field">
                  <label>{t("us_col_team")}</label>
                  <input type="text" value={editing.team} onChange={(e) => setEditing({ ...editing, team: e.target.value })} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setEditing(null)}>{t("cancel")}</button>
              <button className="btn accent" onClick={saveEdit}><Icon name="check" className="ico" />{t("save")}</button>
            </div>
          </div>
        </div>
      )}

      {showInvite && (
        <div className="modal-backdrop" onClick={() => setShowInvite(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{t("us_invite")}</h3>
              <p className="modal-sub">{lang === "en" ? "They'll receive an email to set their password." : "ระบบจะส่งอีเมลให้ผู้ใช้ตั้งรหัสผ่าน"}</p>
            </div>
            <div className="modal-body">
              <div className="field">
                <label>{t("us_col_name")}</label>
                <input type="text" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder={lang === "en" ? "Sirinya N." : "สิรินยา น."} />
              </div>
              <div className="field">
                <label>{t("us_col_email")}</label>
                <input type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} placeholder="name@verena.co.th" />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t("us_col_role")}</label>
                  <select value={newRole} onChange={(e) => setNewRole(e.target.value)}>
                    <option value="admin">{t("role_admin")}</option>
                    <option value="user">{t("role_user")}</option>
                    <option value="viewer">{t("role_viewer")}</option>
                  </select>
                </div>
                <div className="field">
                  <label>{t("us_col_team")}</label>
                  <input type="text" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setShowInvite(false)}>{t("cancel")}</button>
              <button className="btn accent" onClick={submitInvite}>{t("us_invite")}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.UsersPage = UsersPage;