'use client';

import { useMemo, useCallback } from 'react';
import { DashboardShell, Sidebar, Header, type NavItem } from '@{{PROJECT_NAME}}/layout';
import { Home, Users, Settings, BarChart3 } from '@{{PROJECT_NAME}}/ui';
import { useRouter, usePathname } from 'next/navigation';

const navItems: NavItem[] = [
  { label: 'Dashboard', href: '/dashboard', icon: Home },
  { label: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
  { label: 'Users', href: '/dashboard/users', icon: Users },
  { label: 'Settings', href: '/dashboard/settings', icon: Settings },
];

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();

  // Memoize active nav items based on current path
  const itemsWithActive = useMemo(
    () =>
      navItems.map((item) => ({
        ...item,
        active: pathname === item.href || pathname.startsWith(item.href + '/'),
      })),
    [pathname]
  );

  // Memoize navigation handler
  const handleNavigate = useCallback(
    (href: string) => router.push(href),
    [router]
  );

  // Get current page title
  const currentTitle = useMemo(
    () => itemsWithActive.find((i) => i.active)?.label || 'Dashboard',
    [itemsWithActive]
  );

  return (
    <DashboardShell
      sidebar={
        <Sidebar
          logo={
            <span className="font-semibold text-lg">{{PROJECT_NAME}}</span>
          }
          items={itemsWithActive}
          onNavigate={handleNavigate}
          footer={
            <div className="text-sm text-[var(--text-muted)]">
              v0.0.1
            </div>
          }
        />
      }
      header={
        <Header
          title={currentTitle}
          showSearch
          searchPlaceholder="Search..."
        />
      }
    >
      {children}
    </DashboardShell>
  );
}
