// Admin · Brukere & Roller — super admin tildeler roller til brukere fra Supabase user_roles-tabell

const ROLE_ORDER = ["superadmin", "admin", "mod", "captain", "player"];
const ROLE_DESCRIPTIONS = {
  superadmin: "Full tilgang. Kan tildele alle roller, slette brukere, opprette/slette turneringer.",
  admin:      "Oppretter turneringer, verifiserer resultater, modererer chat. Kan IKKE tildele roller.",
  mod:        "Modererer chat og disputter. Kan IKKE opprette eller redigere turneringer.",
  captain:    "Rapporterer resultater og setter opp lag-roster. Auto-tildelt ved opprettelse av lag.",
  player:     "Standard-rolle. Deltar i turneringer og ser personlig statistikk.",
};
const ROLE_COLOR_KEY = {
  superadmin: "var(--accent)",
  admin:      "var(--accent)",
  mod:        "var(--warn)",
  captain:    "var(--text)",
  player:     "var(--text-dim)",
};

const RoleManager = ({ tweaks, currentRole }) => {
  const [users, setUsers]   = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filter, setFilter] = React.useState("all");
  const [query, setQuery]   = React.useState("");
  const [toast, setToast]   = React.useState(null);
  const [saving, setSaving] = React.useState(null); // userId som lagres

  const canEdit = currentRole === "superadmin";

  // Last brukere fra Supabase user_roles-tabell
  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    WZN_Store.getUserRoles().then(data => {
      if (!cancelled) { setUsers(data); setLoading(false); }
    });
    return () => { cancelled = true; };
  }, []);

  const setUserRole = async (userId, newRole) => {
    if (!canEdit) return;
    const user = users.find(u => u.user_id === userId);
    if (!user) return;

    // Optimistisk oppdatering
    setUsers(prev => prev.map(u => u.user_id === userId ? { ...u, role: newRole, _justChanged: true } : u));
    setSaving(userId);

    const { error } = await WZN_Store.updateUserRole(userId, newRole, user.discord_id);

    setSaving(null);
    if (error) {
      // Rull tilbake ved feil
      setUsers(prev => prev.map(u => u.user_id === userId ? { ...u, role: user.role, _justChanged: false } : u));
      setToast({ name: user.display_name || user.email, role: null, error: error.message || "Ukjent feil", time: new Date().toTimeString().slice(0,8) });
    } else {
      setToast({ name: user.display_name || user.email, role: newRole, time: new Date().toTimeString().slice(0,8) });
      setTimeout(() => setUsers(prev => prev.map(u => ({ ...u, _justChanged: false }))), 1800);
    }
    setTimeout(() => setToast(null), 3800);
  };

  const filtered = users.filter(u => {
    if (filter !== "all" && u.role !== filter) return false;
    const hay = `${u.display_name || ""} ${u.discord_name || ""} ${u.email || ""} ${u.activision_id || ""}`.toLowerCase();
    if (query && !hay.includes(query.toLowerCase())) return false;
    return true;
  });

  const counts = ROLE_ORDER.reduce((acc, r) => {
    acc[r] = users.filter(u => u.role === r).length;
    return acc;
  }, {});

  return (
    <div className="rolemgr">
      {/* Header / counts */}
      <div className="rolemgr-counts">
        {ROLE_ORDER.map(r => (
          <button
            key={r}
            className={`rmc-cell ${filter === r ? "active" : ""}`}
            onClick={() => setFilter(filter === r ? "all" : r)}
            style={filter === r ? { borderColor: tweaks.accent } : null}
          >
            <span className="rmc-num" style={{ color: ROLE_COLOR_KEY[r] === "var(--accent)" ? tweaks.accent : ROLE_COLOR_KEY[r] }}>
              {counts[r]}
            </span>
            <span className="rmc-lab">{window.ROLE_LABELS[r]}</span>
          </button>
        ))}
        <button
          className={`rmc-cell ${filter === "all" ? "active" : ""}`}
          onClick={() => setFilter("all")}
          style={filter === "all" ? { borderColor: tweaks.accent } : null}
        >
          <span className="rmc-num">{users.length}</span>
          <span className="rmc-lab">TOTALT</span>
        </button>
      </div>

      {/* Permissions legend */}
      <div className="rolemgr-legend">
        {ROLE_ORDER.map(r => (
          <div key={r} className="rml-row">
            <span className="rml-tag" style={{
              borderColor: ROLE_COLOR_KEY[r] === "var(--accent)" ? tweaks.accent : ROLE_COLOR_KEY[r],
              color: ROLE_COLOR_KEY[r] === "var(--accent)" ? tweaks.accent : ROLE_COLOR_KEY[r],
            }}>{window.ROLE_LABELS[r]}</span>
            <span className="rml-desc">{ROLE_DESCRIPTIONS[r]}</span>
          </div>
        ))}
      </div>

      {/* Search + table */}
      <div className="rolemgr-tablewrap">
        <div className="rolemgr-toolbar">
          <input
            type="text"
            className="rolemgr-search"
            placeholder="Søk på navn, Discord, email eller Activision ID…"
            value={query}
            onChange={e => setQuery(e.target.value)}
          />
          {!canEdit && (
            <div className="rolemgr-locked">
              <span style={{ color: tweaks.accent }}>🔒</span>
              <span>Kun Super Admin kan tildele roller — du er logget inn som {window.ROLE_LABELS[currentRole]}</span>
            </div>
          )}
          {canEdit && (
            <div className="rolemgr-superbadge" style={{ borderColor: tweaks.accent, color: tweaks.accent }}>
              ● SUPER ADMIN · TILDELING AKTIV
            </div>
          )}
        </div>

        {loading ? (
          <div style={{
            padding: "48px", textAlign: "center",
            fontFamily: "var(--font-mono)", fontSize: 12,
            color: "var(--text-faint)", letterSpacing: "0.15em",
          }}>LASTER BRUKERE…</div>
        ) : users.length === 0 ? (
          <div style={{
            padding: "48px 32px", textAlign: "center",
            fontFamily: "var(--font-body)", fontSize: 15,
            color: "var(--text-dim)", lineHeight: 1.7,
          }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: tweaks.accent, letterSpacing: "0.2em", marginBottom: 12 }}>
              INGEN BRUKERE ENNÅ
            </div>
            Brukere dukker opp her automatisk etter at de logger inn på siden.<br />
            Du må opprette <code style={{ color: "var(--text)" }}>user_roles</code>-tabellen i Supabase hvis den ikke finnes.
          </div>
        ) : (
          <table className="rolemgr-table">
            <thead>
              <tr>
                <th style={{ width: 28 }}></th>
                <th>NAVN / DISCORD</th>
                <th>EMAIL</th>
                <th>ACTIVISION ID</th>
                <th style={{ width: 100 }}>REGISTRERT</th>
                <th style={{ width: 200 }}>ROLLE</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => {
                const displayName = u.display_name || u.discord_name || u.email?.split("@")[0] || "Ukjent";
                const initials = displayName.split(" ").map(n => n[0]).slice(0,2).join("").toUpperCase();
                const joinedDate = u.created_at ? new Date(u.created_at).toLocaleDateString("nb-NO") : "—";
                const isSaving = saving === u.user_id;
                return (
                  <tr key={u.user_id || u.id}
                    className={u._justChanged ? "just-changed" : ""}
                    style={u._justChanged ? { borderColor: tweaks.accent } : null}
                  >
                    <td>
                      <div className="rmu-avatar" style={{ borderColor: tweaks.accent }}>
                        {initials}
                      </div>
                    </td>
                    <td>
                      <div className="rmu-name">{displayName}</div>
                      {u.discord_name && (
                        <div className="rmu-id" style={{ color: "#5865F2" }}>Discord: {u.discord_name}</div>
                      )}
                    </td>
                    <td className="mono dim">{u.email || "—"}</td>
                    <td className="mono">{u.activision_id || "—"}</td>
                    <td className="mono dim">{joinedDate}</td>
                    <td>
                      <select
                        className="rmu-role-select"
                        value={u.role || "player"}
                        onChange={e => setUserRole(u.user_id, e.target.value)}
                        disabled={!canEdit || u.role === "superadmin" || isSaving}
                        style={{
                          borderColor: u._justChanged ? tweaks.accent : "var(--line-2)",
                          color: ROLE_COLOR_KEY[u.role] === "var(--accent)" ? tweaks.accent : (ROLE_COLOR_KEY[u.role] || "var(--text-dim)"),
                          opacity: isSaving ? 0.5 : 1,
                        }}
                      >
                        {ROLE_ORDER.map(r => (
                          <option key={r} value={r} disabled={r === "superadmin" && u.role !== "superadmin"}>
                            {window.ROLE_LABELS[r]}{r === "superadmin" && u.role !== "superadmin" ? " (kun 1 tillatt)" : ""}
                          </option>
                        ))}
                      </select>
                      {isSaving && (
                        <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)", marginLeft: 6 }}>
                          LAGRER…
                        </span>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}

        {!loading && users.length > 0 && filtered.length === 0 && (
          <div className="rolemgr-empty">Ingen brukere matcher filteret.</div>
        )}
      </div>

      {toast && (
        <div className="toast" style={{ borderColor: toast.error ? "#e63946" : tweaks.accent }}>
          <span className="toast-pulse" style={{ background: toast.error ? "#e63946" : tweaks.accent }} />
          <div>
            <div className="toast-title">
              {toast.error ? "FEIL · " : "ROLLE OPPDATERT · "}{toast.time}
            </div>
            <div className="toast-body">
              {toast.error
                ? <span style={{ color: "#e63946" }}>{toast.error}</span>
                : <><b>{toast.name}</b> er nå <b style={{ color: tweaks.accent }}>{window.ROLE_LABELS[toast.role]}</b></>
              }
            </div>
          </div>
          <button className="toast-x" onClick={() => setToast(null)}>✕</button>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { RoleManager, ROLE_ORDER, ROLE_DESCRIPTIONS });