import React from "react";
import { decodeJwt, readAccessToken } from "../../lib/jwt";

export default function AuthPill() {
  const token = readAccessToken();
  const claims = decodeJwt(token);
  const username = claims?.preferred_username || claims?.name || "Guest";
  const emailVerified =
    typeof claims?.email_verified === "boolean" ? claims.email_verified :
    (typeof claims?.emailVerified === "boolean" ? claims.emailVerified : null);

  const initial = (username?.[0] || "G").toUpperCase();

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{
        width: 34, height: 34, borderRadius: 999,
        background: "rgba(255,255,255,0.12)",
        border: "1px solid rgba(255,255,255,0.18)",
        display: "grid", placeItems: "center",
        fontWeight: 900
      }}>
        {initial}
      </div>
      <div style={{ display: "grid", lineHeight: 1.05 }}>
        <div style={{ fontWeight: 900, fontSize: 14 }}>
          {username}
          {emailVerified === true ? <span style={{ marginLeft: 8, fontSize: 12, opacity: 0.85 }}>✅</span> : null}
        </div>
        <div style={{ fontSize: 12, opacity: 0.75 }}>
          {token ? "Connecté" : "Invité"}
        </div>
      </div>
    </div>
  );
}
