// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * Bouton compte de l'en-tête (KA ID — SSO du Groupe KA).
 *   · Déconnecté : pilule « KA ID » → /api/auth/ka/login?next=<page courante>
 *   · Connecté   : avatar (ou initiale) + prénom → /compte
 * Composant client : interroge /api/auth/me au montage (session cookie httpOnly).
 */
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLang } from "./LangContext";

type MeUser = {
  ka_id: string;
  email: string;
  name: string;
  picture: string;
  provider: string;
};

export default function AccountButton() {
  const { lang } = useLang();
  const fr = lang === "fr";
  const path = usePathname();
  // undefined = chargement (on ne montre rien pour éviter le clignotement)
  const [user, setUser] = useState<MeUser | null | undefined>(undefined);

  useEffect(() => {
    let alive = true;
    fetch("/api/auth/me")
      .then((r) => r.json())
      .then((d) => alive && setUser(d?.user ?? null))
      .catch(() => alive && setUser(null));
    return () => {
      alive = false;
    };
  }, [path]);

  if (user === undefined) {
    return <span className="min-h-[36px] w-[52px]" aria-hidden="true" />;
  }

  if (user === null) {
    return (
      <a
        href={`/api/auth/ka/login?next=${encodeURIComponent(path || "/")}`}
        className="vp-mono inline-flex min-h-[36px] items-center rounded-[2px] bg-ink px-3.5 py-1.5 text-[11px] font-medium uppercase tracking-[0.1em] text-paper transition-colors hover:bg-accent"
        title={fr ? "Se connecter avec KA ID" : "Sign in with KA ID"}
      >
        KA&nbsp;ID
      </a>
    );
  }

  const prenom = (user.name || user.email).split(" ")[0];
  return (
    <Link
      href="/compte"
      className="group inline-flex min-h-[36px] items-center gap-2 py-1"
      title={fr ? "Mon compte — carte de membre Groupe KA" : "My account — Groupe KA member card"}
    >
      {user.picture ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={user.picture}
          alt=""
          referrerPolicy="no-referrer"
          className="h-7 w-7 rounded-full object-cover grayscale transition-[filter] group-hover:grayscale-0"
        />
      ) : (
        <span className="vp-display flex h-7 w-7 items-center justify-center rounded-full bg-ink text-[13px] font-bold text-paper">
          {prenom.charAt(0).toUpperCase()}
        </span>
      )}
      <span className="vp-display max-w-[92px] truncate border-b-2 border-transparent text-[13px] font-bold text-ink group-hover:border-accent">
        {prenom}
      </span>
    </Link>
  );
}