// @design-system: layout/VendorSidebar
/**
 * VendorSidebar — collapsible desktop navigation sidebar for the vendor console.
 *
 * Nav structure sourced from `VENDOR_NAV` in `@/lib/vendor-nav`.
 *
 * Collapse state persisted to localStorage key `vendor-sidebar-collapsed`.
 * Visible only at ≥1024px (hidden on mobile — VendorBottomNav handles mobile).
 *
 * Tokens: `--color-mode-vendor-*`, `--color-surface-raised`, `--color-border`,
 *          `--color-text-primary`, `--color-text-muted`, `--color-surface-hover`
 */

'use client';

import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { IconButton } from '@/components/ui/primitives/IconButton';
import { MDLogo } from '@/components/ui/icons/MDLogo';
import { pickLocalized } from '@/lib/i18n';
import { useLocale, useT } from '@/lib/i18n/react';
import { captureCaught } from '@/lib/observability';
import { VendorModeToggle } from '@/features/vendor-mode-toggle';
import { VENDOR_NAV, findVendorNavContext } from '@/lib/vendor-nav';
import { usePrefetchOnIntent } from '@/lib/query/prefetch-registry';

const LS_KEY = 'vendor-sidebar-collapsed';

export interface VendorSidebarProps {
  /** Current pathname — used to highlight active link. */
  currentPath: string;
  /** Render without loading vendor-specific data. */
  demo?: boolean;
  unreadTotal?: number;
  /** Extra class names. */
  className?: string;
}

/**
 * VendorSidebar
 *
 * Desktop-only collapsible sidebar.
 * `hidden lg:flex` — invisible on mobile, visible at lg+.
 */
export function VendorSidebar({
  currentPath,
  demo = false,
  unreadTotal = 0,
  className,
}: VendorSidebarProps) {
  const t = useT('vendor_sidebar');
  const { locale } = useLocale();
  const navCtx = findVendorNavContext(currentPath);
  const [collapsed, setCollapsed] = useState(false);
  const prefetchOnIntent = usePrefetchOnIntent();
  const getPrefetchProps = demo ? () => ({}) : prefetchOnIntent;

  // Rehydrate from localStorage after mount (avoid SSR mismatch)
  useEffect(() => {
    try {
      const stored = localStorage.getItem(LS_KEY);
      if (stored === 'true') queueMicrotask(() => setCollapsed(true));
    } catch (err) {
      captureCaught(err, {
        scope: 'components.ui.layout.VendorSidebar.VendorSidebar',
        severity: 'warning',
      });
      // ignore
    }
  }, []);

  function toggle() {
    setCollapsed((prev) => {
      const next = !prev;
      try {
        localStorage.setItem(LS_KEY, String(next));
      } catch (err) {
        captureCaught(err, {
          scope: 'components.ui.layout.VendorSidebar.VendorSidebar',
          severity: 'warning',
        });
        // ignore
      }
      return next;
    });
  }

  return (
    <aside
      aria-label={t('nav_label')}
      className={cn(
        'hidden flex-col lg:flex',
        'bg-surface-raised border-border border-e',
        'transition-[width] duration-200',
        collapsed ? 'w-14' : 'w-56',
        'shrink-0',
        className,
      )}
    >
      {/* Logo + mode toggle + collapse button */}
      <div
        className={cn(
          'border-border flex items-center border-b py-3',
          collapsed ? 'justify-center px-2' : 'justify-between px-4',
        )}
      >
        {!collapsed && (
          <div className="flex min-w-0 items-center gap-2">
            <a href="/vendor/dashboard" className="flex items-center gap-2">
              <MDLogo size={28} />
            </a>
            <VendorModeToggle currentMode="vendor" />
          </div>
        )}
        <IconButton
          variant="ghost"
          size="sm"
          aria-label={collapsed ? t('expand_aria') : t('collapse_aria')}
          onClick={toggle}
        >
          <Icon name={collapsed ? 'ChevronRight' : 'ChevronLeft'} size="sm" mirror />
        </IconButton>
      </div>

      {/* Nav groups */}
      <nav aria-label={t('nav_label')} className="flex flex-1 flex-col gap-1 py-3">
        {VENDOR_NAV.map((group) => (
          <div key={group.key} className="flex flex-col">
            {/* Group label — hidden when collapsed */}
            {!collapsed && (
              <span className="text-text-muted px-4 pt-3 pb-1 text-xs font-semibold tracking-wide uppercase">
                {pickLocalized(group, locale, 'title')}
              </span>
            )}
            {group.items.map((item) => {
              const isActive = navCtx?.page.path === item.path;
              const label = pickLocalized(item, locale, 'title');
              return (
                <a
                  key={item.path}
                  href={item.path}
                  {...getPrefetchProps(item.path)}
                  aria-current={isActive ? 'page' : undefined}
                  className={cn(
                    'mx-2 my-0.5 flex items-center gap-3 rounded-md',
                    'focus-visible:ring-mode-vendor-500 transition-colors focus-visible:ring-2 focus-visible:outline-none',
                    collapsed ? 'justify-center p-2' : 'px-3 py-2',
                    isActive
                      ? 'bg-mode-vendor-50 text-mode-vendor-800 font-semibold'
                      : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
                  )}
                  title={collapsed ? label : undefined}
                >
                  <Icon
                    name={item.icon}
                    size="sm"
                    color={isActive ? 'vendor' : 'inherit'}
                    aria-hidden
                  />
                  {!collapsed && <span className="truncate text-sm">{label}</span>}
                  {!collapsed && item.path === '/vendor/messages' && unreadTotal > 0 && (
                    <span className="bg-mode-vendor-600 text-2xs ms-auto rounded-full px-1.5 py-0.5 font-medium text-white">
                      {unreadTotal}
                    </span>
                  )}
                </a>
              );
            })}
          </div>
        ))}
      </nav>
    </aside>
  );
}