spsays-training/components/profile/profile-sidebar.tsx

"use client";

/**
 * ProfileSidebar — the navigation rail for /u/me.
 *
 *   • Desktop (md+): permanent left column, ~240px wide, sticky below the
 *     SiteHeader so it stays in view while content scrolls.
 *   • Mobile: a hamburger button reveals the same nav as a left drawer.
 *
 * Items are intentionally just three (Profile / Collections / Bookmarks) to
 * keep the surface focused; "Log out" sits as a footer action separated by
 * a divider.
 */

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { User as UserIcon, FolderOpen, Bookmark, LogOut, Menu } from "lucide-react";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { useAuth } from "@/components/auth/auth-provider";
import type { User } from "@/lib/auth";
import { cn } from "@/lib/utils";

type NavItem = {
  href: string;
  label: string;
  icon: typeof UserIcon;
  /** Match only when pathname === href; otherwise startsWith is used. */
  exact?: boolean;
};

const ITEMS: NavItem[] = [
  { href: "/u/me", label: "Profile", icon: UserIcon, exact: true },
  { href: "/u/me/collections", label: "Collections", icon: FolderOpen },
  { href: "/u/me/bookmarks", label: "Bookmarks", icon: Bookmark },
];

export function ProfileSidebar({ user }: { user: User }) {
  return (
    <>
      {/* Desktop rail — always visible on md+ */}
      <aside className="hidden md:block w-60 shrink-0">
        <div className="sticky top-20 space-y-4">
          <SidebarHeader user={user} />
          <SidebarNav onItemClick={() => {}} />
          <SidebarFooter />
        </div>
      </aside>

      {/* Mobile trigger + drawer */}
      <MobileSidebar user={user} />
    </>
  );
}

function MobileSidebar({ user }: { user: User }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="md:hidden mb-4">
      <Drawer open={open} onOpenChange={setOpen} direction="left">
        <DrawerTrigger
          className={cn(
            "inline-flex items-center gap-2 rounded-lg border border-border bg-card",
            "px-3 h-10 text-sm font-medium text-foreground hover:bg-muted transition-colors",
          )}
        >
          <Menu className="size-4" />
          Library menu
        </DrawerTrigger>
        <DrawerContent direction="left" className="h-full w-72 max-w-[80%]">
          <DrawerHeader className="text-left border-b border-border pb-4">
            <DrawerTitle className="font-[family-name:var(--font-title)] font-semibold uppercase tracking-[0.14em] text-sm">
              Your library
            </DrawerTitle>
            <DrawerDescription className="sr-only">
              Switch between profile, collections, and bookmarks.
            </DrawerDescription>
          </DrawerHeader>
          <div className="overflow-y-auto flex-1 p-4 space-y-4">
            <SidebarHeader user={user} />
            <SidebarNav onItemClick={() => setOpen(false)} />
            <SidebarFooter />
          </div>
        </DrawerContent>
      </Drawer>
    </div>
  );
}

function SidebarHeader({ user }: { user: User }) {
  return (
    <div className="flex items-center gap-3 px-3 py-3 rounded-lg bg-card ring-1 ring-foreground/10">
      <Avatar src={user.avatar_url} name={user.name} />
      <div className="min-w-0">
        <p className="text-sm font-semibold text-foreground truncate">
          {user.name}
        </p>
        <p className="text-xs text-muted-foreground truncate">@{user.handle}</p>
      </div>
    </div>
  );
}

function SidebarNav({ onItemClick }: { onItemClick: () => void }) {
  const pathname = usePathname();
  return (
    <nav className="space-y-0.5" aria-label="Library sections">
      {ITEMS.map((item) => {
        const active = item.exact
          ? pathname === item.href
          : pathname.startsWith(item.href);
        const Icon = item.icon;
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onItemClick}
            className={cn(
              "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
              active
                ? "bg-primary/10 text-primary"
                : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
          >
            <Icon className="size-4" />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}

function SidebarFooter() {
  const { logOut } = useAuth();
  const router = useRouter();
  async function onLogOut() {
    await logOut();
    router.push("/");
    router.refresh();
  }
  return (
    <div className="pt-3 border-t border-border">
      <button
        type="button"
        onClick={onLogOut}
        className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
      >
        <LogOut className="size-4" />
        Log out
      </button>
    </div>
  );
}

function Avatar({ src, name }: { src: string | null; name: string }) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={40}
        height={40}
        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
        unoptimized
      />
    );
  }
  const initials =
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?";
  return (
    <div className="size-10 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
      {initials}
    </div>
  );
}