نوارِ کناریِ جمع‌شونده

"use client"

import * as React from "react"

import { BarChartIcon, CalendarIcon, ChatIcon, DashboardIcon, DigLogo, GridIcon, SettingsIcon, UsersIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import {
  Sidebar,
  SidebarBrand,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  SidebarUser,
} from "@/components/ui/sidebar"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const NAV = [
  { title: "پیشخوان", icon: <DashboardIcon /> },
  { title: "پروژه‌ها", icon: <GridIcon /> },
  { title: "تقویم", icon: <CalendarIcon /> },
  { title: "پیام‌ها", icon: <ChatIcon /> },
  { title: "اعضا", icon: <UsersIcon /> },
  { title: "گزارش‌ها", icon: <BarChartIcon /> },
]

/**
 * پوستهٔ اپ با نوارِ جمع‌شونده به آیکون: برای ابزارهایی که کاربر ساعت‌ها با آن کار می‌کند و فضای صفحه مهم است.
 * در حالتِ جمع فقط آیکون‌ها با متنِ راهنما (tooltip) می‌مانند؛ دکمهٔ سرصفحه یا لبهٔ نوار (Rail) بازش می‌کند
 * و انتخابِ کاربر در کوکی می‌ماند. در گوشی همان نوارِ کشویی است.
 */
export default function AppShellIconBlock() {
  const [active, setActive] = React.useState("پروژه‌ها")
  return (
    <SidebarProvider defaultOpen={false}>
      <Sidebar collapsible="icon">
        <SidebarHeader className="p-3 group-data-[collapsible=icon]:p-2">
          <SidebarBrand logo={<DigLogo />} title="فضای کارِ آوند" subtitle="۱۲ عضو" />
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {NAV.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title} isActive={active === item.title} onClick={() => setActive(item.title)}>
                      {item.icon}
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
          <SidebarGroup className="mt-auto">
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton tooltip="تنظیمات">
                    <SettingsIcon />
                    <span>تنظیمات</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter className="p-3 group-data-[collapsible=icon]:p-2">
          <SidebarUser avatar={<Avatar src={stockImages.personWoman3.src} alt="" name="آرمیتا رستگار" size="sm" />} name="آرمیتا رستگار" description={`${toFaDigits(3)} کارِ امروز`} />
        </SidebarFooter>
        <SidebarRail />
      </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 },
]