'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Bell } from 'lucide-react';

interface SessionInfo {
  user: { id: string; email: string; name: string | null; handle: string | null; avatarUrl: string | null; displayCurrency: string; role: string } | null;
  unread?: number;
}

/**
 * Header user menu (drop-in for the site header): shows "Sign in" when anonymous, otherwise the
 * avatar, unread badge and a compact menu. Fetches /api/auth/session client-side so the header
 * stays static/cacheable.
 */
export function UserMenu() {
  const [info, setInfo] = useState<SessionInfo | null>(null);
  useEffect(() => {
    let alive = true;
    fetch('/api/auth/session', { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : { user: null }))
      .then((j: SessionInfo) => {
        if (alive) setInfo(j);
      })
      .catch(() => {
        if (alive) setInfo({ user: null });
      });
    return () => {
      alive = false;
    };
  }, []);
  if (!info?.user) {
    return (
      <Link href="/login" className="hidden rounded-md border border-border px-2.5 py-1.5 text-[13px] font-medium text-fg hover:bg-inset sm:inline-flex">
        Sign in
      </Link>
    );
  }
  const u = info.user;
  const initial = (u.name ?? u.email).slice(0, 1).toUpperCase();
  return (
    <div className="flex items-center gap-1">
      <Link href="/notifications" aria-label="Inbox" className="relative inline-flex h-8 w-8 items-center justify-center rounded-md text-muted hover:bg-inset hover:text-fg">
        <Bell className="h-4 w-4" />
        {info.unread ? <span className="absolute -right-0.5 -top-0.5 min-w-[16px] rounded-full bg-alert px-1 text-center text-[10px] font-semibold leading-4 text-white">{info.unread > 99 ? '99+' : info.unread}</span> : null}
      </Link>
      <details className="relative">
        <summary className="flex cursor-pointer list-none items-center gap-2 rounded-md px-1.5 py-1 hover:bg-inset [&::-webkit-details-marker]:hidden">
          {u.avatarUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={u.avatarUrl} alt="" className="h-7 w-7 rounded-full border border-border object-cover" />
          ) : (
            <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-accent-fg">{initial}</span>
          )}
          <span className="hidden max-w-[120px] truncate text-[13px] font-medium md:inline">{u.name ?? u.email.split('@')[0]}</span>
        </summary>
        <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border border-border bg-elevated p-1.5 shadow-pop">
          <div className="px-2 py-1.5">
            <p className="truncate text-[13px] font-medium">{u.name ?? 'Collector'}</p>
            <p className="truncate text-[11px] text-subtle">{u.email}</p>
          </div>
          <div className="my-1 border-t border-border" />
          {[
            ['/collections', 'Collections'],
            ['/watchlist', 'Watchlist'],
            ['/alerts', 'Alerts'],
            ['/deals', 'Deal Radar'],
            ['/account/settings', 'Settings'],
            ...(u.handle ? [[`/u/${u.handle}`, 'Public profile']] : []),
          ].map(([href, label]) => (
            <Link key={href} href={href!} className="block rounded-sm px-2 py-1.5 text-[13px] text-muted hover:bg-inset hover:text-fg">
              {label}
            </Link>
          ))}
          <div className="my-1 border-t border-border" />
          <form action="/api/auth/logout" method="post">
            <button type="submit" className="block w-full rounded-sm px-2 py-1.5 text-left text-[13px] text-muted hover:bg-inset hover:text-fg">
              Sign out
            </button>
          </form>
        </div>
      </details>
    </div>
  );
}