نوارِ کناری با زیرمنو

"use client"

import * as React from "react"

import { BarChartIcon, ChevronDownIcon, DashboardIcon, DigLogo, GridIcon, SettingsIcon, UsersIcon } from "@/components/icons"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import {
  Sidebar,
  SidebarBrand,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { toFaDigits } from "@/lib/persian"

const NAV = [
  { title: "پیشخوان", icon: <DashboardIcon />, items: [] as string[] },
  { title: "پروژه‌ها", icon: <GridIcon />, items: ["همهٔ پروژه‌ها", "بایگانی", "الگوها"] },
  { title: "گزارش‌ها", icon: <BarChartIcon />, items: ["عملکردِ تیم", "زمانِ ثبت‌شده", "بودجه"] },
  { title: "تیم", icon: <UsersIcon />, items: ["اعضا", "دعوت‌ها", "نقش‌ها"] },
  { title: "تنظیمات", icon: <SettingsIcon />, items: ["عمومی", "صورتحساب", "یکپارچه‌سازی‌ها"] },
]

/**
 * پوستهٔ اپ با زیرمنو: هر بخش با یک لمس باز و بسته می‌شود و زیرمنو با خطِ راهنما زیرِ والدش می‌نشیند؛ بخشِ
 * صفحهٔ فعلی از اول باز است. برای اپ‌هایی با چند سطحِ صفحه (پروژه ← بایگانی) که منوی تخت شلوغ می‌شود.
 */
export default function AppShellSubmenusBlock() {
  const [active, setActive] = React.useState("همهٔ پروژه‌ها")
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader className="p-3">
          <SidebarBrand logo={<DigLogo />} title="فضای کارِ آوند" subtitle={`${toFaDigits(4)} پروژهٔ فعال`} />
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>منو</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {NAV.map((section) =>
                  section.items.length === 0 ? (
                    <SidebarMenuItem key={section.title}>
                      <SidebarMenuButton isActive={active === section.title} onClick={() => setActive(section.title)}>
                        {section.icon}
                        <span>{section.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ) : (
                    <SidebarMenuItem key={section.title}>
                      <Collapsible defaultOpen={section.items.includes(active)}>
                        <CollapsibleTrigger asChild>
                          <SidebarMenuButton className="group/collapsible">
                            {section.icon}
                            <span>{section.title}</span>
                            <ChevronDownIcon className="ms-auto size-4! transition-transform group-data-[state=open]/collapsible:rotate-180" />
                          </SidebarMenuButton>
                        </CollapsibleTrigger>
                        <CollapsibleContent>
                          <SidebarMenuSub>
                            {section.items.map((item) => (
                              <SidebarMenuSubItem key={item}>
                                <SidebarMenuSubButton
                                  href="#"
                                  isActive={active === item}
                                  onClick={(event) => {
                                    event.preventDefault()
                                    setActive(item)
                                  }}
                                >
                                  {item}
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            ))}
                          </SidebarMenuSub>
                        </CollapsibleContent>
                      </Collapsible>
                    </SidebarMenuItem>
                  )
                )}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <ShellBody title={active} />
      </SidebarInset>
    </SidebarProvider>
  )
}

/** بدنهٔ مشترکِ پوسته: سرصفحه با دکمهٔ نوار و مسیر، سه آمار و فهرستِ پروژه‌ها؛ جای صفحهٔ واقعیِ محصول. */
function ShellBody({ title = "پروژه‌ها", children }: { title?: string; children?: React.ReactNode }) {
  return (
    <>
      <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background px-4">
        <SidebarTrigger className="-ms-1" />
        <Separator orientation="vertical" className="mx-1 h-5" />
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem className="max-sm:hidden">
              <BreadcrumbLink href="#">فضای کار</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator className="max-sm:hidden" />
            <BreadcrumbItem>
              <BreadcrumbPage>{title}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </header>
      <div className="flex flex-1 flex-col gap-6 p-4 sm:p-6">
        {children}
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          {STATS.map((stat) => (
            <div key={stat.label} className="flex flex-col gap-1 rounded-xl border border-border bg-card p-4">
              <span className="text-sm text-muted-foreground">{stat.label}</span>
              <span className="text-2xl font-bold tabular-nums">{stat.value}</span>
            </div>
          ))}
        </div>
        <section aria-labelledby="shell-projects" className="flex flex-col gap-3">
          <h2 id="shell-projects" className="text-lg leading-snug font-bold">
            پروژه‌های فعال
          </h2>
          <ul className="flex flex-col divide-y divide-border rounded-xl border border-border bg-card">
            {PROJECTS.map((project) => (
              <li key={project.name} className="flex flex-col gap-2 p-4 sm:flex-row sm:items-center sm:gap-6">
                <span className="flex min-w-0 flex-1 flex-col">
                  <span className="truncate font-semibold">{project.name}</span>
                  <span className="text-sm text-muted-foreground">{project.owner}</span>
                </span>
                <span className="flex items-center gap-3 sm:w-56">
                  <Progress value={project.progress} aria-label={`پیشرفتِ ${project.name}`} className="flex-1" />
                  <span className="w-10 text-end text-sm tabular-nums">٪{toFaDigits(project.progress)}</span>
                </span>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </>
  )
}

const STATS = [
  { label: "کارهای باز", value: "۲۴" },
  { label: "سررسیدِ این هفته", value: "۷" },
  { label: "انجام‌شده در مهر", value: "۱۱۸" },
]
const PROJECTS = [
  { name: "بازطراحیِ اپِ بانکی", owner: "نگار احمدی", progress: 72 },
  { name: "داشبوردِ فروشِ فصل", owner: "امیر رضایی", progress: 45 },
  { name: "سیستمِ نوبت‌دهیِ کلینیک", owner: "سارا محمدی", progress: 88 },
  { name: "کمپینِ پاییزه", owner: "کیان مرادی", progress: 20 },
]