// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";

import { useEffect, useState } from "react";

type Me = {
  name: string;
  avatarUrl: string | null;
} | null;

export default function UserButton({
  variant = "full",
}: {
  /** « icon » : pastille ronde seule (header mobile) ; « full » : avatar + prénom. */
  variant?: "full" | "icon";
}) {
  const [me, setMe] = useState<Me>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    fetch("/api/auth/me")
      .then((r) => r.json())
      .then((d) => setMe(d.user))
      .catch(() => setMe(null))
      .finally(() => setLoaded(true));
  }, []);

  if (variant === "icon") {
    const connected = loaded && me;
    return (
      <a
        href={connected ? "/compte" : "/connexion"}
        aria-label={connected ? "Mon compte KA ID" : "Se connecter"}
        className="flex h-11 w-11 items-center justify-center rounded-md border-[1.5px] border-ink bg-surface shadow-[3px_3px_0_rgba(20,24,20,0.25)] transition-colors hover:bg-lime"
      >
        {connected && me!.avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={me!.avatarUrl}
            alt=""
            width={26}
            height={26}
            className="h-[26px] w-[26px] rounded-full border border-ink object-cover"
          />
        ) : connected ? (
          <span className="gk-display flex h-[26px] w-[26px] items-center justify-center rounded-full bg-ink text-[12px] font-bold text-lime">
            {me!.name.slice(0, 1).toUpperCase()}
          </span>
        ) : (
          <svg width="19" height="19" viewBox="0 0 24 24" aria-hidden="true">
            <path
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              d="M12 12a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Zm-7.4 8.4c.9-3.6 3.9-5.7 7.4-5.7s6.5 2.1 7.4 5.7"
            />
          </svg>
        )}
      </a>
    );
  }

  if (loaded && me) {
    return (
      <a
        href="/compte"
        className="gk-display inline-flex items-center gap-2 rounded-full border-[1.5px] border-ink px-3 py-[5px] text-[13.5px] font-bold text-ink transition-colors hover:bg-lime"
        aria-label="Mon compte KA ID"
      >
        {me.avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={me.avatarUrl}
            alt=""
            width={22}
            height={22}
            className="h-[22px] w-[22px] rounded-full border border-ink object-cover"
          />
        ) : (
          <span className="flex h-[22px] w-[22px] items-center justify-center rounded-full bg-ink text-[11px] text-lime">
            {me.name.slice(0, 1).toUpperCase()}
          </span>
        )}
        {me.name.split(" ")[0]}
      </a>
    );
  }

  return (
    <a
      href="/connexion"
      className="gk-display inline-block rounded-full border-[1.5px] border-ink px-4 py-[7px] text-[13.5px] font-bold text-ink transition-colors hover:bg-lime"
    >
      KA ID
    </a>
  );
}