/* ===== admin-users.jsx — Kasutajad: roles & rights management =====
   Roles (RPStore.ROLES): admin · pm · field · viewer.
   Real authentication is SSO in the backend phase — this screen manages
   who has which role and which contracts field crew are assigned to. */

function initials(name) {
  return (name || "?").split(/[\s.]+/).filter(Boolean).slice(0, 2).map((s) => s[0].toUpperCase()).join("");
}

const ROLE_HEX = { admin: "#22285c", pm: "#15803d", field: "#b45309", viewer: "#64748b" };

function RoleBadge({ role }) {
  const r = RPStore.ROLES[role] || { label: role };
  return (
    <span className="badge" style={{ color: ROLE_HEX[role] || "var(--muted)", background: "transparent", borderColor: "var(--border)" }}>
      <span className="dot" style={{ background: ROLE_HEX[role] || "var(--muted)" }} />{r.label}
    </span>
  );
}

function userProjChips(u) {
  if (u.projects == null) return <span className="cellsub">Kõik projektid</span>;
  if (!u.projects.length) return <span className="cellsub">—</span>;
  const ps = u.projects.map((id) => PROJECTS.find((p) => p.id === id)).filter(Boolean);
  const shown = ps.slice(0, 2);
  return (
    <span className="uprojs">
      {shown.map((p) => <span key={p.id} className="uproj mono">{projLabel(p)}</span>)}
      {ps.length > 2 && <span className="cellsub">+{ps.length - 2}</span>}
    </span>
  );
}

