نوار با درختِ فایل

"use client"

import * as React from "react"

import { ChevronLeftIcon, FileTextIcon, FolderIcon, ImageIcon } 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,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarProvider,
  SidebarSearch,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { toFaDigits } from "@/lib/persian"

type Node = { name: string; children?: Node[] }
const TREE: Node[] = [
  {
    name: "طراحی",
    children: [{ name: "اپِ بانکی", children: [{ name: "صفحهٔ ورود.fig" }, { name: "کیف پول.fig" }] }, { name: "راهنمای برند.pdf" }],
  },
  { name: "اسناد", children: [{ name: "قراردادِ آوند.docx" }, { name: "صورت‌جلسهٔ مهر.md" }] },
  { name: "تصاویر", children: [{ name: "کاورِ کمپین.png" }, { name: "عکس‌های تیم.zip" }] },
  { name: "خوانِشم.md" },
]
const isImage = (name: string) => /\.(png|jpe?g|webp)$/.test(name)

/**
 * پوسته با درختِ فایل: پوشه‌ها با یک لمس باز و بسته می‌شوند (فلش می‌چرخد، فرزندان با خطِ راهنما زیرِ والد)،
 * فایلِ انتخاب‌شده برجسته است و مسیرش در سرصفحه. برای مدیریتِ اسناد، ویرایشگرِ کد یا مخزنِ طراحی.
 */
export default function AppShellFilesBlock() {
  const [active, setActive] = React.useState("کیف پول.fig")

  const renderNode = (node: Node, depth = 0): React.ReactNode =>
    node.children ? (
      <SidebarMenuItem key={node.name}>
        <Collapsible defaultOpen={depth === 0 && node.name === "طراحی"} className="group/folder">
          <CollapsibleTrigger asChild>
            <SidebarMenuButton>
              <ChevronLeftIcon className="size-4! transition-transform group-data-[state=open]/folder:-rotate-90 ltr:rotate-180" />
              <FolderIcon />
              <span>{node.name}</span>
            </SidebarMenuButton>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <SidebarMenuSub className="me-0 pe-0">{node.children.map((child) => renderNode(child, depth + 1))}</SidebarMenuSub>
          </CollapsibleContent>
        </Collapsible>
      </SidebarMenuItem>
    ) : (
      <SidebarMenuItem key={node.name}>
        <SidebarMenuButton isActive={active === node.name} onClick={() => setActive(node.name)}>
          {isImage(node.name) ? <ImageIcon /> : <FileTextIcon />}
          <span dir="auto">{node.name}</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    )

  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader className="p-3">
          <SidebarSearch placeholder="جست‌وجوی فایل…" aria-label="جست‌وجوی فایل" />
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>فایل‌های پروژه</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>{TREE.map((node) => renderNode(node))}</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 },
]