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

'use client'

import { useState, useMemo, useCallback } from 'react'
import {
  Button,
  SearchInput,
  FilterChip,
  FilterChipGroup,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
  TableSortHeader,
  Avatar,
  AvatarImage,
  AvatarFallback,
  Badge,
  SocialPlatformBadge,
  EngagementRateBar,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  Empty,
  EmptyIcon,
  EmptyTitle,
  EmptyDescription,
  Skeleton,
  PaginationControlled,
  PageContainer,
  PageHeader,
} from '@partodata/ui'
import { MoreHorizontal, Plus, Users, Search } from 'lucide-react'

export function InfluencerListPage() {
  return (
    <PageContainer size="large">
      <PageHeader
        title="اینفلوئنسرها"
        actions={
          <Button size="sm">
            <Plus className="size-4" />
            افزودن اینفلوئنسر
          </Button>
        }
      />

      {/* نوار ابزار: جستجو + فیلترها */}
      <InfluencerToolbar />

      {/* جدول داده */}
      <InfluencerTable />

      {/* صفحه‌بندی */}
      <div className="flex items-center justify-between pt-4">
        <span className="text-sm text-muted-foreground">۲۴ اینفلوئنسر</span>
        <PaginationControlled currentPage={1} totalPages={3} onPageChange={(page) => console.log(page)} />
      </div>
    </PageContainer>
  )
}

