import { Badge } from '@nice/ui/components/badge';
import { Button } from '@nice/ui/components/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
import { Tabs, TabsList, TabsTrigger } from '@nice/ui/components/tabs';
import { BATCH_ACTIONS } from '@/lib/articles/constants';
import { useArticlesContext } from './context';

export function ArticleStatusTabs() {
	const { selectedArticles, batchAction, stats, setBatchAction, handleBatchAction, resetSelection } =
		useArticlesContext();

	return (
		<div className="px-6 pt-2 pb-4">
			<div className="flex items-center justify-between gap-4">
				<TabsList className="grid w-auto grid-cols-5">
					<TabsTrigger value="all" className="px-4">
						全部{' '}
						<Badge variant="secondary" className="ml-2 text-xs">
							{stats.all}
						</Badge>
					</TabsTrigger>
					<TabsTrigger value="published" className="px-4">
						已发布{' '}
						<Badge variant="secondary" className="ml-2 text-xs">
							{stats.published}
						</Badge>
					</TabsTrigger>
					<TabsTrigger value="draft" className="px-4">
						草稿{' '}
						<Badge variant="secondary" className="ml-2 text-xs">
							{stats.draft}
						</Badge>
					</TabsTrigger>
					<TabsTrigger value="archived" className="px-4">
						已归档{' '}
						<Badge variant="secondary" className="ml-2 text-xs">
							{stats.archived}
						</Badge>
					</TabsTrigger>
					<TabsTrigger value="trash" className="px-4">
						已删除{' '}
						<Badge variant="secondary" className="ml-2 text-xs">
							{stats.deleted}
						</Badge>
					</TabsTrigger>
				</TabsList>

				{/* 批量操作 */}
				{selectedArticles.length > 0 && (
					<div className="flex items-center gap-3 p-3 bg-primary/5 border border-primary/20 rounded-lg dark:bg-primary/10 dark:border-primary/30">
						<span className="text-sm font-medium text-primary dark:text-primary-foreground whitespace-nowrap">
							已选择 {selectedArticles.length} 篇
						</span>
						<Select value={batchAction} onValueChange={setBatchAction}>
							<SelectTrigger className="w-36 h-8">
								<SelectValue placeholder="批量操作" />
							</SelectTrigger>
							<SelectContent>
								{BATCH_ACTIONS.map((action) => (
									<SelectItem key={action.value} value={action.value}>
										<div className="flex items-center gap-2">
											<action.icon className="h-3 w-3" />
											{action.label}
										</div>
									</SelectItem>
								))}
							</SelectContent>
						</Select>
						<Button size="sm" onClick={handleBatchAction} disabled={!batchAction} className="h-8">
							执行
						</Button>
						<Button size="sm" variant="outline" onClick={resetSelection} className="h-8">
							取消
						</Button>
					</div>
				)}
			</div>
		</div>
	);
}