/**
 * Trouve-KA — bouton compte KA ID (header)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * « Se connecter avec KA » : délègue l'identité au hub groupe-ka.com via
 * /api/auth/ka/login (SSO KA ID). Une fois connecté : nom + déconnexion.
 * La création de compte se fait TOUJOURS sur le hub (groupe-ka.com/connexion).
 */

"use client";

import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";

type KaUser = {
  ka_id: string;
  email: string;
  name: string;
  picture: string;
};

export function AuthButton() {
  const [user, setUser] = useState<KaUser | null>(null);
  const [ready, setReady] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    let active = true;
    fetch("/api/auth/me", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : { user: null }))
      .then((d: { user: KaUser | null }) => {
        if (active) setUser(d.user);
      })
      .catch(() => {})
      .finally(() => {
        if (active) setReady(true);
      });
    return () => {
      active = false;
    };
  }, []);

  const logout = async () => {
    try {
      await fetch("/api/auth/logout", { method: "POST" });
    } catch {
      /* réseau indisponible : on recharge quand même */
    }
    location.reload();
  };

  if (!ready) {
    return <span className="inline-block h-[44px] w-[150px]" aria-hidden="true" />;
  }

  if (user) {
    return (
      <span className="flex items-center gap-2">
        <span
          className="gk-display hidden max-w-[140px] truncate text-[13px] font-bold text-ink sm:inline"
          title={user.email || user.ka_id}
        >
          {user.name || "Membre KA"}
        </span>
        <button
          type="button"
          onClick={logout}
          className="gk-display inline-flex min-h-[44px] items-center rounded-full border-[1.5px] border-ink bg-surface px-4 text-[13px] font-bold text-ink transition-colors hover:bg-[var(--accent-soft)]"
        >
          Se déconnecter
        </button>
      </span>
    );
  }

  return (
    <a
      href={`/api/auth/ka/login?next=${encodeURIComponent(pathname || "/")}`}
      className="gk-display inline-flex min-h-[44px] items-center whitespace-nowrap rounded-full border-[1.5px] border-ink bg-[var(--btn-primary-bg)] px-4 text-[13px] font-bold text-[var(--btn-primary-fg)] transition-colors hover:bg-[var(--btn-primary-hover)]"
    >
      Se connecter avec KA
    </a>
  );
}