پوستهٔ درون‌قاب

"use client"

import * as React from "react"

import { BarChartIcon, CalendarIcon, ChatIcon, DashboardIcon, DigLogo, GridIcon, 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,
  SidebarCard,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
  SidebarUser,
} from "@/components/ui/sidebar"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
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 /> },
]
const SECONDARY = [
  { value: "overview", label: "نمای کلی" },
  { value: "board", label: "بُرد" },
  { value: "timeline", label: "زمان‌بندی" },
  { value: "files", label: "فایل‌ها" },
]

/**
 * پوستهٔ درون‌قاب: نوار هم‌رنگِ پس‌زمینه است و صفحه مثلِ یک کارتِ گرد رویش می‌نشیند؛ منوی دومِ همان بخش
 * (نمای کلی، بُرد، زمان‌بندی) زبانه‌های خطی بالای صفحه است. کارتِ ظرفیتِ فضا پایینِ نوار، پیش از کاربر.
 */
export default function AppShellInsetBlock() {
  const [active, setActive] = React.useState("پروژه‌ها")
  const [view, setView] = React.useState("overview")
  return (
    <SidebarProvider>
      <Sidebar variant="inset">
        <SidebarHeader className="p-3">
          <SidebarBrand logo={<DigLogo />} title="فضای کارِ آوند" subtitle="پلنِ تیمی" />
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {NAV.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton isActive={active === item.title} onClick={() => setActive(item.title)}>
                      {item.icon}
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter className="gap-3 p-3">
          <SidebarCard>
            <span className="font-semibold">فضای ذخیره</span>
            <Progress value={68} aria-label="فضای مصرف‌شده" />
            <span className="text-xs text-muted-foreground">{toFaDigits(68)}٪ از ۲۰ گیگابایت</span>
          </SidebarCard>
          <SidebarUser avatar={<Avatar src={stockImages.personWoman3.src} alt="" name="آرمیتا رستگار" />} name="آرمیتا رستگار" description="مدیرِ محصول" />
        </SidebarFooter>
      </Sidebar>
      <SidebarInset>
        <ShellBody title={active}>
          <Tabs variant="line" value={view} onValueChange={setView} className="-mt-2">
            <TabsList aria-label={`نماهای ${active}`}>
              {SECONDARY.map((item) => (
                <TabsTrigger key={item.value} value={item.value} className="flex-none">
                  {item.label}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        </ShellBody>
      </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 },
]