"use client";

import { usePathname, Link } from "@/i18n/navigation";
import { logoutAction } from "@/lib/actions/auth";

export type AccountNavItem = { href: string; label: string; exact?: boolean };

// Linke Spalte des Konto-Bereichs (Sidebar-Dashboard): Avatar + Name,
// vertikale Navigation mit Aktiv-Zustand, darunter optional der Admin-
// Einstieg und ganz unten Ausloggen. Auf schmalen Bildschirmen liegt sie
// als waagerechte, scrollbare Leiste über dem Inhalt.
export function AccountSidebar({
  name,
  avatarUrl,
  nav,
  adminHref,
  adminLabel,
  locale,
  logoutLabel,
}: {
  name: string;
  avatarUrl: string | null;
  nav: AccountNavItem[];
  adminHref?: string;
  adminLabel?: string;
  locale: string;
  logoutLabel: string;
}) {
  const pathname = usePathname();
  const isActive = (item: AccountNavItem) =>
    item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(`${item.href}/`);

  return (
    <aside className="lg:sticky lg:top-28 lg:self-start">
      <div className="flex items-center gap-3 lg:flex-col lg:items-start lg:gap-4">
        {avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={avatarUrl}
            alt=""
            className="h-14 w-14 shrink-0 rounded-full border border-white/15 object-cover"
          />
        ) : (
          <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full border border-white/15 bg-[var(--rk-surface)] text-lg text-[var(--rk-ink-muted)]">
            {name.slice(0, 1).toUpperCase()}
          </div>
        )}
        <div className="min-w-0">
          <p className="text-[0.7rem] uppercase tracking-[0.22em] text-[var(--rk-ink-muted)]">
            {locale === "en" ? "My account" : "Mein Konto"}
          </p>
          <p className="rk-wordmark truncate text-lg">{name}</p>
        </div>
      </div>

      <nav className="mt-6 flex gap-1 overflow-x-auto pb-1 lg:mt-8 lg:flex-col lg:overflow-visible lg:pb-0">
        {nav.map((item) => {
          const active = isActive(item);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`shrink-0 rounded-lg px-3 py-2 text-sm transition-colors lg:shrink ${
                active
                  ? "bg-[var(--rk-surface)] text-[var(--rk-ink)]"
                  : "text-[var(--rk-ink-muted)] hover:bg-white/5 hover:text-[var(--rk-ink)]"
              }`}
            >
              <span className="flex items-center gap-2">
                <span
                  className={`h-1 w-1 rounded-full transition-colors ${
                    active ? "bg-[var(--rk-accent)]" : "bg-transparent"
                  }`}
                />
                {item.label}
              </span>
            </Link>
          );
        })}
      </nav>

      {adminHref && (
        <a
          href={adminHref}
          className="mt-2 hidden rounded-lg px-3 py-2 text-sm text-[var(--rk-accent)] transition-colors hover:bg-[var(--rk-accent)]/10 lg:block"
        >
          {adminLabel} →
        </a>
      )}

      <form action={logoutAction.bind(null, locale)} className="mt-6 hidden lg:block">
        <button
          type="submit"
          className="rounded-lg px-3 py-2 text-sm text-[var(--rk-ink-muted)] transition-colors hover:bg-white/5 hover:text-[var(--rk-ink)]"
        >
          {logoutLabel}
        </button>
      </form>
    </aside>
  );
}