/* ========================================================================
   roles-user-drawer.jsx — SIM-holder summary drawer for User Management,
   mirroring the Admin Management details drawer.
   ======================================================================== */
const { useState: uD } = React;

function SimHolderDrawer({ user, onClose }) {
  const sims = user.sim_ids.map((sid) => window.MILO_DATA.SIMS.find((s) => s.id === sid)).filter(Boolean);
  const canManage = MP_ALLOW("users.records.manage");
  const totalGb = sims.reduce((sum, s) => sum + (s.used || 0), 0);

  return (
    <>
      <div className="mp-drawer-scrim" onClick={onClose} />
      <aside className="mp-drawer mp-drawer--wide" role="dialog" aria-label="User details">
        <header className="mp-drawer-head">
          <div>
            <h3>User Details</h3>
          </div>
          <button className="mp-drawer-x" onClick={onClose} aria-label="Close"><Icon name="x" size={16} /></button>
        </header>

        <div className="mp-drawer-body">
          <div className="mp-drawer-person">
            <Avatar initials={user.initials} size={52} tone={user.role ? "role-" + user.role : "mist"} />
            <div style={{ minWidth: 0 }}>
              <div className="mp-drawer-person-name">{user.full_name}</div>
              <div className="mp-drawer-person-email">{user.email}</div>
            </div>
          </div>

          <div className="mp-dl">
            <div className="mp-dl-row">
              <span className="mp-dl-k">Role</span>
              <span className="mp-dl-v">
                {user.role && window.RoleBadge
                  ? <window.RoleBadge role={user.role} />
                  : <Badge variant="standard-user" icon="user-round">Standard User</Badge>}
              </span>
            </div>
            <div className="mp-dl-row"><span className="mp-dl-k">Assigned SIMs</span><span className="mp-dl-v">{sims.length || "None"}</span></div>
            <div className="mp-dl-row"><span className="mp-dl-k">Mobile numbers</span><span className="mp-dl-v">{sims.filter((s) => s.msisdn).map((s) => s.msisdn).join(", ") || "None"}</span></div>
            <div className="mp-dl-row"><span className="mp-dl-k">Data used this period</span><span className="mp-dl-v">{totalGb ? totalGb.toFixed(1) + " GB" : "—"}</span></div>
          </div>

          <div className="mp-drawer-block">
            <div className="mp-drawer-block-title">Assigned SIMs</div>
            {sims.length ? (
              <div className="mp-holder-sims">
                {sims.map((s) => (
                  <a key={s.id} href={"#/sims/" + s.id} className="mp-holder-sim" onClick={onClose}>
                    <span className="mp-holder-sim-ic"><Icon name="card-sim" size={17} /></span>
                    <span className="mp-holder-sim-main">
                      <span className="mp-holder-sim-msisdn">{window.simLabel ? window.simLabel(s) : s.msisdn}</span>
                      <span className="mp-holder-sim-plan">{window.MILO_DATA.PLANS[s.plan]?.name || s.sim_type}</span>
                    </span>
                    <StatusBadge status={s.status} sim={s} />
                    <Icon name="chevron-right" size={15} className="mp-holder-sim-chev" />
                  </a>
                ))}
              </div>
            ) : (
              <ReadOnlyNote plain icon="info">No SIM cards are assigned to this person yet.</ReadOnlyNote>
            )}
          </div>

          {canManage ? (
            <div className="mp-drawer-block">
              <div className="mp-drawer-block-title">Manage</div>
              <div className="mp-drawer-stack">
                {MP_ALLOW("sim.manage") ?
                <Button variant="secondary" icon="card-sim" href={"#/users/" + user.id + "/assign-sim"} onClick={onClose}>Assign a SIM to User</Button> : null}
                <Button variant="secondary" icon="pencil" href={"#/users/" + user.id + "/edit"}>Edit User Details</Button>
                <Button variant="secondary" icon="external-link" href={"#/users/" + user.id }>Open Full Profile</Button>
              </div>
            </div>
          ) : (
            <div className="mp-drawer-block">
              <Button variant="secondary" icon="external-link" href={"#/users/" + user.id}>Open Full Profile</Button>
            </div>
          )}
        </div>

        <footer className="mp-drawer-foot">
          <Button variant="secondary" onClick={onClose}>Close</Button>
        </footer>
      </aside>
    </>
  );
}

Object.assign(window, { SimHolderDrawer });