function InfluencerToolbar() {
  const [search, setSearch] = useState('')
  const [activeFilters, setActiveFilters] = useState([
    { id: 'platform', label: 'اینستاگرام', variant: 'default' as const },
    { id: 'engagement', label: 'نرخ تعامل بالا', variant: 'brand' as const },
  ])

  function removeFilter(id: string) {
    setActiveFilters((prev) => prev.filter((f) => f.id !== id))
  }

  return (
    <div className="flex flex-wrap items-center gap-3">
      <SearchInput
        placeholder="جستجوی اینفلوئنسر..."
        className="w-[280px]"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        onClear={() => setSearch('')}
      />
      <FilterChipGroup>
        {activeFilters.map((filter) => (
          <FilterChip
            key={filter.id}
            label={filter.label}
            variant={filter.variant}
            onRemove={() => removeFilter(filter.id)}
          />
        ))}
      </FilterChipGroup>
      <Select defaultValue="newest">
        <SelectTrigger className="w-[160px]" size="sm">
          <SelectValue placeholder="مرتب‌سازی" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="newest">جدیدترین</SelectItem>
          <SelectItem value="followers">بیشترین دنبال‌کننده</SelectItem>
          <SelectItem value="engagement">بیشترین تعامل</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

type SortDirection = 'asc' | 'desc' | null
type SortColumn = 'name' | 'followers' | 'engagementRate' | null

interface Influencer {
  id: number
  name: string
  avatar: string
  platform: 'instagram' | 'twitter' | 'tiktok' | 'youtube'
  followers: number
  engagementRate: number
  status: 'active' | 'pending' | 'inactive'
}

const influencers: Influencer[] = [
  {
    id: 1,
    name: 'سارا احمدی',
    avatar: '/avatars/sara.jpg',
    platform: 'instagram',
    followers: 125000,
    engagementRate: 0.042,
    status: 'active',
  },
  {
    id: 2,
    name: 'محمد رضایی',
    avatar: '/avatars/mohammad.jpg',
    platform: 'twitter',
    followers: 89000,
    engagementRate: 0.068,
    status: 'active',
  },
  {
    id: 3,
    name: 'نازنین کریمی',
    avatar: '/avatars/nazanin.jpg',
    platform: 'tiktok',
    followers: 350000,
    engagementRate: 0.021,
    status: 'pending',
  },
  {
    id: 4,
    name: 'علی محمدی',
    avatar: '/avatars/ali.jpg',
    platform: 'youtube',
    followers: 1200000,
    engagementRate: 0.015,
    status: 'inactive',
  },
]

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

function InfluencerTable() {
  const [sortColumn, setSortColumn] = useState<SortColumn>(null)
  const [sortDirection, setSortDirection] = useState<SortDirection>(null)

  function handleSort(column: SortColumn) {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
    } else {
      setSortColumn(column)
      setSortDirection('asc')
    }
  }

  const sorted = useMemo(() => {
    return [...influencers].sort((a, b) => {
      if (!sortColumn || !sortDirection) return 0
      const dir = sortDirection === 'asc' ? 1 : -1
      if (sortColumn === 'name') return a.name.localeCompare(b.name, 'fa') * dir
      return (a[sortColumn] - b[sortColumn]) * dir
    })
  }, [sortColumn, sortDirection])

  const getSortDir = (col: SortColumn) => (sortColumn === col ? (sortDirection ?? 'none') : 'none')

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead sortDirection={getSortDir('name')}>
            <TableSortHeader sorted={sortColumn === 'name' ? (sortDirection ?? false) : false} onClick={() => handleSort('name')}>
              نام
            </TableSortHeader>
          </TableHead>
          <TableHead>پلتفرم</TableHead>
          <TableHead sortDirection={getSortDir('followers')}>
            <TableSortHeader
              sorted={sortColumn === 'followers' ? (sortDirection ?? false) : false}
              onClick={() => handleSort('followers')}
            >
              دنبال‌کننده‌ها
            </TableSortHeader>
          </TableHead>
          <TableHead sortDirection={getSortDir('engagementRate')}>
            <TableSortHeader
              sorted={sortColumn === 'engagementRate' ? (sortDirection ?? false) : false}
              onClick={() => handleSort('engagementRate')}
            >
              نرخ تعامل
            </TableSortHeader>
          </TableHead>
          <TableHead>وضعیت</TableHead>
          <TableHead className="w-[50px]" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {sorted.map((influencer) => (
          <TableRow key={influencer.id}>
            <TableCell>
              <div className="flex items-center gap-3">
                <Avatar className="size-8">
                  <AvatarImage src={influencer.avatar} alt={influencer.name} />
                  <AvatarFallback>{influencer.name[0]}</AvatarFallback>
                </Avatar>
                <span className="font-medium">{influencer.name}</span>
              </div>
            </TableCell>
            <TableCell>
              <SocialPlatformBadge platform={influencer.platform} size="sm" showLabel />
            </TableCell>
            <TableCell>{influencer.followers.toLocaleString('en-US')}</TableCell>
            <TableCell>
              <EngagementRateBar currentRate={influencer.engagementRate} followers={influencer.followers} locale="fa" />
            </TableCell>
            <TableCell>
              <Badge variant={STATUS_MAP[influencer.status].variant}>{STATUS_MAP[influencer.status].label}</Badge>
            </TableCell>
            <TableCell>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>مشاهده پروفایل</DropdownMenuItem>
                  <DropdownMenuItem>ویرایش</DropdownMenuItem>
                  <DropdownMenuItem variant="destructive">حذف</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

function InfluencerEmptyState() {
  return (
    <Empty>
      <EmptyIcon>
        <Search className="h-6 w-6" />
      </EmptyIcon>
      <EmptyTitle>اینفلوئنسری یافت نشد</EmptyTitle>
      <EmptyDescription>فیلترهای خود را تغییر دهید یا اینفلوئنسر جدید اضافه کنید.</EmptyDescription>
      <Button className="mt-4" size="sm">
        <Plus className="h-4 w-4" />
        افزودن اینفلوئنسر
      </Button>
    </Empty>
  )
}

{
  data.length === 0 ? <InfluencerEmptyState /> : <InfluencerTable data={data} />
}

function InfluencerTableSkeleton() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>نام</TableHead>
          <TableHead>پلتفرم</TableHead>
          <TableHead>دنبال‌کننده‌ها</TableHead>
          <TableHead>نرخ تعامل</TableHead>
          <TableHead>وضعیت</TableHead>
          <TableHead className="w-[50px]" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {Array.from({ length: 5 }).map((_, i) => (
          <TableRow key={i}>
            <TableCell>
              <div className="flex items-center gap-3">
                <Skeleton className="h-8 w-8 rounded-full" />
                <Skeleton className="h-4 w-24" />
              </div>
            </TableCell>
            <TableCell>
              <Skeleton className="h-5 w-20" />
            </TableCell>
            <TableCell>
              <Skeleton className="h-4 w-16" />
            </TableCell>
            <TableCell>
              <Skeleton className="h-4 w-32" />
            </TableCell>
            <TableCell>
              <Skeleton className="h-5 w-14 rounded-full" />
            </TableCell>
            <TableCell>
              <Skeleton className="h-8 w-8" />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

{
  isLoading ? (
    <InfluencerTableSkeleton />
  ) : error && !data.length ? (
    <ErrorState message="داده‌ها بارگذاری نشد" onRetry={refetch} />
  ) : data.length === 0 ? (
    <InfluencerEmptyState />
  ) : (
    <InfluencerTable data={data} />
  )
}

function InfluencerPagination({
  currentPage,
  totalPages,
  totalCount,
  onPageChange,
}: {
  currentPage: number
  totalPages: number
  totalCount: number
  onPageChange: (page: number) => void
}) {
  return (
    <div className="flex items-center justify-between pt-4">
      <span className="text-sm text-muted-foreground">{totalCount.toLocaleString('en-US')} اینفلوئنسر</span>
      <PaginationControlled
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={onPageChange}
        showPrevNext
      />
    </div>
  )
}

'use client'

import { useState, useEffect, useCallback } from 'react'

interface TableState {
  search: string
  filters: { id: string; label: string; variant: 'default' | 'brand' }[]
  sortColumn: string | null
  sortDirection: 'asc' | 'desc' | null
  page: number
  pageSize: number
}

const initialState: TableState = {
  search: '',
  filters: [],
  sortColumn: null,
  sortDirection: null,
  page: 1,
  pageSize: 10,
}

export function useTableState() {
  const [state, setState] = useState<TableState>(initialState)

  // بازگشت به صفحه اول هنگام تغییر جستجو یا فیلتر
  const setSearch = useCallback((search: string) => {
    setState((prev) => ({ ...prev, search, page: 1 }))
  }, [])

  const addFilter = useCallback((filter: TableState['filters'][number]) => {
    setState((prev) => ({
      ...prev,
      filters: [...prev.filters, filter],
      page: 1,
    }))
  }, [])

  const removeFilter = useCallback((id: string) => {
    setState((prev) => ({
      ...prev,
      filters: prev.filters.filter((f) => f.id !== id),
      page: 1,
    }))
  }, [])

  const setSort = useCallback((column: string) => {
    setState((prev) => {
      if (prev.sortColumn === column) {
        return {
          ...prev,
          sortDirection: prev.sortDirection === 'asc' ? 'desc' : 'asc',
        }
      }
      return { ...prev, sortColumn: column, sortDirection: 'asc' }
    })
  }, [])

  const setPage = useCallback((page: number) => {
    setState((prev) => ({ ...prev, page }))
  }, [])

  return { state, setSearch, addFilter, removeFilter, setSort, setPage }
}

<span className="text-sm text-muted-foreground">
  {totalCount > 0 ? `${totalCount.toLocaleString('en-US')} اینفلوئنسر` : 'نتیجه‌ای یافت نشد'}
</span>

const [searchValue, setSearchValue] = useState('')
const [debouncedSearch, setDebouncedSearch] = useState('')

useEffect(() => {
  const timer = setTimeout(() => {
    setDebouncedSearch(searchValue)
  }, 300)
  return () => clearTimeout(timer)
}, [searchValue])

<TableHead sortDirection={sortColumn === 'name' ? sortDirection : 'none'}>
  <TableSortHeader sorted={sortColumn === 'name' ? (sortDirection ?? false) : false} onClick={() => handleSort('name')}>
    نام
  </TableSortHeader>
</TableHead>

<FilterChipGroup>
  {activeFilters.map((filter) => (
    <FilterChip
      key={filter.id}
      label={filter.label}
      variant={filter.variant}
      onRemove={() => removeFilter(filter.id)}
    />
  ))}
</FilterChipGroup>

<PaginationControlled
  currentPage={page}
  totalPages={Math.ceil(totalCount / pageSize)}
  onPageChange={setPage}
  showPrevNext
/>

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

// ✅ درست — وضعیت مرتب‌سازی به سرور ارسال می‌شود و سرور صفحهٔ مرتب‌شده را برمی‌گرداند
useEffect(() => {
  fetchInfluencers({
    page: state.page,
    sortColumn: state.sortColumn,
    sortDirection: state.sortDirection,
    search: debouncedSearch,
  })
}, [state.page, state.sortColumn, state.sortDirection, debouncedSearch])

// ❌ غلط — در پیش‌نمایش 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>

// ✅ درست — کدپوینت لاتین با جداکنندهٔ هزار؛ فونت آن را «۱,۲۳۴,۵۶۷» نشان می‌دهد
<TableCell>{formatNumber(influencer.followers)}</TableCell>

// ❌ غلط — لحن محاوره‌ای
<EmptyDescription>چیزی پیدا نشد! فیلترها رو عوض کن.</EmptyDescription>

// ✅ درست — فارسی رسمی
<EmptyDescription>نتیجه‌ای یافت نشد. فیلترهای خود را تغییر دهید یا اینفلوئنسر جدید اضافه کنید.</EmptyDescription>