'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Icons } from '@/components/icons';
import { InfoSidebar } from '@/components/layout/info-sidebar';
import { ThemeModeToggle } from '@/components/themes/theme-mode-toggle';
import { ThemeSelector } from '@/components/themes/theme-selector';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { InfobarProvider } from '@/components/ui/infobar';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { exampleDashboardNavItems } from '@/features/example-dashboard/config';

export function ExampleDashboardShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <div className='min-h-screen bg-[radial-gradient(circle_at_top,_hsl(var(--primary)/0.12),_transparent_38%),linear-gradient(180deg,_hsl(var(--background)),_hsl(var(--muted)/0.28))]'>
      <div className='mx-auto flex min-h-screen max-w-[1600px] flex-col lg:flex-row'>
        <aside className='border-border/60 bg-background/75 supports-[backdrop-filter]:bg-background/70 w-full border-b backdrop-blur-xl lg:w-72 lg:border-r lg:border-b-0'>
          <div className='flex items-center justify-between px-5 py-5 lg:block'>
            <div>
              <div className='flex items-center gap-3'>
                <div className='from-primary to-primary/70 text-primary-foreground flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br shadow-lg'>
                  <Icons.sparkles className='h-5 w-5' />
                </div>
                <div>
                  <p className='text-sm font-medium uppercase tracking-[0.28em] text-muted-foreground'>
                    Template
                  </p>
                  <h1 className='font-semibold'>Example Dashboard</h1>
                </div>
              </div>
              <p className='mt-3 hidden text-sm text-muted-foreground lg:block'>
                Public showcase routes for tables, charts, icons, and React Query patterns.
              </p>
            </div>
            <Badge variant='outline' className='hidden sm:inline-flex lg:mt-4'>
              Public demo
            </Badge>
          </div>

          <div className='px-3 pb-4'>
            <nav className='grid gap-1'>
              {exampleDashboardNavItems.map((item) => {
                const Icon = item.icon ? Icons[item.icon] : Icons.arrowRight;
                const isActive = pathname === item.url;

                return (
                  <Link
                    key={item.url}
                    href={item.url}
                    className={cn(
                      'group flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition-colors',
                      isActive
                        ? 'bg-primary text-primary-foreground shadow-sm'
                        : 'hover:bg-muted/80 text-muted-foreground hover:text-foreground'
                    )}
                  >
                    <Icon className='h-4 w-4' />
                    <span className='font-medium'>{item.title}</span>
                  </Link>
                );
              })}
            </nav>

            <Separator className='my-4' />

            <div className='grid gap-2'>
              <Button asChild variant='outline' className='justify-start rounded-2xl'>
                <Link href='/setup'>
                  <Icons.settings className='mr-2 h-4 w-4' />
                  Setup wizard
                </Link>
              </Button>
              <p className='px-1 text-xs leading-5 text-muted-foreground'>
                Start real project setup at <code>/setup</code>, then browse these pages to see the
                template patterns in motion.
              </p>
            </div>
          </div>
        </aside>

        <InfobarProvider defaultOpen={false}>
          <div className='flex min-h-screen flex-1 flex-col'>
            <header className='border-border/60 bg-background/75 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-20 border-b px-4 backdrop-blur-xl md:px-6'>
              <div className='flex min-h-16 items-center justify-between gap-4'>
                <div>
                  <p className='text-xs uppercase tracking-[0.24em] text-muted-foreground'>
                    Example Routes
                  </p>
                  <div className='flex items-center gap-2'>
                    <h2 className='text-lg font-semibold'>Interactive template preview</h2>
                    <Badge variant='secondary' className='hidden sm:inline-flex'>
                      No auth required
                    </Badge>
                  </div>
                </div>
                <div className='flex items-center gap-2'>
                  <ThemeModeToggle />
                  <div className='hidden sm:block'>
                    <ThemeSelector />
                  </div>
                </div>
              </div>
            </header>
            <div className='flex flex-1 overflow-hidden'>
              <main className='flex min-w-0 flex-1 flex-col'>{children}</main>
              <InfoSidebar side='right' />
            </div>
          </div>
        </InfobarProvider>
      </div>
    </div>
  );
}