/* ---------- screen ---------- */
function UsersScreen({ me, onEdit, onCreate }) {
  const [q, setQ] = useState("");
  const needle = q.trim().toLowerCase();
  const rows = (window.USERS || []).filter((u) =>
    !needle || (u.name + " " + u.email + " " + (RPStore.ROLES[u.role] || {}).label).toLowerCase().includes(needle));
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-title">Kasutajad ja õigused</h1>
          <p className="page-sub">{rows.length} kasutajat · sisselogimine e-posti ja parooliga — siin lisad kasutajaid ning haldad rolle ja projektimääranguid</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={onCreate}><Icon name="plus" size={16} /> Lisa kasutaja</button>
        </div>
      </div>

      <div className="filterbar">
        <div className="search">
          <Icon name="search" size={16} />
          <input placeholder="Otsi nime, e-posti või rolli järgi…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
      </div>

      <div className="panel">
        <table className="table">
          <thead><tr>
            <th>Kasutaja</th><th>Roll</th><th>Õigused</th><th>Projektid</th><th>Staatus</th><th style={{ width: 60 }}></th>
          </tr></thead>
          <tbody>
            {rows.map((u) => {
              const r = RPStore.ROLES[u.role] || {};
              return (
                <tr key={u.id} className="rowtap" onClick={() => onEdit(u)}>
                  <td>
                    <div className="ucell">
                      <div className="avatar" style={{ background: ROLE_HEX[u.role] }}>{initials(u.name)}</div>
                      <div><b>{u.name}</b>{u.id === me.id && <span className="uself">sina</span>}<div className="cellsub">{u.email}</div></div>
                    </div>
                  </td>
                  <td><RoleBadge role={u.role} /></td>
                  <td><span className="cellsub">{r.desc}</span></td>
                  <td>{u.role === "field" || u.projects != null ? userProjChips(u) : <span className="cellsub">Kõik projektid</span>}</td>
                  <td>{u.active !== false
                    ? <span className="badge green"><span className="dot" />Aktiivne</span>
                    : <span className="badge gray"><span className="dot" />Peatatud</span>}</td>
                  <td><div className="rowacts" onClick={(e) => e.stopPropagation()}>
                    <button className="iconbtn" title="Muuda" onClick={() => onEdit(u)}><Icon name="edit" size={15} /></button>
                  </div></td>
                </tr>
              );
            })}
            {rows.length === 0 && (
              <tr><td colSpan="6"><div className="empty" style={{ padding: 26 }}><p>Kasutajat “{q}” ei leitud.</p></div></td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------- drawer (new / edit) ---------- */
function UserDrawer({ user, me, onClose, onSave, onDelete }) {
  const isNew = !user;
  const isSelf = user && me && user.id === me.id;
  const [f, setF] = useState(() => user
    ? { name: user.name, email: user.email, role: user.role, active: user.active !== false }
    : { name: "", email: "", role: "field", active: true });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  /* project assignments live on the PROJECT card (Projektid → Muuda →
     Välitoimkond objektil) — the drawer only manages identity + role.
     field: keep existing scope (new users start with none); others: all. */
  const projectsFor = (role) => role === "field" ? ((user && user.projects) || []) : null;

  return (
    <Drawer title={isNew ? "Lisa kasutaja" : "Muuda kasutajat"}
      sub={isNew ? "Konto luuakse kohe — saad kopeeritava liitumislingi, millega kasutaja määrab endale parooli" : user.email}
      onClose={onClose}
      foot={<React.Fragment>
        <button className="btn btn-ghost" onClick={onClose}>Tühista</button>
        <button className="btn btn-primary" disabled={!f.name.trim() || !f.email.trim()}
          onClick={() => onSave(isNew, { ...f, projects: projectsFor(f.role) })}>
          <Icon name="check" size={16} /> {isNew ? "Loo kasutaja ja link" : "Salvesta"}
        </button>
      </React.Fragment>}>

      <div className="grid2">
        <div className="field"><label>Nimi</label>
          <input className="input" value={f.name} placeholder="E. Eesnimi" onChange={(e) => set("name", e.target.value)} /></div>
        <div className="field"><label>E-post</label>
          <input className="input" value={f.email} placeholder="nimi@reaalprojekt.ee" onChange={(e) => set("email", e.target.value)} /></div>
      </div>

      <div className="field"><label>Roll</label>
        <div className="rolecards">
          {Object.keys(RPStore.ROLES).map((rk) => {
            const r = RPStore.ROLES[rk];
            return (
              <button key={rk} type="button" className={"rolecard" + (f.role === rk ? " on" : "")}
                style={{ "--rc": ROLE_HEX[rk] }} disabled={isSelf && rk !== "admin"}
                onClick={() => { set("role", rk); if (rk === "field" && f.projects == null) set("projects", []); }}>
                <span className="rc-dot" />
                <span className="rc-body"><b>{r.label}</b><span>{r.desc}</span></span>
                {f.role === rk && <Icon name="check" size={16} stroke={2.6} />}
              </button>
            );
          })}
        </div>
        {isSelf && <div className="uhint">Sa ei saa enda administraatori rolli eemaldada.</div>}
      </div>

      {f.role === "field" && (
        <div className="field"><label>Määratud projektid</label>
          <div className="uhint">
            Lepingutele määramine käib <b>projekti kaardil</b>: Projektid → Muuda → „Välitoimkond objektil”.
            {user && (user.projects || []).length
              ? " Praegu määratud: " + (user.projects || []).map((pid) => {
                  const p = (window.PROJECTS || []).find((x) => x.id === pid);
                  return p ? projLabel(p) : null;
                }).filter(Boolean).join(", ") + "."
              : " Praegu pole ühtegi lepingut määratud."}
          </div>
        </div>
      )}

      <div className="field"><label>Konto</label>
        <label className="uall">
          <input type="checkbox" checked={f.active} disabled={isSelf} onChange={(e) => set("active", e.target.checked)} />
          Aktiivne — kasutaja saab sisse logida
        </label>
      </div>

      {!isNew && !isSelf && (
        <div className="dangerzone">
          <div className="dz-head"><Icon name="trash" size={14} /> Eemalda kasutaja</div>
          <div className="dz-row">
            <p className="dz-text">Konto kustutatakse jäädavalt. Tema sisestatud andmed jäävad alles.</p>
            <button className="btn btn-ghost dz-del" onClick={() => onDelete(user)}>Kustuta kasutaja</button>
          </div>
        </div>
      )}
    </Drawer>
  );
}

/* ---------- account footer (sidebar foot): current session + sign-out ---------- */
function UserSwitch({ me, onPick }) {
  const [open, setOpen] = useState(false);
  const role = RPStore.ROLES[me.role] || {};
  return (
    <div className="uswitch">
      <button className="side-foot ub" onClick={() => setOpen(!open)} title="Konto">
        <div className="avatar" style={{ background: ROLE_HEX[me.role] }}>{initials(me.name)}</div>
        <div className="who"><b>{me.name}</b><span>{role.label}</span></div>
        <span className="ico"><Icon name="chevron" size={15} /></span>
      </button>
      {open && (
        <React.Fragment>
          <div className="ppick-scrim" onClick={() => setOpen(false)}></div>
          <div className="uswitch-pop">
            <div className="ppick-cap">SISSE LOGITUD</div>
            <div className="uswitch-row on">
              <div className="avatar sm" style={{ background: ROLE_HEX[me.role] }}>{initials(me.name)}</div>
              <span className="uswitch-name">{me.name}</span>
              <RoleBadge role={me.role} />
            </div>
            <button className="uswitch-row" onClick={() => { setOpen(false); RPStore.auth.signOut(); }}>
              <div className="avatar sm" style={{ background: "#64748b" }}><Icon name="logout" size={14} /></div>
              <span className="uswitch-name">Logi välja</span>
            </button>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

/* ---------- no-access interstitial (field crew opening the console) ---------- */
function NoAccess({ me, onPick }) {
  return (
    <div className="noaccess fade-in">
      <RPLogo height={36} />
      <h2>Ligipääs puudub</h2>
      <p><b>{me.name}</b> ({(RPStore.ROLES[me.role] || {}).label}) ei oma admin-konsooli õigusi.<br />
        Välitoimkond kasutab mobiilset välirakendust — admin-konsool on projektijuhtidele, administraatoritele ja vaatlejatele.</p>
      <a className="btn btn-ghost" href="m.html">Ava välirakendus</a>
      <div className="noaccess-list">
        <button className="uswitch-row" onClick={() => RPStore.auth.signOut()}>
          <div className="avatar sm" style={{ background: "#64748b" }}><Icon name="logout" size={14} /></div>
          <span className="uswitch-name">Logi välja</span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { UsersScreen, UserDrawer, UserSwitch, NoAccess, RoleBadge, ROLE_HEX, initials });