'use client';

import { Button } from '@nice/ui/components/button';
import { Tabs, TabsContent } from '@nice/ui/components/tabs';
import { IconDownload, IconPlus } from '@tabler/icons-react';

import {
	ArticleToolbar,
	ArticleTable,
	ArticlePagination,
	ArticlesProvider,
	useArticlesContext,
} from '@/components/articles';
import { useRouter } from 'next/navigation';
import React from 'react';
import { useSetPageInfo } from '@/components/providers/dashboard-provider';

// 页面内容组件
function ArticlesPageContent() {
	const router = useRouter();

	const { filters, updateFilters } = useArticlesContext();


	// 检查是否有筛选条件
	const hasFilters = filters.searchTerm !== '' || filters.statusFilter !== 'all' || filters.categoryFilter !== 'all';

	// 新建文章
	const handleCreateArticle = () => {
		router.push('/editor');
	};
	useSetPageInfo({
		title: '文章管理',
		subtitle: '创建、编辑和管理您的文章内容',
		rightContent: (
			<div className="flex items-center gap-3">
				<Button variant="outline" size="sm" className="h-9 px-3">
					<IconDownload className="h-4 w-4 mr-2" />
					导出
				</Button>
				<Button size="sm" className="h-9 px-4" onClick={handleCreateArticle}>
					<IconPlus className="h-4 w-4 mr-2" />
					新建文章
				</Button>
			</div>
		),
	})
	return (
		<div className="flex flex-1 flex-col">
			{/* 统一工具栏 */}
			<Tabs
				value={filters.statusFilter}
				onValueChange={(value) => updateFilters({ statusFilter: value })}
				className="flex flex-1 flex-col"
			>
				<ArticleToolbar

				/>

				<TabsContent value={filters.statusFilter} className="flex flex-1 flex-col">
					<div className="flex flex-1 flex-col overflow-hidden">
						<ArticleTable hasFilters={hasFilters} />

						<ArticlePagination />
					</div>
				</TabsContent>
			</Tabs>
		</div>
	);
}

// 主页面组件，包装Provider
export default function ArticlesPage() {
	return (
		<ArticlesProvider>
			<ArticlesPageContent />
		</ArticlesProvider>
	);
}