"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { IconHome, IconList, IconUser, IconHeart, IconChart, IconPin, IconSpark } from "@/components/icons";
const ITEMS = [
  { href: "/membre", label: "Tableau de bord", Icon: IconHome, exact: true },
  { href: "/membre/annonces", label: "Mes annonces", Icon: IconList },
  { href: "/membre/messages", label: "Messages", Icon: IconSpark },
  { href: "/membre/visites", label: "Visites", Icon: IconPin },
  { href: "/membre/favoris", label: "Favoris et recherches", Icon: IconHeart },
  { href: "/membre/alertes", label: "Alertes", Icon: IconChart },
  { href: "/membre/profil", label: "Profil et préférences", Icon: IconUser },
  { href: "/membre/securite", label: "Sécurité et sessions", Icon: IconUser },
];
export function MemberNav({ email, name, roles }: { email: string; name: string | null; roles: string[] }) {
  const path = usePathname(); const router = useRouter();
  const logout = async () => { await fetch("/api/auth/logout", { method: "POST" }); router.push("/"); router.refresh(); };
  return (
    <aside className="md:sticky md:top-20 self-start">
      <div className="tv-card p-3 mb-3"><p className="font-semibold truncate">{name ?? "Mon compte"}</p><p className="text-xs text-ink-3 truncate">{email}</p>{roles.length > 0 && <p className="text-[11px] text-brand-dark mt-1">{roles.join(" · ")}</p>}</div>
      <Link href="/membre/annonces/nouvelle" className="tv-btn tv-btn-primary w-full mb-3">+ Publier une propriété</Link>
      <nav className="flex md:flex-col gap-1 overflow-x-auto no-scrollbar -mx-4 px-4 md:mx-0 md:px-0" aria-label="Espace membre">
        {ITEMS.map(({ href, label, Icon, exact }) => { const active = exact ? path === href : path.startsWith(href); return <Link key={href} href={href} className={`flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm whitespace-nowrap ${active ? "bg-brand-soft text-brand-dark font-semibold" : "text-ink-2 hover:bg-surface-2"}`} aria-current={active ? "page" : undefined}><Icon width={16} height={16} /> {label}</Link>; })}
        {roles.includes("ADMIN") || roles.includes("MODERATOR") ? <Link href="/admin" className="flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm text-ink-2 hover:bg-surface-2 whitespace-nowrap">Administration</Link> : null}
        <button type="button" onClick={logout} className="flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm text-ink-3 hover:bg-surface-2 whitespace-nowrap text-left">Se déconnecter</button>
      </nav>
    </aside>
  );
}