import { DASHBOARD_PATH } from "@/lib/deployment";
import {
  LayoutDashboard, BarChart3, FileBarChart, ArrowLeftRight, TrendingUp,
  Lightbulb, Building2, ChevronRight, ListTodo, ListChecks,
  Sun, Moon, Database, Link2, Sliders, UserCircle, LogOut, ChevronsUpDown,
  PanelLeftClose, PanelLeft, Bell, ExternalLink, KeyRound, Wallet, History,
  type LucideIcon,
} from "lucide-react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useMemo } from "react";
import { NavLink } from "@/components/NavLink";
import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel,
  SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarFooter, SidebarHeader, useSidebar,
} from "@/components/ui/sidebar";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
  DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent,
  DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useTheme } from "@/context/ThemeContext";
import { useAuth } from "@/context/AuthContext";
import { useNotifications } from "@/hooks/useNotifications";
import { useActivity } from "@/hooks/useActivity";
import { usePendingMerchantCategories } from "@/hooks/useMerchantCategoryReview";
import { useSuggestedTransfers } from "@/hooks/useTransfers";
import { useSuggestedDuplicates } from "@/hooks/useDuplicates";
import { activityTitle } from "@/lib/activity";
import { formatDate } from "@/lib/format";
import { formatDistanceToNow } from "date-fns";
import { cn } from "@/lib/utils";
import { accountDisplayName, accountMask, isBankAccount, isAssetAccount } from "@/lib/accounts";
import { Logo } from "@/components/brand/Logo";
import type { Account } from "@/types/finance";

const ICON_SIZE = 18;
const ICON_STROKE = 1.5;

const mainNav = [
  { title: "Home", url: DASHBOARD_PATH, icon: LayoutDashboard },
  { title: "Analytics", url: "/analytics", icon: BarChart3 },
  { title: "Reports", url: "/reports", icon: FileBarChart },
  { title: "Transactions", url: "/transactions", icon: ArrowLeftRight },
];

/** Children of the Financial Planning parent item. */
const planningChildren = [
  { title: "Goals Tracker", url: "/goals" },
  { title: "Budgets", url: "/budgets" },
];

// Non-financial "life" surfaces, the start of the control-panel vision:
// Todos today, room for Health/etc. alongside it later.
const lifeNav = [
  { title: "Todos", url: "/todos", icon: ListTodo },
];

type NavItem = { title: string; url: string; icon: LucideIcon; badge?: number };

const navLinkBase =
  "flex items-center gap-3 px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md";
const navLinkActive = "bg-sidebar-accent text-sidebar-accent-foreground font-medium";

/** Chevron button; rotation uses Collapsible root `group` + `group-data-[state=open]` on the icon (Radix sets data-state on root). */
const collapsibleChevronTriggerClass =
  "absolute right-1 top-1/2 z-10 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-sidebar-foreground outline-none ring-sidebar-ring transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 data-[state=open]:bg-sidebar-accent/60";

const collapsibleChevronIconClass =
  "size-4 shrink-0 transition-transform duration-200 ease-out group-data-[state=open]:rotate-90";

/** Group accounts under their institution, each group sorted by name. */
function groupByInstitution(list: Account[]) {
  const m = new Map<string, Account[]>();
  list.forEach((a) => {
    const key = (a.institution || "Other").trim() || "Other";
    if (!m.has(key)) m.set(key, []);
    m.get(key)!.push(a);
  });
  return Array.from(m.entries())
    .map(([institution, accs]) => ({
      institution,
      accounts: [...accs].sort((x, y) => (accountDisplayName(x) || x.mask || "").localeCompare(accountDisplayName(y) || y.mask || "")),
    }))
    .sort((a, b) => a.institution.localeCompare(b.institution));
}

