"use client";

import { Building2 } from "lucide-react";
import { useEffect, useState } from "react";

import { getResidence } from "@/lib/residences-api";
import { useUserStore } from "@/stores/user-store";

export function UserHeaderInfo() {
  const user = useUserStore((s) => s.user);
  const [fetchedName, setFetchedName] = useState<string | null>(null);

  /* Nom depuis l'objet résidence embarqué dans le store */
  const storedName = user?.residence?.nom?.trim() || null;

  useEffect(() => {
    /* Si le nom est déjà dans le store, pas besoin de fetch */
    if (storedName) { setFetchedName(null); return; }

    /* Si on a un residence_id mais pas le nom, on le fetch */
    if (!user?.residence_id) { setFetchedName(null); return; }

    let cancelled = false;
    getResidence(user.residence_id)
      .then((r) => {
        if (!cancelled) setFetchedName(r.nom?.trim() || null);
      })
      .catch(() => {/* silencieux : on affiche le fallback */});

    return () => { cancelled = true; };
  }, [user?.residence_id, storedName]);

  const residenceName =
    storedName ||
    fetchedName ||
    (user?.residence_id ? `Résidence #${user.residence_id}` : null);

  return (
    <div className="flex min-w-0 items-center gap-2">
      <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
      <div className="min-w-0">
        <p className="truncate text-sm font-semibold text-foreground leading-tight">
          {residenceName ?? "Espace copropriétaire"}
        </p>
        {residenceName && (
          <p className="text-xs text-muted-foreground leading-tight">
            Espace copropriétaire
          </p>
        )}
      </div>
    </div>
  );
}