import { useState } from 'react';
import { Button } from '@nice/ui/components/button';
import { Checkbox } from '@nice/ui/components/checkbox';
import { Input } from '@nice/ui/components/input';
import { Label } from '@nice/ui/components/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
import { TableCell, TableRow } from '@nice/ui/components/table';
import { IconCheck, IconX } from '@tabler/icons-react';
import { useArticlesContext } from './context';
import type { Article } from '@fenghuo/common';

interface ArticleQuickEditProps {
	article: Article;
}

export function ArticleQuickEdit({ article }: ArticleQuickEditProps) {
	const { handleQuickEditSave, setQuickEditId } = useArticlesContext();

	const [title, setTitle] = useState(article.title);
	const [status, setStatus] = useState(article.status);

	const handleSave = () => {
		handleQuickEditSave(article.id, { title, status });
	};

	const handleCancel = () => {
		setQuickEditId(null);
	};

	return (
		<TableRow className="bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30">
			<TableCell className="py-4">
				<Checkbox disabled className="opacity-50" />
			</TableCell>
			<TableCell colSpan={4} className="py-4">
				<div className="space-y-3">
					<div>
						<Label htmlFor="edit-title" className="text-xs font-medium text-muted-foreground">
							标题
						</Label>
						<Input
							id="edit-title"
							value={title}
							onChange={(e) => setTitle(e.target.value)}
							placeholder="文章标题"
							className="mt-1 font-medium"
						/>
					</div>
					<div className="flex gap-3">
						<div className="flex-1">
							<Label htmlFor="edit-status" className="text-xs font-medium text-muted-foreground">
								状态
							</Label>
							<Select value={status} onValueChange={(value) => setStatus(value as Article['status'])}>
								<SelectTrigger id="edit-status" className="mt-1">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="draft">草稿</SelectItem>
									<SelectItem value="published">已发布</SelectItem>
									<SelectItem value="archived">已归档</SelectItem>
								</SelectContent>
							</Select>
						</div>
					</div>
				</div>
			</TableCell>
			<TableCell colSpan={3} className="py-4">
				<div className="flex items-center justify-end gap-2">
					<Button size="sm" onClick={handleSave} className="h-8">
						<IconCheck className="h-3 w-3 mr-1" />
						保存
					</Button>
					<Button size="sm" variant="outline" onClick={handleCancel} className="h-8">
						<IconX className="h-3 w-3 mr-1" />
						取消
					</Button>
				</div>
			</TableCell>
		</TableRow>
	);
}