export function AppSidebar() {
  const { state, toggleSidebar } = useSidebar();
  const collapsed = state === "collapsed";
  const { investmentAccounts, accounts, dateFormat } = useFinanceData();
  const notifications = useNotifications();
  const unreadCount = notifications.filter((n) => n.actionNeeded).length;
  const { data: recentActivity = [] } = useActivity(4);
  const { data: pendingCategories = [] } = usePendingMerchantCategories();
  const { data: suggestedTransfers = [] } = useSuggestedTransfers();
  const { data: suggestedDuplicates = [] } = useSuggestedDuplicates();
  const reviewCount = pendingCategories.length + suggestedTransfers.length + suggestedDuplicates.length;
  const lifeNavItems: NavItem[] = [
    ...lifeNav,
    { title: "Review", url: "/review", icon: ListChecks, badge: reviewCount },
  ];
  const { theme, toggleTheme } = useTheme();
  const { user, logout } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const displayName = user?.name || user?.email?.split("@")[0] || "Account";
  const avatarInitial = (user?.name || user?.email || "?").trim().charAt(0).toUpperCase();
  const isInvestmentsActive = location.pathname.startsWith("/investments");
  // An account's detail page (/accounts/<id>) belongs to whichever list it is
  // on: Accounts for bank accounts, Assets for the rest.
  const detailId = location.pathname.startsWith("/accounts/") ? decodeURIComponent(location.pathname.split("/")[2] ?? "") : "";
  const filteredId = location.pathname === "/transactions" ? new URLSearchParams(location.search).get("account") : null;
  const focused = accounts.find((a) => a.id === (detailId || filteredId));
  const onAsset = !!focused && isAssetAccount(focused.type);
  const isAccountsActive = location.pathname === "/accounts" || (!!focused && !onAsset);
  const isAssetsActive = location.pathname === "/assets" || onAsset;

  const bankTree = useMemo(() => groupByInstitution(accounts.filter((a) => isBankAccount(a.type))), [accounts]);
  const assetTree = useMemo(() => groupByInstitution(accounts.filter((a) => isAssetAccount(a.type))), [accounts]);

  const renderAccountGroup = (opts: {
    title: string; url: string; icon: typeof Building2; active: boolean;
    tree: ReturnType<typeof groupByInstitution>; emptyLabel: string; emptyTo: string;
  }) => (
    <SidebarMenuItem>
      <Collapsible defaultOpen={opts.active} className="group w-full min-w-0">
        <div className="relative w-full">
          <SidebarMenuButton asChild isActive={opts.active} className="pr-9">
            <Link to={opts.url} className="gap-2">
              <opts.icon size={ICON_SIZE} strokeWidth={ICON_STROKE} className="shrink-0" />
              <span className="sidebar-label truncate">{opts.title}</span>
            </Link>
          </SidebarMenuButton>
          <CollapsibleTrigger className={collapsibleChevronTriggerClass} aria-label={`Toggle ${opts.title.toLowerCase()} menu`}>
            <ChevronRight className={collapsibleChevronIconClass} strokeWidth={ICON_STROKE} />
          </CollapsibleTrigger>
        </div>
        <CollapsibleContent className="sidebar-label overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
          <div className="mt-1 space-y-2 border-l border-sidebar-border/50 pl-2.5 ml-2 py-0.5">
            {opts.tree.length === 0 ? (
              <SidebarMenu className="gap-0.5">
                <SidebarMenuItem>
                  <SidebarMenuButton asChild size="sm">
                    <Link to={opts.emptyTo} className="text-muted-foreground">{opts.emptyLabel}</Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            ) : (
              opts.tree.map(({ institution, accounts: instAccounts }) => (
                <div key={institution} className="min-w-0 space-y-0.5">
                  <p className="truncate px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                    {institution}
                  </p>
                  <SidebarMenu className="gap-0.5">
                    {instAccounts.map((acc) => {
                      const acctUrl = `/accounts/${encodeURIComponent(acc.id)}`;
                      const isAcctActive = location.pathname === acctUrl;
                      const name = accountDisplayName(acc);
                      const mask = accountMask(acc);
                      const label = mask ? `${name} ··${mask}` : name;
                      return (
                        <SidebarMenuItem key={acc.id}>
                          <SidebarMenuButton asChild size="sm" isActive={isAcctActive}>
                            <Link to={acctUrl} className="min-w-0">
                              <span className="w-full truncate text-left" title={label}>
                                {name}
                                {mask ? <span className="text-muted-foreground font-normal"> ··{mask}</span> : null}
                              </span>
                            </Link>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      );
                    })}
                  </SidebarMenu>
                </div>
              ))
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>
    </SidebarMenuItem>
  );

  const renderNavItems = (items: NavItem[]) => (
    <SidebarMenu>
      {items.map((item) => (
        <SidebarMenuItem key={item.title}>
          <SidebarMenuButton asChild>
            <NavLink
              to={item.url}
              end={item.url === DASHBOARD_PATH}
              className={navLinkBase}
              activeClassName={navLinkActive}
            >
              <item.icon size={ICON_SIZE} strokeWidth={ICON_STROKE} className="shrink-0" />
              <span className="sidebar-label flex-1">{item.title}</span>
              {!!item.badge && (
                <span className="sidebar-label ml-auto rounded-full bg-chart-yellow/15 px-1.5 text-[11px] font-medium tabular-nums text-chart-yellow">
                  {item.badge}
                </span>
              )}
            </NavLink>
          </SidebarMenuButton>
        </SidebarMenuItem>
      ))}
    </SidebarMenu>
  );

  return (
    <Sidebar collapsible="icon" className="border-r border-sidebar-border/50">
      {/* Header, brand + collapse toggle aligned with breadcrumbs */}
      <SidebarHeader className="p-0">
        <div className={cn(
          "flex items-center h-12 px-4 border-b border-sidebar-border/30",
          collapsed ? "justify-center px-2" : "justify-between"
        )}>
          <Link
            to={DASHBOARD_PATH}
            aria-label="KHMYS home"
            className="text-base font-semibold text-sidebar-foreground tracking-tight sidebar-label whitespace-nowrap rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
          >
            <Logo tone="app" className="h-7" />
          </Link>
          <button
            onClick={toggleSidebar}
            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent transition-colors shrink-0"
            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          >
            {collapsed ? (
              <PanelLeft size={16} strokeWidth={ICON_STROKE} />
            ) : (
              <PanelLeftClose size={16} strokeWidth={ICON_STROKE} />
            )}
          </button>
        </div>
      </SidebarHeader>

      <SidebarContent className="overflow-y-auto scrollbar-hide">
        {/* Main nav */}
        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold px-3 mb-0.5 sidebar-label">Overview</SidebarGroupLabel>
          <SidebarGroupContent>
            {renderNavItems(mainNav)}
          </SidebarGroupContent>
        </SidebarGroup>

        {/* Investments */}
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <Collapsible defaultOpen={isInvestmentsActive} className="group w-full min-w-0">
                  <div className="relative w-full">
                    <SidebarMenuButton asChild isActive={isInvestmentsActive} className="pr-9">
                      <Link to="/investments" className="gap-2">
                        <TrendingUp size={ICON_SIZE} strokeWidth={ICON_STROKE} className="shrink-0" />
                        <span className="sidebar-label truncate">Investments</span>
                      </Link>
                    </SidebarMenuButton>
                    <CollapsibleTrigger className={collapsibleChevronTriggerClass} aria-label="Toggle investments menu">
                      <ChevronRight className={collapsibleChevronIconClass} strokeWidth={ICON_STROKE} />
                    </CollapsibleTrigger>
                  </div>
                  <CollapsibleContent className="sidebar-label overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
                    <div className="mt-1 space-y-0.5 border-l border-sidebar-border/50 pl-2.5 ml-2 py-0.5">
                      <SidebarMenu className="gap-0.5">
                        {investmentAccounts.map((acct) => (
                          <SidebarMenuItem key={acct.id}>
                            <SidebarMenuButton asChild size="sm" isActive={location.pathname === `/investments/${acct.id}`}>
                              <NavLink to={`/investments/${acct.id}`}>{acct.label}</NavLink>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                        ))}
                      </SidebarMenu>
                    </div>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        {/* Accounts (everyday bank accounts) and Assets (investments, property, vehicles, loans) */}
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {renderAccountGroup({
                title: "Accounts", url: "/accounts", icon: Building2, active: isAccountsActive,
                tree: bankTree, emptyLabel: "Connect accounts", emptyTo: "/settings/sources?connect=1",
              })}
              {renderAccountGroup({
                title: "Assets", url: "/assets", icon: Wallet, active: isAssetsActive,
                tree: assetTree, emptyLabel: "Add an asset", emptyTo: "/assets",
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        {/* Planning */}
        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold px-3 mb-0.5 sidebar-label">Plan</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <Collapsible defaultOpen className="group w-full min-w-0">
                  <div className="relative w-full">
                    <SidebarMenuButton asChild isActive={location.pathname.startsWith("/planning")} className="pr-9">
                      <Link to="/planning" className="gap-2">
                        <Lightbulb size={ICON_SIZE} strokeWidth={ICON_STROKE} className="shrink-0" />
                        <span className="sidebar-label truncate">Financial Planning</span>
                      </Link>
                    </SidebarMenuButton>
                    <CollapsibleTrigger className={collapsibleChevronTriggerClass} aria-label="Toggle financial planning menu">
                      <ChevronRight className={collapsibleChevronIconClass} strokeWidth={ICON_STROKE} />
                    </CollapsibleTrigger>
                  </div>
                  <CollapsibleContent className="sidebar-label overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
                    <div className="mt-1 space-y-0.5 border-l border-sidebar-border/50 pl-2.5 ml-2 py-0.5">
                      <SidebarMenu className="gap-0.5">
                        {planningChildren.map((item) => (
                          <SidebarMenuItem key={item.url}>
                            <SidebarMenuButton asChild size="sm" isActive={location.pathname.startsWith(item.url)}>
                              <NavLink to={item.url}>{item.title}</NavLink>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                        ))}
                      </SidebarMenu>
                    </div>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        {/* Life, beyond finances */}
        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold px-3 mb-0.5 sidebar-label">Life</SidebarGroupLabel>
          <SidebarGroupContent>
            {renderNavItems(lifeNavItems)}
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      {/* Footer: User avatar + Notification bell */}
      <SidebarFooter className="p-2 border-t border-sidebar-border/30">
        <div className={cn("flex items-center gap-2", collapsed && "flex-col")}>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className={cn(
                "flex items-center gap-3 flex-1 min-w-0 px-2 py-2 rounded-lg text-sm text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors",
                collapsed && "justify-center px-0 w-full"
              )}>
                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 text-xs font-semibold uppercase text-primary">
                  {avatarInitial}
                </div>
                <div className="flex flex-col min-w-0 text-left sidebar-label">
                  <span className="font-medium truncate leading-tight">{displayName}</span>
                  {user?.email && (
                    <span className="text-xs text-muted-foreground truncate leading-tight">{user.isDemo ? "Read-only demo" : user.email}</span>
                  )}
                </div>
                <ChevronsUpDown size={14} strokeWidth={ICON_STROKE} className="ml-auto shrink-0 text-muted-foreground sidebar-label" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="top" align="start" className="w-60">
              <DropdownMenuLabel className="flex flex-col gap-0.5">
                <span className="text-sm font-medium truncate">{displayName}</span>
                {user?.email && (
                  <span className="text-xs font-normal text-muted-foreground truncate">{user.isDemo ? "Read-only demo" : user.email}</span>
                )}
              </DropdownMenuLabel>
              <DropdownMenuSeparator />

              <DropdownMenuItem className="gap-2" onClick={() => navigate("/settings/account")}>
                <UserCircle size={16} strokeWidth={ICON_STROKE} /> Profile
              </DropdownMenuItem>
              <DropdownMenuItem className="gap-2" onClick={() => navigate("/notifications")}>
                <Bell size={16} strokeWidth={ICON_STROKE} /> Notifications
                {unreadCount > 0 && (
                  <span className="ml-auto rounded-full bg-chart-red/15 px-1.5 text-[11px] font-medium tabular-nums text-chart-red">
                    {unreadCount}
                  </span>
                )}
              </DropdownMenuItem>
              <DropdownMenuItem className="gap-2" onClick={() => navigate("/settings/sources")}>
                <Database size={16} strokeWidth={ICON_STROKE} /> Data Sources
              </DropdownMenuItem>
              <DropdownMenuItem className="gap-2" onClick={() => navigate("/settings/brokerages")}>
                <Link2 size={16} strokeWidth={ICON_STROKE} /> Brokerages
              </DropdownMenuItem>
              <DropdownMenuItem className="gap-2" onClick={() => navigate("/settings/preferences")}>
                <Sliders size={16} strokeWidth={ICON_STROKE} /> Preferences
              </DropdownMenuItem>
              <DropdownMenuItem className="gap-2" onClick={() => navigate("/settings/api-access")}>
                <KeyRound size={16} strokeWidth={ICON_STROKE} /> API Access
              </DropdownMenuItem>

              <DropdownMenuSeparator />

              <DropdownMenuSub>
                <DropdownMenuSubTrigger className="gap-2">
                  <Sun size={16} strokeWidth={ICON_STROKE} /> Appearance
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuRadioGroup value={theme} onValueChange={() => toggleTheme()}>
                    <DropdownMenuRadioItem value="light" className="gap-2" onSelect={(e) => e.preventDefault()}>
                      <Sun size={14} strokeWidth={ICON_STROKE} /> Light
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="dark" className="gap-2" onSelect={(e) => e.preventDefault()}>
                      <Moon size={14} strokeWidth={ICON_STROKE} /> Dark
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>

              <DropdownMenuSeparator />

              <DropdownMenuItem
                className="gap-2 text-destructive focus:text-destructive"
                onClick={() => logout()}
              >
                <LogOut size={16} strokeWidth={ICON_STROKE} /> Sign out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Notification bell with popover panel */}
          <Popover>
            <PopoverTrigger asChild>
              <button
                className={cn(
                  "relative p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent transition-colors shrink-0",
                  location.pathname === "/notifications" && "text-foreground bg-sidebar-accent"
                )}
                aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} need attention` : "Notifications"}
              >
                <Bell size={16} strokeWidth={ICON_STROKE} />
                {unreadCount > 0 && (
                  <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-chart-red" aria-hidden />
                )}
              </button>
            </PopoverTrigger>
            <PopoverContent side="right" align="end" sideOffset={8} className="w-80 p-0">
              <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
                <h4 className="text-sm font-semibold">Alerts</h4>
                <button
                  onClick={() => navigate("/notifications")}
                  className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                  aria-label="View all notifications"
                >
                  <ExternalLink size={14} strokeWidth={ICON_STROKE} />
                </button>
              </div>
              {notifications.length === 0 ? (
                <div className="px-4 py-6 text-center">
                  <Bell size={24} strokeWidth={1.5} className="text-muted-foreground/40 mx-auto mb-2" />
                  <p className="text-sm text-muted-foreground">Nothing needs attention</p>
                </div>
              ) : (
                <div className="max-h-80 overflow-y-auto py-1">
                  {notifications.slice(0, 6).map((n) => (
                    <Link
                      key={n.id}
                      to={n.href}
                      className="flex items-start gap-2.5 px-4 py-2.5 hover:bg-muted/50 transition-colors"
                    >
                      <span
                        className={cn(
                          "mt-1.5 h-1.5 w-1.5 rounded-full shrink-0",
                          n.level === "critical" ? "bg-chart-red" : n.level === "warning" ? "bg-chart-yellow" : "bg-primary"
                        )}
                        aria-hidden
                      />
                      <div className="min-w-0 flex-1">
                        <p className="text-sm text-foreground truncate">{n.title}</p>
                        <p className="text-xs text-muted-foreground truncate">{n.detail}</p>
                        <p className="text-[11px] text-muted-foreground/70 mt-0.5 tabular-nums">
                          {formatDate(n.date, dateFormat, "short")}
                        </p>
                      </div>
                    </Link>
                  ))}
                  {notifications.length > 6 && (
                    <button
                      onClick={() => navigate("/notifications")}
                      className="block w-full px-4 py-2 text-xs text-primary hover:text-primary/80 text-center border-t border-border/50 mt-1"
                    >
                      View all {notifications.length}
                    </button>
                  )}
                </div>
              )}

              {/* Every create/update/delete + login, not just the alerts
                  above - a quick "did that actually save" glance without
                  leaving the current page. Full history lives on the
                  Activity tab, this is only ever the last few. */}
              <div className="border-t border-border/50">
                <div className="flex items-center gap-1.5 px-4 pt-2.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">
                  <History size={11} strokeWidth={1.75} /> Recent activity
                </div>
                {recentActivity.length === 0 ? (
                  <p className="px-4 pb-3 text-xs text-muted-foreground">Nothing yet</p>
                ) : (
                  <div className="pb-1">
                    {/* Read-only, like the full Activity tab: a log entry
                        isn't a link to anything useful. */}
                    {recentActivity.map((a) => (
                      <div
                        key={a.id}
                        className="flex items-baseline justify-between gap-3 px-4 py-1.5"
                      >
                        <p className="text-xs text-foreground truncate">{activityTitle(a)}</p>
                        <span className="text-[10px] text-muted-foreground/70 tabular-nums shrink-0">
                          {a.at ? formatDistanceToNow(new Date(a.at), { addSuffix: true }) : ""}
                        </span>
                      </div>
                    ))}
                  </div>
                )}
                <button
                  onClick={() => navigate("/notifications?tab=activity")}
                  className="block w-full px-4 py-2 text-xs text-primary hover:text-primary/80 text-center border-t border-border/50"
                >
                  View all activity
                </button>
              </div>
            </PopoverContent>
          </Popover>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}