// User dropdown menu — opens from topbar dogtag
// Includes: dogtag header, Min side, Mitt lag / Opprette lag, Invitasjoner,
// Innstillinger, Mod-panel (role-gated), Admin-panel (role-gated), Logg ut

const UserDropdown = ({ role, inTeam, onNav, accent, discordUser }) => {
  // Bruk Discord OAuth-bruker fra app.jsx i stedet for mock CURRENT_PLAYER
  const player = discordUser ? {
    displayName: discordUser.user_metadata?.full_name || discordUser.user_metadata?.name || "Spiller",
    activisionId: discordUser.user_metadata?.custom_claims?.global_name || "—",
    avatar: (discordUser.user_metadata?.full_name || discordUser.email || "?")[0].toUpperCase(),
  } : { displayName: "Spiller", activisionId: "—", avatar: "?" };
  const team = { name: "—" }; // Lagets navn vises via inTeam-prop
  const isMod = role === "mod";
  const isAdmin = role === "admin" || role === "superadmin";
  const isSuperAdmin = role === "superadmin";

  // Mock invitation count
  const invitationCount = 2;

  const items = [
    {
      group: "KONTO",
      rows: [
        { id: "spiller",     label: "MIN SIDE",       sub: "Profil · loadout · stats", glyph: "person" },
        inTeam
          ? { id: "team-mine",   label: "MITT LAG",       sub: team.name,                glyph: "team" }
          : { id: "team-create", label: "OPPRETTE LAG",   sub: "Lag-kaptein · 3 spillere", glyph: "plus" },
        { id: "invitations", label: "INVITASJONER",  sub: invitationCount > 0 ? `${invitationCount} ventende` : "Ingen ventende", badge: invitationCount, glyph: "mail" },
        { id: "settings",    label: "INNSTILLINGER", sub: "Konto · varsler · privacy", glyph: "gear" },
      ].filter(Boolean),
    },
  ];

  const toolsRows = [];
  if (isMod) {
    toolsRows.push({ id: "admin", label: "MOD-PANEL", sub: "Verifisering · saker", glyph: "panel", role: "MOD" });
  }
  if (isAdmin) {
    toolsRows.push({ id: "admin", label: "ADMIN-PANEL", sub: "Verifisering · roller · system", glyph: "panel", role: isSuperAdmin ? "S.ADM" : "ADM" });
  }
  if (toolsRows.length) {
    items.push({ group: "TILGANG", rows: toolsRows });
  }

  return (
    <div className="user-dropdown">
      {/* Dogtag header */}
      <div className="user-dropdown-header">
        <div className="user-dd-avatar" style={{borderColor: accent}}>
          <span>{player.avatar}</span>
          <span className="user-dd-avatar-corner" />
        </div>
        <div className="user-dd-id">
          <div className="user-dd-name">MAGNUS T.</div>
          <div className="user-dd-tag">{player.displayName}</div>
          <div className="user-dd-meta">
            <span className="user-dd-actid">{player.activisionId}</span>
          </div>
        </div>
        <div className="user-dd-role-badge" style={{borderColor: accent, color: accent}}>
          {window.ROLE_LABELS[role] || role.toUpperCase()}
        </div>
      </div>

      {/* Team strip */}
      {inTeam && (
        <div className="user-dd-teamstrip">
          <span className="user-dd-teamtag">{team.tag}</span>
          <span className="user-dd-teamname">{team.name}</span>
          <span className="user-dd-teamdiv">DIV.{team.division}</span>
        </div>
      )}

      {/* Menu groups */}
      {items.map(group => (
        <div key={group.group} className="user-dd-group">
          <div className="user-dd-group-label">{group.group}</div>
          {group.rows.map(row => (
            <button
              key={row.id}
              className="user-dd-item"
              onClick={() => onNav(row.id)}
            >
              <span className="user-dd-glyph">
                <UserDDGlyph kind={row.glyph} />
              </span>
              <span className="user-dd-item-text">
                <span className="user-dd-item-label">{row.label}</span>
                <span className="user-dd-item-sub">{row.sub}</span>
              </span>
              {row.badge ? (
                <span className="user-dd-badge" style={{background: accent}}>{row.badge}</span>
              ) : row.role ? (
                <span className="user-dd-role-tag">{row.role}</span>
              ) : (
                <span className="user-dd-chev">›</span>
              )}
            </button>
          ))}
        </div>
      ))}

      {/* Divider + logout */}
      <div className="user-dd-divider" />
      <button className="user-dd-logout" onClick={() => onNav("login")}>
        <span className="user-dd-glyph"><UserDDGlyph kind="logout" /></span>
        <span className="user-dd-item-text">
          <span className="user-dd-item-label">LOGG UT</span>
          <span className="user-dd-item-sub">Avslutt økt</span>
        </span>
      </button>

      <div className="user-dd-footer">
        <span>WZN-NO-2026</span>
        <span>SN/{(player.id || "").toUpperCase()}</span>
      </div>
    </div>
  );
};

