صفحه جدول داده

'use client'

import * as React from 'react'
import Link from 'next/link'
import {
  Button,
  DataTable,
  DataTableExportButton,
  DataTableFacetedFilter,
  DateRangePicker,
  SearchInput,
  useAsync,
  useDebounce,
  type DataTableSort,
  type DateRange,
} from '@partodata/ui'
import { Icons } from '@partodata/ui/icons'
import { ListPage, pageState } from '@partodata/ui/templates'
// ستون‌ها (پایین‌تر)، گزینه‌های پلتفرم و درخواست سرور، از کد خود محصول
import { PLATFORMS, columns, fetchInfluencers, type InfluencerPage, type Platform } from '@/lib/influencers'

const PAGE_SIZE = 25

export function Influencers() {
  const [q, setQ] = React.useState('')
  // Typing waits 300ms before it searches; clearing the search applies at once.
  const debounced = useDebounce(q, 300)
  const search = q === '' ? '' : debounced
  const [platforms, setPlatforms] = React.useState<Platform[]>([])
  const [range, setRange] = React.useState<DateRange | undefined>()
  const [sortState, setSortState] = React.useState<{ column: string | null; direction: 'asc' | 'desc' | null }>({
    column: null,
    direction: null,
  })
  const [page, setPage] = React.useState(1)
  const { data, isLoading, error, run } = useAsync<InfluencerPage>()
  const load = React.useCallback(
    () => run(() => fetchInfluencers({ q: search, platforms, range, sort: sortState, page, pageSize: PAGE_SIZE })),
    [run, search, platforms, range, sortState, page]
  )
  React.useEffect(() => {
    load()
  }, [load])

  // Every search, filter or sort change starts again from the first page.
  const filterBy =
    <T,>(set: (value: T) => void) =>
    (value: T) => {
      set(value)
      setPage(1)
    }
  const clear = () => {
    setQ('')
    setPlatforms([])
    setRange(undefined)
    setPage(1)
  }
  const sort: DataTableSort = {
    ...sortState,
    onSort: (column, direction) => filterBy(setSortState)({ column, direction }),
  }
  const rows = data?.items ?? []

  return (
    <ListPage
      title="اینفلوئنسرها"
      description="اینفلوئنسرهای پایش‌شده در همهٔ پلتفرم‌ها"
      search={
        <SearchInput
          placeholder="جست‌وجو در اینفلوئنسرها"
          aria-label="جست‌وجو در اینفلوئنسرها"
          value={q}
          onChange={(e) => filterBy(setQ)(e.target.value)}
          onClear={() => filterBy(setQ)('')}
        />
      }
      filters={
        <>
          <DataTableFacetedFilter
            title="پلتفرم"
            options={PLATFORMS}
            selected={platforms}
            onSelectedChange={filterBy(setPlatforms)}
          />
          <DateRangePicker value={range} onChange={filterBy(setRange)} placeholder="بازهٔ آخرین پست" />
        </>
      }
      filtered={q !== '' || platforms.length > 0 || range !== undefined}
      onClearFilters={clear}
      secondaryActions={
        <DataTableExportButton columns={columns} data={rows} filename="influencers.csv" label="خروجی CSV" />
      }
      primaryAction={
        <Button asChild iconStart={<Icons.plus />}>
          <Link href="/influencers/new">افزودن اینفلوئنسر</Link>
        </Button>
      }
      state={pageState({
        data: data?.items,
        isLoading,
        error,
        onRetry: load,
        emptyCopy: { title: 'هنوز اینفلوئنسری ثبت نشده است' },
      })}
      pagination={{
        currentPage: page,
        totalPages: Math.ceil((data?.total ?? 0) / PAGE_SIZE),
        onPageChange: setPage,
        totalRows: data?.total ?? 0,
        pageSize: PAGE_SIZE,
      }}
    >
      <DataTable columns={columns} data={rows} sort={sort} />
    </ListPage>
  )
}

import Link from 'next/link'
import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, EngagementRate, formatNumber, toast, type ExportableColumn } from '@partodata/ui'
import { PlatformMark } from '@partodata/ui/social'
import { Icons } from '@partodata/ui/icons'

export type Platform = 'instagram' | 'twitter' | 'tiktok' | 'youtube'

interface Influencer {
  id: string
  name: string
  platform: Platform
  followers: number
  /** نسبت: 0.042 یعنی 4.2٪ */
  engagementRate: number
  status: 'active' | 'pending' | 'inactive'
  profileUrl: string
}

export const PLATFORMS: { value: Platform; label: string }[] = [
  { value: 'instagram', label: 'اینستاگرام' },
  { value: 'twitter', label: 'ایکس' },
  { value: 'tiktok', label: 'تیک‌تاک' },
  { value: 'youtube', label: 'یوتیوب' },
]
const labelOf = (options: { value: string; label: string }[], value: string) =>
  options.find((option) => option.value === value)?.label ?? value

