فایل‌های اشتراکی

"use client"

import * as React from "react"

import { DownloadIcon, MoreHorizontalIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { FileTypeIcon } from "@/components/ui/file-upload"
import { toast } from "@/components/ui/toast"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { formatRelativeTime, toFaDigits } from "@/lib/persian"
import { stockImages, type StockImageName } from "@/lib/stock-images"

type File = { name: string; kind: string; size: string; owner: string; photo: StockImageName; at: string; access: "edit" | "view" }
const FILES: File[] = [
  { name: "قراردادِ بانکِ آینده", kind: "PDF", size: "۲٫۴ مگ", owner: "مهسا کریمی", photo: "personWoman1", at: "2026-10-06T09:20:00", access: "view" },
  { name: "بودجهٔ سه‌ماههٔ سوم", kind: "XLSX", size: "۸۴۰ کیلو", owner: "نگار احمدی", photo: "personWoman3", at: "2026-10-05T16:10:00", access: "edit" },
  { name: "ارائهٔ فروشِ پاییز", kind: "PPTX", size: "۱۲ مگ", owner: "علی کاظمی", photo: "personMan2", at: "2026-10-03T11:45:00", access: "view" },
  { name: "متنِ صفحهٔ درباره ما", kind: "DOCX", size: "۶۲ کیلو", owner: "سارا محمدی", photo: "personWoman2", at: "2026-09-29T14:00:00", access: "edit" },
]

/**
 * «با من به اشتراک گذاشته شده»: سگمنتِ همه/قابلِ ویرایش، هر ردیف آیکونِ واقعی نوعِ فایل،
 * صاحبِ فایل با عکس، زمانِ اشتراک و سطحِ دسترسی؛ دانلود و منوی بیشتر برای هر فایل.
 */
export default function FilesSharedBlock() {
  const [filter, setFilter] = React.useState("all")
  const visible = FILES.filter((file) => filter === "all" || file.access === "edit")

  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-4xl flex-col gap-8 p-4 sm:p-6">
        <header className="flex flex-wrap items-end justify-between gap-x-4 gap-y-6">
          <div className="flex flex-col gap-1">
            <h1 className="text-2xl font-bold">به اشتراک گذاشته با من</h1>
            <p className="text-muted-foreground">{toFaDigits(FILES.length)} فایل از {toFaDigits(4)} همکار</p>
          </div>
          <ToggleGroup type="single" variant="segmented" value={filter} onValueChange={(value) => value && setFilter(value as string)} aria-label="فیلتر">
            <ToggleGroupItem value="all">همه</ToggleGroupItem>
            <ToggleGroupItem value="edit">قابلِ ویرایش</ToggleGroupItem>
          </ToggleGroup>
        </header>
        <ul className="flex flex-col divide-y divide-border rounded-xl border border-border bg-card">
          {visible.map((file) => (
            <li key={file.name} className="flex items-center gap-4 p-4">
              <FileTypeIcon kind={file.kind} className="size-11 shrink-0" />
              <span className="flex min-w-0 flex-1 flex-col gap-1">
                <span className="truncate font-medium">{file.name}</span>
                <span className="flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground">
                  <Avatar size="sm" alt="" src={stockImages[file.photo].src} />
                  {file.owner} · {formatRelativeTime(file.at)} · {file.size}
                </span>
              </span>
              <span className={`hidden rounded-md px-2 py-1 text-xs sm:inline ${file.access === "edit" ? "bg-success-subtle text-success-subtle-foreground" : "bg-muted text-muted-foreground"}`}>
                {file.access === "edit" ? "ویرایش" : "فقط مشاهده"}
              </span>
              <Button variant="ghost" size="icon" aria-label={`دانلودِ ${file.name}`} onClick={() => toast.success("دانلود شروع شد.")}>
                <DownloadIcon />
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" aria-label={`گزینه‌های ${file.name}`}>
                    <MoreHorizontalIcon />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>باز کردن</DropdownMenuItem>
                  <DropdownMenuItem>کپی لینک</DropdownMenuItem>
                  <DropdownMenuItem variant="destructive">حذف از فهرستِ من</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </li>
          ))}
        </ul>
      </main>
    </ControlSizeProvider>
  )
}