'use client'

import * as React from 'react'
import { AppShell, PageHeader, Button, Card, CardHeader, CardTitle, CardContent } from '@partodata/ui'
import { LayoutDashboard, Users, FileBarChart } from 'lucide-react'

const NAV = [
  { id: 'dashboard', label: 'داشبورد', icon: <LayoutDashboard /> },
  { id: 'influencers', label: 'اینفلوئنسرها', icon: <Users /> },
  { id: 'reports', label: 'گزارش‌ها', icon: <FileBarChart /> },
]

export function App() {
  const [view, setView] = React.useState('dashboard')

  return (
    <AppShell
      brand={
        <div className="flex size-9 items-center justify-center rounded-md bg-brand-default text-sm font-bold text-on-brand">
          پ
        </div>
      }
      nav={NAV}
      activeId={view}
      onNavigate={setView}
      header={{
        title: 'پایش برند',
        subtitle: 'نمای کلی گفت‌وگوهای شبکه‌های اجتماعی',
        actions: <Button size="sm">گزارش جدید</Button>,
      }}
      pageHeader={<PageHeader title="داشبورد" description="خلاصه وضعیت برند در هفته گذشته" />}
    >
      <Card>
        <CardHeader>
          <CardTitle>روند تعامل</CardTitle>
        </CardHeader>
        <CardContent>{/* محتوای صفحه اینجا قرار می‌گیرد */}</CardContent>
      </Card>
    </AppShell>
  )
}

<AppShell contentWidth="default" ...>  {/* max-w-7xl — پیش‌فرض، داشبوردها */}
<AppShell contentWidth="narrow" ...>   {/* max-w-3xl — ستون خواندنی، فرم‌ها و تنظیمات */}
<AppShell contentWidth="full" ...>     {/* بدون محدودیت — جدول‌ها و بوم‌های تمام‌عرض */}

<AppShell
  nav={NAV}
  activeId={view}
  onNavigate={setView}
  header={{ title: 'تحلیل‌ها' }}
  secondaryResizable
  secondaryPanel={
    <>
      <AppSecondaryHeader>
        <AppSecondaryTitle>گزارش‌ها</AppSecondaryTitle>
      </AppSecondaryHeader>
      <AppSecondaryContent className="gap-1 p-2">
        <SecondaryNavSearchInput placeholder="جستجوی گزارش…" aria-label="جستجوی گزارش" />
        <SecondaryNavTitle>پیشنهادی</SecondaryNavTitle>
        <SecondaryNavItem isActive>نمای کلی هفتگی</SecondaryNavItem>
        <SecondaryNavItem>روند تعامل</SecondaryNavItem>
      </AppSecondaryContent>
    </>
  }
>
  {page}
</AppShell>

<AppShell navBehavior="open" ... >   {/* همیشه باز — چیدمان ۲۰۸px را رزرو می‌کند */}
<AppShell navBehavior="expandable" ... /> {/* پیش‌فرض — جمع، با hover باز */}
<AppShell navBehavior="closed" ... />  {/* همیشه جمع */}

const [behavior, setBehavior] = React.useState<NavRailBehavior>('open')

<AppShell navBehavior={behavior} onNavBehaviorChange={setBehavior} ... >

<AppShell nav={NAV} activeId={view} onNavigate={setView} header={{ title: 'پایش برند' }}>
  {page}
</AppShell>

<AppShell
  nav={NAV}
  headerEnd={
    <>
      <SearchBox />
      <ThemeToggle />
      <UserMenu />
    </>
  }
>
  {page}
</AppShell>

<div className="h-[560px] overflow-hidden rounded-lg border">
  <AppShell contained nav={NAV} activeId={view} onNavigate={setView} header={{ title: 'پیش‌نمایش' }}>
    {page}
  </AppShell>
</div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>مجموع منشن‌ها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۱٬۲۳۴</MetricCardValue>
      <MetricCardDifferential variant="positive" sign="+">
        ۱۲.۵٪
      </MetricCardDifferential>
    </MetricCardContent>
  </MetricCard>
  {/* سایر KPIها */}
</div>

import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarInset,
  SidebarTrigger,
  AppBar,
} from '@partodata/ui'
import { LayoutDashboard } from 'lucide-react'

function LegacyShell({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>
          <span className="px-2 font-bold text-foreground">پارتو</span>
        </SidebarHeader>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>
                <LayoutDashboard className="size-4" />
                <span>داشبورد</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <AppBar logo={<SidebarTrigger />} />
        <div className="p-6">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  )
}