// Avatar (procedural, no external requests), tier badge, account modal.

const TIERS = [
  {
    key: "survivor",
    label: "Survivor",
    price: 5,
    color: "var(--good)",
    queueSkip: 5,
    perks: [
      "Priority queue · skip ~5 spots",
      "[Survivor] Discord role + colored name",
      "Access to #survivors-only chat",
      "Vote on next event date",
    ],
  },
  {
    key: "outlaw",
    label: "Outlaw",
    price: 10,
    color: "var(--accent)",
    queueSkip: 15,
    popular: true,
    perks: [
      "Priority queue · skip ~15 spots",
      "All Survivor perks",
      "Custom in-game radio handle",
      "Monthly cosmetic flair (armband / patch)",
      "Voice in #outlaw-strats channel",
    ],
  },
  {
    key: "warlord",
    label: "Warlord",
    price: 20,
    color: "var(--accent-2)",
    queueSkip: 9999,
    perks: [
      "Priority queue · effectively zero wait",
      "All Outlaw perks",
      "Name engraved in the scrolling credits",
      "Calliope's radio shoutout on connect",
      "Direct line to the head admin",
    ],
  },
];

function ProceduralAvatar({ seed = "x", size = 36, kind = "discord" }) {
  // Hash seed → deterministic color pair + glyph
  let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const hue = h % 360;
  const hue2 = (hue + 47) % 360;
  const letter = seed[0]?.toUpperCase() || "?";
  const bg = `linear-gradient(135deg, hsl(${hue} 65% 30%), hsl(${hue2} 65% 18%))`;
  return (
    <div style={{
      width: size, height: size,
      borderRadius: kind === "discord" ? "50%" : "4px",
      background: bg,
      display: "grid", placeItems: "center",
      fontFamily: "Anton, sans-serif", fontSize: size * 0.5,
      color: "#fff", letterSpacing: "0.02em",
      border: "1px solid rgba(255,255,255,0.08)",
      flexShrink: 0,
    }}>{letter}</div>
  );
}

function TierBadge({ tier, size = "sm" }) {
  if (!tier) return null;
  const found = TIERS.find(t => t.key === tier);
  if (!found) return null;
  const pad = size === "sm" ? "3px 8px" : "6px 12px";
  const fs  = size === "sm" ? 10 : 12;
  return (
    <span style={{
      fontFamily: "JetBrains Mono, monospace",
      fontSize: fs, letterSpacing: "0.16em", textTransform: "uppercase",
      padding: pad, border: `1px solid ${found.color}`,
      color: found.color, background: "transparent",
      fontWeight: 700,
    }}>★ {found.label}</span>
  );
}

function expiresIn(ts) {
  if (!ts) return null;
  const ms = ts - Date.now();
  if (ms <= 0) return "expired";
  const d = Math.floor(ms / (24 * 3600 * 1000));
  if (d > 60) return Math.floor(d/30) + "mo";
  if (d > 1) return d + " days";
  const h = Math.floor(ms / (3600 * 1000));
  return h + "h";
}

function AccountButton({ onOpen, onOpenAdmin, staff }) {
  const { session } = useAuth();
  if (!session.discord) {
    return <button className="btn" onClick={onOpen}>Sign in</button>;
  }
  return (
    <div style={{display:"flex",gap:8,alignItems:"stretch"}}>
      {staff && (
        <button className="btn-staff" onClick={onOpenAdmin} title="Open admin panel">
          ◉ ADMIN
        </button>
      )}
      <button className="account-btn" onClick={onOpen}>
        <ProceduralAvatar seed={session.discord.avatarSeed} size={28} />
        <div className="account-btn-text">
          <div className="ab-name">{session.discord.username}</div>
          {session.tier && <TierBadge tier={session.tier} />}
          {!session.tier && <div className="ab-sub">No subscription</div>}
        </div>
      </button>
    </div>
  );
}