const UserDDGlyph = ({ kind }) => {
  const s = 14;
  switch (kind) {
    case "person":
      return <svg width={s} height={s} viewBox="0 0 14 14"><circle cx="7" cy="5" r="2.4" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M2.5 12.5 C3 10 5 9 7 9 S11 10 11.5 12.5" fill="none" stroke="currentColor" strokeWidth="1.4"/></svg>;
    case "team":
      return <svg width={s} height={s} viewBox="0 0 14 14"><circle cx="4.5" cy="5" r="2" fill="none" stroke="currentColor" strokeWidth="1.3"/><circle cx="9.5" cy="5" r="2" fill="none" stroke="currentColor" strokeWidth="1.3"/><path d="M1.5 12 C2 10 3 9.5 4.5 9.5 S7 10 7.5 12" fill="none" stroke="currentColor" strokeWidth="1.3"/><path d="M6.5 12 C7 10 8 9.5 9.5 9.5 S12 10 12.5 12" fill="none" stroke="currentColor" strokeWidth="1.3"/></svg>;
    case "plus":
      return <svg width={s} height={s} viewBox="0 0 14 14"><rect x="2" y="2" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="1.3"/><line x1="7" y1="4.5" x2="7" y2="9.5" stroke="currentColor" strokeWidth="1.5"/><line x1="4.5" y1="7" x2="9.5" y2="7" stroke="currentColor" strokeWidth="1.5"/></svg>;
    case "mail":
      return <svg width={s} height={s} viewBox="0 0 14 14"><rect x="1.5" y="3" width="11" height="8" fill="none" stroke="currentColor" strokeWidth="1.3"/><polyline points="1.5,3 7,7.5 12.5,3" fill="none" stroke="currentColor" strokeWidth="1.3"/></svg>;
    case "gear":
      return <svg width={s} height={s} viewBox="0 0 14 14"><circle cx="7" cy="7" r="2.4" fill="none" stroke="currentColor" strokeWidth="1.3"/><circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" strokeWidth="1.3" strokeDasharray="1.6 1.6"/></svg>;
    case "panel":
      return <svg width={s} height={s} viewBox="0 0 14 14"><rect x="1.5" y="2" width="11" height="10" fill="none" stroke="currentColor" strokeWidth="1.3"/><line x1="5" y1="2" x2="5" y2="12" stroke="currentColor" strokeWidth="1.3"/><line x1="1.5" y1="5" x2="12.5" y2="5" stroke="currentColor" strokeWidth="1.3"/></svg>;
    case "logout":
      return <svg width={s} height={s} viewBox="0 0 14 14"><path d="M8 2 H3 V12 H8" fill="none" stroke="currentColor" strokeWidth="1.4"/><polyline points="8,5 11,7 8,9" fill="none" stroke="currentColor" strokeWidth="1.4"/><line x1="6" y1="7" x2="11" y2="7" stroke="currentColor" strokeWidth="1.4"/></svg>;
    default:
      return <svg width={s} height={s} viewBox="0 0 14 14"><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>;
  }
};

window.UserDropdown = UserDropdown;