casualroom/apps/fenghuo/web/components/profile/profile-data-table.tsx

'use client';

import * as React from 'react';
import {
	closestCenter,
	DndContext,
	KeyboardSensor,
	MouseSensor,
	TouchSensor,
	useSensor,
	useSensors,
	type DragEndEvent,
	type UniqueIdentifier,
} from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import {
	IconChevronDown,
	IconChevronLeft,
	IconChevronRight,
	IconChevronsLeft,
	IconChevronsRight,
	IconDotsVertical,
	IconLayoutColumns,
	IconPlus,
	IconStarFilled,
	IconBuilding,
	IconId,
	IconMars,
	IconVenus,
	IconEye,
	IconTrash,
} from '@tabler/icons-react';
import {
	ColumnDef,
	ColumnFiltersState,
	flexRender,
	getCoreRowModel,
	getFacetedRowModel,
	getFacetedUniqueValues,
	getFilteredRowModel,
	getSortedRowModel,
	Row,
	SortingState,
	useReactTable,
	VisibilityState,
} from '@tanstack/react-table';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { Badge } from '@nice/ui/components/badge';
import { Button } from '@nice/ui/components/button';
import { Checkbox } from '@nice/ui/components/checkbox';
import {
	DropdownMenu,
	DropdownMenuCheckboxItem,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@nice/ui/components/dropdown-menu';
import { Label } from '@nice/ui/components/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@nice/ui/components/table';
import { Avatar, AvatarFallback, AvatarImage } from '@nice/ui/components/avatar';
import { Input } from '@nice/ui/components/input';
import { ProfileDetail, ProfileMetadata } from '@fenghuo/common/profile';
import { TaxonomySlug } from '@fenghuo/common/term';
import { MultipleDeptSelector } from '../selector/dept-select';
import { useTranslation } from '@nice/i18n'

// 职务等级星星显示组件
function DutyLevelStars({ level }: { level: number | string }) {
	// 转换为数字并检查是否为有效的正整数
	const numLevel = Number(level);
	if (!numLevel || numLevel <= 0) return null;

	const stars = Array.from({ length: 3 }, (_, index) => {
		const filled = index < numLevel;
		return filled ? (
			<IconStarFilled key={index} className="size-3 text-yellow-500" />
		) : (
			null
		);
	});
	return <div className="flex items-center gap-0.5">{stars}</div>;
}

// 日期格式化辅助函数
function formatDate(date: Date | string | null | undefined): string {
	if (!date) return '-';
	try {
		return dayjs(date).format('YYYY-MM-DD');
	} catch {
		return '-';
	}
}

// 政治面貌和党派职务显示组件
function PoliticalInfo({ metadata }: { metadata?: ProfileMetadata }) {
	if (!metadata?.politicalStatus && !metadata?.partyPosition) {
		return <span className="text-muted-foreground">-</span>;
	}

	return (
		<div className="space-y-1">
			{metadata.politicalStatus && (
				<Badge variant="outline" className="text-xs">
					{metadata.politicalStatus}
				</Badge>
			)}
			{metadata.partyPosition && (
				<div className="text-xs text-muted-foreground break-words">{metadata.partyPosition}</div>
			)}
		</div>
	);
}

// 籍贯显示组件
function NativePlace({ native }: { native?: ProfileMetadata['native'] }) {
	if (!native) return <span className="text-muted-foreground">-</span>;

	const parts = [native.province, native.city, native.county].filter(Boolean);
	return <span className="break-words">{parts.join(' ')}</span>;
}

// 学历信息显示组件
function EducationInfo({ metadata }: { metadata?: ProfileMetadata }) {
	if (!metadata?.education && !metadata?.educationForm && !metadata?.schoolMajor) {
		return <span className="text-muted-foreground">-</span>;
	}

	return (
		<div className="space-y-1">
			<div className="flex items-start gap-1 flex-wrap">
				{metadata.education && (
					<Badge variant="outline" className="text-xs flex-shrink-0">
						{metadata.education}
					</Badge>
				)}
				{metadata.educationForm && (
					<span className="text-xs text-muted-foreground break-words">({metadata.educationForm})</span>
				)}
			</div>
			{metadata.schoolMajor && (
				<div className="text-xs text-muted-foreground break-words">{metadata.schoolMajor}</div>
			)}
		</div>
	);
}

// 组织信息展示组件
function OrganizationInfo({ organization }: { organization?: ProfileDetail['organization'] }) {
	const { t } = useTranslation();

	if (!organization) {
		return (
			<div className="flex items-center gap-2">
				<IconBuilding className="size-4 text-muted-foreground flex-shrink-0" />
				<div className="text-sm">{t('profile.profile_table.table.no_organization')}</div>
			</div>
		);
	}

	// 提取组织类型术语（作为标签展示）
	const organizationTypeTerms = organization.terms?.filter(
		(term) => term.taxonomy?.slug === TaxonomySlug.ORGANIZATION_TYPE
	) || [];

	// 提取专业术语（作为小字展示）
	const professionTerms = organization.terms?.filter(
		(term) => term.taxonomy?.slug === TaxonomySlug.PROFESSION
	) || [];

	return (
		<div className="flex items-start gap-2">
			<IconBuilding className="size-4 text-muted-foreground flex-shrink-0 mt-0.5" />
			<div className="space-y-1 min-w-0 flex-1">
				<div className="flex items-start gap-2 flex-wrap">
					{
						organization.parentId ? (
							<span className="text-sm break-words min-w-0">{organization?.parent?.name}/{organization.name}</span>
						) : (
							<span className="text-sm break-words min-w-0">{organization.name}</span>
						)
					}
					{/* 组织类型标签 */}
					{organizationTypeTerms.map((term) => (
						<Badge key={term.id} variant="secondary" className="text-xs flex-shrink-0">
							{term.name}
						</Badge>
					))}
				</div>
				{/* 专业信息 */}
				{professionTerms.length > 0 && (
					<div className="text-xs text-muted-foreground break-words">
						{professionTerms.map((term) => term.name).join(' · ')}
					</div>
				)}
			</div>
		</div>
	);
}

// 可拖拽行组件
function DraggableRow({ row }: { row: Row<ProfileDetail> }) {
	const { transform, transition, setNodeRef, isDragging } = useSortable({
		id: row.original.id,
	});

	return (
		<TableRow
			data-state={row.getIsSelected() && 'selected'}
			data-dragging={isDragging}
			ref={setNodeRef}
			className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
			style={{
				transform: CSS.Transform.toString(transform),
				transition: transition,
			}}
		>
			{row.getVisibleCells().map((cell) => (
				<TableCell
					key={cell.id}
					className="whitespace-normal break-words"
					style={{
						width: `${cell.column.getSize()}px`,
						minWidth: `${cell.column.getSize()}px`,
						maxWidth: `${cell.column.getSize()}px`,
					}}
				>
					{flexRender(cell.column.columnDef.cell, cell.getContext())}
				</TableCell>
			))}
		</TableRow>
	);
}

// 分页信息接口
interface PaginationInfo {
	page: number;
	pageSize: number;
	totalPages: number;
	totalCount: number;
	hasNextPage: boolean;
	hasPreviousPage: boolean;
}

// 主数据表组件
export function ProfileDataTable({
	data: initialData,
	isLoading = false,
	pagination,
	onPageChange,
	onPageSizeChange,
	onAddEmployee,
	onViewDetail,
	onDeleteEmployee,
	searchValue = '',
	onSearchChange,
	// 添加部门筛选相关属性
	selectedOrganizationIds = [],
	onOrganizationChange,
	sortBy = 'default',
	onSortChange,
}: {
	data: ProfileDetail[];
	isLoading?: boolean;
	pagination?: PaginationInfo;
	onPageChange?: (page: number) => void;
	onPageSizeChange?: (size: number) => void;
	onAddEmployee?: () => void;
	onViewDetail?: (profileId: string) => void;
	onDeleteEmployee?: (profileId: string) => void;
	searchValue?: string;
	onSearchChange?: (value: string) => void;
	// 添加部门筛选相关类型
	selectedOrganizationIds?: string[];
	onOrganizationChange?: (organizationIds: string[]) => void;
	// 添加排序相关类型
	sortBy?: string;
	onSortChange?: (sortBy: string) => void;
}) {
	const [data, setData] = React.useState(() => initialData);
	const [rowSelection, setRowSelection] = React.useState({});
	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({
		// 默认隐藏的列
		hireInfo: false,
		politicalInfo: false,
		nativePlace: false,
		trainAppraisal: false,
		educationInfo: false,
		otherInfo: false,
		birthDate: false,
	});
	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
	const [sorting, setSorting] = React.useState<SortingState>([]);

	// 移除本地分页状态，使用服务端分页
	const sortableId = React.useId();
	const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
	const { t } = useTranslation();
	// 定义列配置 - 移到组件内部以访问回调函数
	const columns: ColumnDef<ProfileDetail>[] = [
		{
			id: 'select',
			header: ({ table }) => (
				<div className="flex items-center justify-center">
					<Checkbox
						checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
						onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
						aria-label={t('common.select_all')}
					/>
				</div>
			),
			cell: ({ row }) => (
				<div className="flex items-center justify-center">
					<Checkbox
						checked={row.getIsSelected()}
						onCheckedChange={(value) => row.toggleSelected(!!value)}
						aria-label={t('common.select_row')}
					/>
				</div>
			),
			enableSorting: false,
			enableHiding: false,
			size: 20,
		},
		{
			accessorKey: 'name',
			header: t('profile.profile_table.column.name'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="flex items-center gap-3">
						<Avatar className="size-12 flex-shrink-0">
							{profile.avatar ? (
								<AvatarImage
									src={profile.avatar}
									alt={profile.name}
									className="object-contain"  // 添加这个类
								/>
							) : (
								<AvatarFallback className="text-xs">
									{profile.name.slice(0, 1)}
								</AvatarFallback>
							)}
						</Avatar>
						<div className="flex flex-row items-center justify-center gap-1">
							<div className="font-medium">{profile.name}</div>
							<div className="text-xs text-muted-foreground">
								{profile.gender === 1 ? (
									<IconMars className="size-4 text-blue-500" />
								) : (
									<IconVenus className="size-4 text-pink-500" />
								)}
							</div>
						</div>
					</div>
				);
			},
			enableHiding: false,
			size: 120,
		},
		{
			accessorKey: 'certificates',
			header: t('profile.profile_table.column.id_card'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="space-y-1">
						<div className="text-sm font-mono flex items-center gap-1 break-all">
							<IconId className="size-4 text-muted-foreground flex-shrink-0" />
							<span className="break-all">{profile.paperId}</span>
						</div>
						{profile.paperId && (
							<div className="text-xs text-muted-foreground font-mono break-all">{t('profile.profile_table.table.id_card_label')}{profile.idNum}</div>
						)}
					</div>
				);
			},
			enableHiding: true,
			size: 140,
		},
		{
			accessorKey: 'command',
			header: t('profile.profile_table.column.formation_command'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="text-xs break-words whitespace-normal text-muted-foreground">
						{profile.command || <span className="text-muted-foreground"></span>}
					</div>
				);
			},
			enableHiding: true,
			size: 120,
		},
		{
			accessorKey: 'dutyInfo',
			header: t('profile.profile_table.column.duty'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="space-y-1">
						<div className="text-sm font-medium flex items-center gap-2 break-words">
							<span className="break-words">{profile.dutyName}</span>
							{profile.dutyLevel > 0 && <DutyLevelStars level={profile.dutyLevel} />}
						</div>
						<div className="text-xs text-muted-foreground break-words">{profile.dutyCode}</div>
					</div>
				);
			},
			enableHiding: true,
			size: 100,
		},
		{
			accessorKey: 'organization',
			header: t('profile.profile_table.column.organization'),
			cell: ({ row }) => {
				const profile = row.original;
				return <OrganizationInfo organization={profile.organization} />;
			},
			enableHiding: true,
			size: 180,
		},
		{
			accessorKey: 'identityInfo',
			header: t('profile.profile_table.column.identity'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="space-y-1">
						{profile.identity && (
							<div className="flex items-start gap-2 flex-wrap">
								<Badge variant="outline" className="text-xs flex-shrink-0">
									{profile.identity}
								</Badge>
								{
									profile.level && (
										<span className="font-medium break-words min-w-0">{profile.level}</span>
									)
								}
							</div>
						)}

						{profile.levelDate && (
							<div className="text-muted-foreground text-xs break-words">
								{formatDate(profile.levelDate)}
							</div>
						)}
					</div>
				);
			},
			enableHiding: true,
			size: 120,
		},
		{
			accessorKey: 'hireInfo',
			header: t('profile.profile_table.column.hire_date'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="space-y-1">
						<div className="text-sm break-words">{formatDate(profile.hireDate)}</div>
						{profile.relativeHireDate && profile.hireDate !== profile.relativeHireDate && (
							<div className="text-xs text-muted-foreground break-words">
								{t('profile.profile_sheet.relative_hire_time')}: {formatDate(profile.relativeHireDate)}
							</div>
						)}
					</div>
				);
			},
			enableHiding: true,
			size: 120,
		},

		// 以下列默认隐藏
		{
			accessorKey: 'politicalInfo',
			header: t('profile.profile_table.column.political'),
			cell: ({ row }) => {
				const metadata = row.original.metadata as ProfileMetadata;
				return <PoliticalInfo metadata={metadata} />;
			},
			enableHiding: true,
			size: 100,
		},
		{
			accessorKey: 'nativePlace',
			header: t('profile.profile_table.column.native'),
			cell: ({ row }) => {
				const metadata = row.original.metadata as ProfileMetadata;
				return <NativePlace native={metadata?.native} />;
			},
			enableHiding: true,
			size: 130,
		},
		{
			accessorKey: 'educationInfo',
			header: t('profile.profile_table.column.education'),
			cell: ({ row }) => {
				const metadata = row.original.metadata as ProfileMetadata;
				return <EducationInfo metadata={metadata} />;
			},
			enableHiding: true,
			size: 100,
		},
		{
			accessorKey: 'birthDate',
			header: t('profile.profile_table.table.birth_date'),
			cell: ({ row }) => {
				const profile = row.original;
				return (
					<div className="text-sm break-words font-medium">
						{formatDate(profile.birthday)}
					</div>
				);
			},
			enableHiding: true,
			size: 80,
		},
		{
			id: 'actions',
			header: t('common.actions'),
			cell: ({ row }) => (
				<DropdownMenu>
					<DropdownMenuTrigger asChild>
						<Button variant="ghost" className="data-[state=open]:bg-muted text-muted-foreground flex size-8" size="icon">
							<IconDotsVertical />
							<span className="sr-only">{t('common.open_menu')}</span>
						</Button>
					</DropdownMenuTrigger>
					<DropdownMenuContent align="end" className="w-32">
						<DropdownMenuItem onClick={() => onViewDetail?.(row.original.id)}>
							<IconEye className="mr-2 h-4 w-4 cursor-pointer" />
							{t('common.view_details')}
						</DropdownMenuItem>
						<DropdownMenuSeparator />
						<DropdownMenuItem variant="destructive" onClick={() => onDeleteEmployee?.(row.original.id)}>
							<IconTrash className="mr-2 h-4 w-4" />
							{t('common.delete')}
						</DropdownMenuItem>
					</DropdownMenuContent>
				</DropdownMenu>
			),
			enableHiding: false,
			size: 50,
		},
	];

	// 当数据更新时，同步本地状态
	React.useEffect(() => {
		setData(initialData);
	}, [initialData]);

	const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ id }) => id) || [], [data]);

	const table = useReactTable({
		data,
		columns,
		state: {
			sorting,
			columnVisibility,
			rowSelection,
			columnFilters,
		},
		getRowId: (row) => row.id,
		enableRowSelection: true,
		onRowSelectionChange: setRowSelection,
		onSortingChange: setSorting,
		onColumnFiltersChange: setColumnFilters,
		onColumnVisibilityChange: setColumnVisibility,
		getCoreRowModel: getCoreRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		getSortedRowModel: getSortedRowModel(),
		getFacetedRowModel: getFacetedRowModel(),
		getFacetedUniqueValues: getFacetedUniqueValues(),
		// 禁用本地分页，使用服务端分页
		manualPagination: true,
		// 禁用列调整大小功能，保持列宽度固定
		enableColumnResizing: false,
	});

	function handleDragEnd(event: DragEndEvent) {
		const { active, over } = event;
		if (active && over && active.id !== over.id) {
			setData((data) => {
				const oldIndex = dataIds.indexOf(active.id);
				const newIndex = dataIds.indexOf(over.id);
				return arrayMove(data, oldIndex, newIndex);
			});
		}
	}

	return (
		<div className="w-full space-y-4">
			{/* 顶部工具栏 */}
			<div className="flex items-center justify-between">
				<div className="flex items-center gap-4">
					<h2 className="text-lg font-semibold">{t('profile.profile_table.title')}</h2>
					<Badge variant="outline">
						{isLoading ? t('common.loading') : t('profile.profile_table.table.records_count', { count: pagination?.totalCount || 0 })}
					</Badge>
				</div>
				<div className="flex items-center gap-2">
					{/* 部门筛选器 */}
					<MultipleDeptSelector
						value={selectedOrganizationIds}
						onValueChange={onOrganizationChange}
						placeholder={t('profile.profile_table.toolbar.filter_organization')}
						className="w-92 h-8"
						allowClear
					/>
					{/* 搜索框 */}
					<div className="relative]">
						<Input
							placeholder={t('profile.profile_table.toolbar.search_placeholder')}
							value={searchValue}
							onChange={(e) => onSearchChange?.(e.target.value)}
							className="w-56 border border-[#5D6E89] h-8"
						/>
					</div>
					{/* 列显示选择器 */}
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button variant="outline" size="sm">
								<IconLayoutColumns className="size-4" />
								<span className="hidden lg:inline">{t('common.custom_columns')}</span>
								<span className="lg:hidden">{t('common.columns')}</span>
								<IconChevronDown className="size-4" />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end" className="w-56">
							{table
								.getAllColumns()
								.filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
								.map((column) => {
									return (
										<DropdownMenuCheckboxItem
											key={column.id}
											className="capitalize"
											checked={column.getIsVisible()}
											onCheckedChange={(value) => column.toggleVisibility(!!value)}
											onSelect={(event) => {
												event.preventDefault();
											}}
										>
											{column.columnDef.header as string}
										</DropdownMenuCheckboxItem>
									);
								})}
						</DropdownMenuContent>
					</DropdownMenu>

					{/* 排序方式选择器 */}
					<Select value={sortBy || 'default'} onValueChange={onSortChange}>
						<SelectTrigger className="w-46 border-[#5D6E89] !h-8 min-h-8">
							<SelectValue placeholder={t('profile.profile_table.toolbar.sort_method')} />
						</SelectTrigger>
						<SelectContent>
							<SelectItem value="default">{t('profile.profile_table.toolbar.default_sort')}</SelectItem>
							<SelectItem value="dutyLevelDown">{t('profile.profile_table.toolbar.duty_level_desc')}</SelectItem>
							<SelectItem value="dutyLevelUp">{t('profile.profile_table.toolbar.duty_level_asc')}</SelectItem>
							<SelectItem value="hireDateDown">{t('profile.profile_table.toolbar.hire_date_desc')}</SelectItem>
							<SelectItem value="hireDateUp">{t('profile.profile_table.toolbar.hire_date_asc')}</SelectItem>
							<SelectItem value="birthdayDown">{t('profile.profile_table.toolbar.birthday_desc')}</SelectItem>
							<SelectItem value="birthdayUp">{t('profile.profile_table.toolbar.birthday_asc')}</SelectItem>
						</SelectContent>
					</Select>

					<Button variant="outline" className='border-[#5D6E89]' size="sm" onClick={onAddEmployee}>
						<IconPlus className="size-4" />
						<span className="hidden lg:inline">{t('profile.profile_table.toolbar.add_employee')}</span>
						<span className="lg:hidden">{t('common.add')}</span>
					</Button>
				</div>
			</div>

			{/* 数据表 */}
			<div className="rounded-md border border-border max-h-[720px] overflow-auto">
				<DndContext
					collisionDetection={closestCenter}
					modifiers={[restrictToVerticalAxis]}
					onDragEnd={handleDragEnd}
					sensors={sensors}
					id={sortableId}
				>
					<Table className="table-fixed w-full" stickyHeader>
						<TableHeader className="sticky top-0 z-10 bg-background">
							{table.getHeaderGroups().map((headerGroup) => (
								<TableRow key={headerGroup.id} className="bg-muted/50">
									{headerGroup.headers.map((header) => {
										return (
											<TableHead
												key={header.id}
												colSpan={header.colSpan}
												className="whitespace-normal break-words"
												style={{
													width: `${header.getSize()}px`,
													minWidth: `${header.getSize()}px`,
													maxWidth: `${header.getSize()}px`,
												}}
											>
												{header.isPlaceholder
													? null
													: flexRender(header.column.columnDef.header, header.getContext())}
											</TableHead>
										);
									})}
								</TableRow>
							))}
						</TableHeader>
						<TableBody>
							{isLoading ? (
								<TableRow>
									<TableCell colSpan={table.getAllColumns().filter(column => column.getIsVisible()).length} className="h-24 text-center">
										{t('common.loading')}
									</TableCell>
								</TableRow>
							) : table.getRowModel().rows?.length ? (
								<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
									{table.getRowModel().rows.map((row) => (
										<DraggableRow key={row.id} row={row} />
									))}
								</SortableContext>
							) : (
								<TableRow>
									<TableCell colSpan={table.getAllColumns().filter(column => column.getIsVisible()).length} className="h-24 text-center">
										{t('common.no_data')}
									</TableCell>
								</TableRow>
							)}
						</TableBody>
					</Table>
				</DndContext>
			</div>

			{/* 分页器 - 使用服务端分页 */}
			{pagination && (
				<div className="flex items-center justify-between px-4">
					<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
						{t('pagination.selected_rows', {
							selected: table.getFilteredSelectedRowModel().rows.length,
							total: pagination.totalCount
						})}
					</div>
					<div className="flex w-full items-center gap-8 lg:w-fit">
						<div className="hidden items-center gap-2 lg:flex">
							<Label htmlFor="rows-per-page" className="text-sm font-medium">
								{t('pagination.rows_per_page')}
							</Label>
							<Select
								value={`${pagination.pageSize}`}
								onValueChange={(value) => {
									onPageSizeChange?.(Number(value));
								}}
							>
								<SelectTrigger size="sm" className="w-20" id="rows-per-page">
									<SelectValue placeholder={pagination.pageSize} />
								</SelectTrigger>
								<SelectContent side="top">
									{[10, 20, 30, 40, 50].map((pageSize) => (
										<SelectItem key={pageSize} value={`${pageSize}`}>
											{pageSize}
										</SelectItem>
									))}
								</SelectContent>
							</Select>
						</div>
						<div className="flex w-fit items-center justify-center text-sm font-medium">
							{t('pagination.page_info', {
								current: pagination.page,
								total: pagination.totalPages
							})}
						</div>
						<div className="ml-auto flex items-center gap-2 lg:ml-0">
							<Button
								variant="outline"
								className="hidden h-8 w-8 p-0 lg:flex"
								onClick={() => onPageChange?.(1)}
								disabled={!pagination.hasPreviousPage}
							>
								<span className="sr-only">{t('pagination.first_page')}</span>
								<IconChevronsLeft />
							</Button>
							<Button
								variant="outline"
								className="size-8"
								size="icon"
								onClick={() => onPageChange?.(pagination.page - 1)}
								disabled={!pagination.hasPreviousPage}
							>
								<span className="sr-only">{t('pagination.previous_page')}</span>
								<IconChevronLeft />
							</Button>
							<Button
								variant="outline"
								className="size-8"
								size="icon"
								onClick={() => onPageChange?.(pagination.page + 1)}
								disabled={!pagination.hasNextPage}
							>
								<span className="sr-only">{t('pagination.next_page')}</span>
								<IconChevronRight />
							</Button>
							<Button
								variant="outline"
								className="hidden size-8 lg:flex"
								size="icon"
								onClick={() => onPageChange?.(pagination.totalPages)}
								disabled={!pagination.hasNextPage}
							>
								<span className="sr-only">{t('pagination.last_page')}</span>
								<IconChevronsRight />
							</Button>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}