function AccountModal({ open, onClose }) {
  const auth = useAuth();
  const { session } = auth;
  const tierObj = TIERS.find(t => t.key === session.tier);

  if (!open) return null;

  return (
    <div className="acct-overlay" onClick={onClose}>
      <div className="acct-modal" onClick={e => e.stopPropagation()}>
        <div className="acct-head">
          <div className="acct-title">Account</div>
          <button className="acct-x" onClick={onClose}>✕</button>
        </div>

        {!session.discord && (
          <div className="acct-empty">
            <div className="acct-empty-eyebrow">— STEP 1 OF 3</div>
            <div className="acct-empty-title">Sign in with Discord.</div>
            <p className="muted" style={{marginBottom:24, maxWidth:380}}>
              We use Discord to identify you and sync your roles. No password lives on our servers — Discord handles auth, we just receive your username.
            </p>
            <button className="btn-discord" onClick={auth.signInDiscord}>
              <svg width="20" height="15" viewBox="0 0 71 55" fill="currentColor"><path d="M60.1 4.9A58.6 58.6 0 0 0 45.6 0l-1.8 4a54 54 0 0 0-16.3 0L25.7 0A58.4 58.4 0 0 0 11.1 4.9C1.8 18.7-.7 32.1.5 45.4a59.2 59.2 0 0 0 18 9.1l3.7-5a35 35 0 0 1-5.8-2.8c.5-.3 1-.7 1.4-1A41.8 41.8 0 0 0 35.5 49a41.8 41.8 0 0 0 17.7-3.2c.5.4.9.7 1.4 1a35 35 0 0 1-5.8 2.8l3.7 5a59.1 59.1 0 0 0 18-9.1c1.4-15.3-2-28.6-10.4-40.6zM23.7 37c-3.5 0-6.4-3.2-6.4-7.2 0-4 2.8-7.2 6.4-7.2 3.5 0 6.5 3.2 6.4 7.2 0 4-2.8 7.2-6.4 7.2zm23.6 0c-3.5 0-6.4-3.2-6.4-7.2 0-4 2.8-7.2 6.4-7.2 3.6 0 6.5 3.2 6.4 7.2 0 4-2.8 7.2-6.4 7.2z"/></svg>
              Continue with Discord
            </button>
          </div>
        )}

        {session.discord && (
          <>
            <div className="acct-section">
              <div className="acct-section-head">
                <span className="acct-eyebrow">— DISCORD</span>
                <span className="acct-status ok">CONNECTED</span>
              </div>
              <div className="acct-row">
                <ProceduralAvatar seed={session.discord.avatarSeed} size={48} />
                <div>
                  <div className="acct-name">{session.discord.username}</div>
                  <div className="acct-id mono">ID · {session.discord.id.slice(0,18)}</div>
                </div>
                <button className="acct-mini" onClick={auth.signOutDiscord}>Sign out</button>
              </div>
            </div>

            <div className="acct-section">
              <div className="acct-section-head">
                <span className="acct-eyebrow">— STEAM</span>
                <span className={"acct-status " + (session.steam ? "ok" : "dim")}>
                  {session.steam ? "LINKED" : "NOT LINKED"}
                </span>
              </div>
              {session.steam ? (
                <div className="acct-row">
                  <ProceduralAvatar seed={session.steam.avatarSeed} size={48} kind="steam" />
                  <div>
                    <div className="acct-name">{session.steam.personaName}</div>
                    <div className="acct-id mono">{session.steam.steamId64}</div>
                  </div>
                  <button className="acct-mini" onClick={auth.unlinkSteam}>Unlink</button>
                </div>
              ) : (
                <div className="acct-link-cta">
                  <p className="muted" style={{fontSize:13,margin:0,flex:1}}>
                    Link your Steam so we know which character to grant priority queue. Required for paid perks.
                  </p>
                  <button className="btn-steam" onClick={auth.linkSteam}>
                    <span className="steam-glyph">⌬</span>
                    Link Steam account
                  </button>
                </div>
              )}
            </div>

            <div className="acct-section acct-priority-section">
              <div className="acct-section-head">
                <span className="acct-eyebrow">— PRIORITY QUEUE</span>
                {session.tier && <span className="acct-status ok">ACTIVE</span>}
              </div>
              {session.tier ? (
                <div className="acct-tier-active">
                  <div style={{flex:1}}>
                    <div style={{marginBottom:8}}><TierBadge tier={session.tier} size="lg" /></div>
                    <div className="mono" style={{fontSize:12,color:"var(--ink-3)",letterSpacing:"0.1em",textTransform:"uppercase"}}>
                      RENEWS IN <span style={{color:"var(--ink)"}}>{expiresIn(session.priorityUntil)}</span>
                      {" · "}
                      QUEUE SKIP <span style={{color:"var(--accent)"}}>{tierObj?.queueSkip}</span>
                    </div>
                  </div>
                  <button className="acct-mini" onClick={auth.cancelTier}>Cancel subscription</button>
                </div>
              ) : !session.steam ? (
                <div className="muted" style={{fontSize:13}}>Link your Steam first to enable priority queue purchases.</div>
              ) : (
                <div className="acct-tier-grid">
                  {TIERS.map(t => (
                    <button key={t.key} className="acct-tier-pick" onClick={() => auth.purchaseTier(t, 30)}>
                      <div style={{color:t.color,fontFamily:"Anton",fontSize:22,letterSpacing:"0.04em"}}>{t.label.toUpperCase()}</div>
                      <div className="mono" style={{fontSize:11,color:"var(--ink-3)",letterSpacing:"0.1em"}}>${t.price}/MO</div>
                    </button>
                  ))}
                </div>
              )}
            </div>

            <div className="acct-foot">
              <div className="mono" style={{fontSize:10,color:"var(--ink-4)",letterSpacing:"0.14em"}}>
                STORED ON OUR END · DISCORD ID + STEAM ID + TIER EXPIRY · NOTHING ELSE
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.AccountButton = AccountButton;
window.AccountModal = AccountModal;
window.TIERS = TIERS;
window.TierBadge = TierBadge;
window.ProceduralAvatar = ProceduralAvatar;