import Link from "next/link";
import { ClipboardList, Coins } from "lucide-react";
import { getCurrentUser } from "@/lib/session";
import { ListemButonu } from "@/features/liste/components/listem-butonu";
import { ListeSenkron } from "@/features/liste/components/liste-senkron";
import { RybbitIdentify } from "@/components/rybbit-identify";
import { GirisLinki } from "./giris-linki";
import { SignOutButton } from "./sign-out-button";

/**
 * Suspense fallback'i: girişsiz görünümle aynı yükseklik/genişlikte sessiz
 * bir pill — session sorgusu akarken header zıplamasın (CLS yok).
 */
export function UserNavFallback() {
  return (
    <div
      className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2"
      aria-hidden
    >
      <div className="h-9 w-16 rounded-full bg-slate-900/10 sm:h-12 sm:w-28" />
    </div>
  );
}

export async function UserNav() {
  const u = await getCurrentUser();

  // Manuel liste localStorage'ta yaşadığı için Listem girişsiz de çalışır
  if (!u) {
    return (
      <div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
        <RybbitIdentify kullaniciId={null} />
        <ListeSenkron userId={null} />
        <ListemButonu />
        <GirisLinki />
      </div>
    );
  }

  return (
    <div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
      <RybbitIdentify kullaniciId={u.id} eposta={u.email} isim={u.name} />
      <ListeSenkron userId={u.id} />
      <ListemButonu />
      {/* Yapay Zeka raporunun kalıcı kapısı: girişli kullanıcı /listem'i
          navbar'dan bulamıyordu (çekmece butonu manuel liste boşken hiç
          görünmüyor). Rapor var mı diye DB'ye sorulmuyor — navbar'ın TTFB'si
          bozulmasın; liste boşsa sayfadaki ListemBosCta karşılıyor.
          Sınıf seti kredi pill'iyle birebir aynı (tek kaynak). */}
      <Link
        href="/listem"
        aria-label="Yapay Zeka Listem"
        title="Yapay Zeka'nın kurduğu 24 tercihlik listen"
        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
      >
        <ClipboardList className="size-3.5 text-primary sm:size-4" aria-hidden />
        {/* ListemButonu:39 ile aynı görünürlük deseni: 375 px'te ve lg–xl
            arasında metin gizli, ikon+aria-label anlamı taşıyor. */}
        <span className="hidden sm:inline lg:hidden xl:inline">
          Yapay Zeka Listem
        </span>
      </Link>
      <Link
        href="/paket?kaynak=nav"
        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
        title="Kredilerin — yüklemek için tıkla"
      >
        <Coins className="size-3.5 text-amber-500 sm:size-4" aria-hidden />
        <span className="tabular-nums">{u.creditBalance}</span>
        {/* Etiket yalnızca md–lg arası: daha darda logo kesiliyor, lg üstünde
            ortadaki nav ile yer dar (konteyner 1152'de sabit). İkon+sayı ve
            title her genişlikte anlamı taşıyor. */}
        <span className="hidden md:inline lg:hidden">kredi</span>
      </Link>
      <SignOutButton />
    </div>
  );
}