const STATUS: Record<Influencer['status'], { label: string; variant: 'default' | 'secondary' | 'destructive' }> = {
  active: { label: 'فعال', variant: 'default' },
  pending: { label: 'در انتظار', variant: 'secondary' },
  inactive: { label: 'غیرفعال', variant: 'destructive' },
}

async function copyProfileLink(url: string) {
  try {
    await navigator.clipboard.writeText(url)
    toast.success('پیوند پروفایل کپی شد')
  } catch {
    toast.error('کپی پیوند ممکن نشد')
  }
}

export const columns: ExportableColumn<Influencer>[] = [
  {
    id: 'name',
    header: 'نام',
    sortable: true,
    // The row's name: a link to its own page.
    cell: (row) => (
      <Link href={`/influencers/${row.id}`} prefetch={false}>
        {row.name}
      </Link>
    ),
    exportValue: (row) => row.name,
  },
  {
    id: 'platform',
    header: 'پلتفرم',
    cell: (row) => <PlatformMark source={row.platform} showLabel />,
    exportValue: (row) => labelOf(PLATFORMS, row.platform),
  },
  {
    id: 'followers',
    header: 'دنبال‌کننده‌ها',
    sortable: true,
    align: 'end',
    cell: (row) => formatNumber(row.followers),
    exportValue: (row) => row.followers,
  },
  {
    id: 'engagementRate',
    header: 'نرخ تعامل',
    sortable: true,
    cell: (row) => <EngagementRate display="bar" currentRate={row.engagementRate} followers={row.followers} locale="fa" />,
    exportValue: (row) => row.engagementRate,
  },
  {
    id: 'status',
    header: 'وضعیت',
    cell: (row) => <Badge variant={STATUS[row.status].variant}>{STATUS[row.status].label}</Badge>,
    exportValue: (row) => STATUS[row.status].label,
  },
  // A row's actions: the last column — its page first, then the row's own actions.
  {
    id: 'actions',
    header: <span className="sr-only">عملیات</span>,
    align: 'end',
    cell: (row) => (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" icon={<Icons.moreHorizontal />} aria-label={`عملیات ${row.name}`} />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem asChild>
            <Link href={`/influencers/${row.id}`}>مشاهدهٔ جزئیات</Link>
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => copyProfileLink(row.profileUrl)}>کپی پیوند پروفایل</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    ),
    exportValue: () => null,
  },
]

const [q, setQ] = React.useState('')
const debounced = useDebounce(q, 300)
const search = q === '' ? '' : debounced

// ❌ غلط — داده از سرور صفحه‌بندی شده، اما فقط 10 ردیف صفحهٔ فعلی مرتب می‌شود
const sorted = useMemo(() => {
  const dir = sortDirection === 'asc' ? 1 : -1
  return [...pageRows].sort((a, b) => (a.followers - b.followers) * dir)
}, [pageRows, sortDirection])

// ✅ درست — ستون و جهت مرتب‌سازی به درخواست می‌رود و سرور صفحهٔ مرتب‌شده را برمی‌گرداند
const load = React.useCallback(
  () => run(() => fetchInfluencers({ q: search, platforms, range, sort: sortState, page, pageSize: PAGE_SIZE })),
  [run, search, platforms, range, sortState, page]
)

// ❌ غلط — در پیش‌نمایش RTL درست به نظر می‌رسد اما جهت‌محور است
<TableCell className="text-left pl-6">{influencer.followers.toLocaleString('en-US')}</TableCell>

// ✅ درست — Logical Properties در هر دو جهت درست کار می‌کند
<TableCell className="text-end pe-6">{influencer.followers.toLocaleString('en-US')}</TableCell>

// ❌ غلط — سبزِ hardcode با تم پیش‌فرض تیره هماهنگ نیست
<TableCell>
  <span className="text-green-600">فعال</span>
</TableCell>

// ✅ درست — واریانت Badge از توکن‌های تم رنگ می‌گیرد
<TableCell>
  <Badge variant={STATUS_MAP[influencer.status].variant}>{STATUS_MAP[influencer.status].label}</Badge>
</TableCell>

import { formatNumber } from '@partodata/ui'

// ❌ غلط — کدپوینت واقعی U+06Fx می‌سازد، و بدون جداکننده هم خوانا نیست
<TableCell>{influencer.followers.toLocaleString('fa-IR')}</TableCell>
<TableCell>{influencer.followers}</TableCell>

// ✅ درست — کدپوینت لاتین با جداکنندهٔ هزار؛ فونت آن را «1,234,567» نشان می‌دهد
<TableCell>{formatNumber(influencer.followers)}</TableCell>

// ❌ غلط — لحن محاوره‌ای
emptyCopy: {
  title: 'هنوز کسی اینجا نیست! یکی اضافه کن.'
}

// ✅ درست — فارسی رسمی، و فقط عنوانی که نام آنچه نیست را می‌برد
emptyCopy: {
  title: 'هنوز اینفلوئنسری ثبت نشده است'
}