'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import {
  LayoutDashboard,
  Target,
  Users,
  Plug,
  Shield,
  Settings,
  ClipboardList,
  CalendarClock,
  GraduationCap,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Separator } from '@/components/ui/separator';
import { useSidebarStore } from '@/stores/sidebar-store';

/** Navigation item configuration */
interface NavItem {
  key: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  children?: NavItem[];
}

/** Main navigation structure */
const mainNavItems: NavItem[] = [
  {
    key: 'dashboard',
    href: '/dashboard',
    icon: LayoutDashboard,
  },
  {
    key: 'lean',
    href: '/lean',
    icon: Target,
    children: [
      { key: 's3Planning', href: '/lean/s3-planning', icon: ClipboardList },
      { key: 'morningMeeting', href: '/lean/morning-meeting', icon: CalendarClock },
      { key: 'skillMatrix', href: '/lean/skill-matrix', icon: GraduationCap },
    ],
  },
  {
    key: 'hr',
    href: '/hr',
    icon: Users,
  },
  {
    key: 'integrations',
    href: '/integrations',
    icon: Plug,
  },
];

const bottomNavItems: NavItem[] = [
  {
    key: 'admin',
    href: '/admin',
    icon: Shield,
  },
  {
    key: 'settings',
    href: '/settings',
    icon: Settings,
  },
];

interface MobileSidebarProps {
  locale: string;
}

/**
 * Mobile sidebar component using Sheet
 * Shows on screens smaller than lg breakpoint
 */
export function MobileSidebar({ locale }: MobileSidebarProps) {
  const pathname = usePathname();
  const t = useTranslations('navigation');
  const { isMobileOpen, setMobileOpen } = useSidebarStore();

  const isActive = (href: string) => {
    const localePath = `/${locale}${href}`;
    return pathname === localePath || pathname.startsWith(`${localePath}/`);
  };

  const handleLinkClick = () => {
    setMobileOpen(false);
  };

  return (
    <Sheet open={isMobileOpen} onOpenChange={setMobileOpen}>
      <SheetContent side="left" className="w-[280px] p-0">
        <SheetHeader className="h-16 flex-row items-center justify-start gap-2 px-4">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground font-bold">
            t
          </div>
          <SheetTitle className="text-xl font-bold">OS</SheetTitle>
        </SheetHeader>

        <Separator />

        {/* Main Navigation */}
        <nav className="flex-1 space-y-1 px-2 py-4">
          {mainNavItems.map((item) => (
            <MobileNavItem
              key={item.key}
              item={item}
              locale={locale}
              isActive={isActive}
              t={t}
              onLinkClick={handleLinkClick}
            />
          ))}
        </nav>

        <Separator />

        {/* Bottom Navigation */}
        <nav className="space-y-1 px-2 py-4">
          {bottomNavItems.map((item) => (
            <MobileNavItem
              key={item.key}
              item={item}
              locale={locale}
              isActive={isActive}
              t={t}
              onLinkClick={handleLinkClick}
            />
          ))}
        </nav>
      </SheetContent>
    </Sheet>
  );
}

interface MobileNavItemProps {
  item: NavItem;
  locale: string;
  isActive: (href: string) => boolean;
  t: (key: string) => string;
  onLinkClick: () => void;
}

function MobileNavItem({ item, locale, isActive, t, onLinkClick }: MobileNavItemProps) {
  const Icon = item.icon;
  const active = isActive(item.href);

  return (
    <Link
      href={`/${locale}${item.href}`}
      onClick={onLinkClick}
      className={cn(
        'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
        active
          ? 'bg-primary text-primary-foreground'
          : 'text-foreground hover:bg-accent hover:text-accent-foreground'
      )}
    >
      <Icon className="h-5 w-5 shrink-0" />
      <span>{t(item.key)}</span>
    </Link>
  );
}
