import React, { useState, useEffect } from 'react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { useToast } from "@/components/ui/use-toast";
import { useForm } from "react-hook-form";
import {
    Plus,
    Edit,
    Trash2,
    Search,
    Loader2,
    FolderKanban,
    CheckCircle2,
    XCircle,
    Calendar,
    MousePointerClick,
    Clock
} from "lucide-react";
import DynamicIcon from '@/components/DynamicIcon';
import LucideIconSelect from '@/components/LucideIconSelect';
import {
    getWorkflowCategories,
    createWorkflowCategory,
    updateWorkflowCategory,
    deleteWorkflowCategory
} from '../service';
import type {
    WorkflowCategoryResponse,
    WorkflowCategoryRequest,
    WorkflowCategoryQuery
} from '../types';
import type { Page } from '@/types/base';

interface CategoryManageDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
}

const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
    open,
    onOpenChange,
    onSuccess
}) => {
    const { toast } = useToast();
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<Page<WorkflowCategoryResponse> | null>(null);
    const [searchText, setSearchText] = useState('');
    const [editMode, setEditMode] = useState(false);
    const [editRecord, setEditRecord] = useState<WorkflowCategoryResponse | null>(null);
    const [iconSelectOpen, setIconSelectOpen] = useState(false);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [deleteRecord, setDeleteRecord] = useState<WorkflowCategoryResponse | null>(null);

    const form = useForm<WorkflowCategoryRequest>({
        defaultValues: {
            name: '',
            code: '',
            description: '',
            icon: '',
            sort: 0,
            supportedTriggers: [],
            enabled: true,
        }
    });

    // 加载分类列表
    const loadCategories = async () => {
        setLoading(true);
        try {
            const query: WorkflowCategoryQuery = {
                pageNum: 0,
                pageSize: 100,
            };
            if (searchText) {
                query.name = searchText;
            }
            const result = await getWorkflowCategories(query);
            setData(result);
        } catch (error) {
            console.error('加载分类失败:', error);
            toast({
                variant: "destructive",
                title: "加载失败",
                description: "加载分类列表失败",
            });
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (open) {
            loadCategories();
        }
    }, [open, searchText]);

    // 触发方式选项
    const triggerOptions = [
        { value: 'MANUAL', label: '手动触发', icon: MousePointerClick },
        { value: 'SCHEDULED', label: '定时触发', icon: Clock },
        { value: 'EVENT', label: '事件触发', icon: Calendar },
    ];

    // 新建
    const handleCreate = () => {
        setEditRecord(null);
        form.reset({
            name: '',
            code: '',
            description: '',
            icon: '',
            sort: 0,
            supportedTriggers: [],
            enabled: true,
        });
        setEditMode(true);
    };

    // 编辑
    const handleEdit = (record: WorkflowCategoryResponse) => {
        setEditRecord(record);
        form.reset({
            name: record.name,
            code: record.code,
            description: record.description || '',
            icon: record.icon || '',
            sort: record.sort,
            supportedTriggers: record.supportedTriggers || [],
            enabled: record.enabled,
        });
        setEditMode(true);
    };

    // 打开删除确认对话框
    const handleDeleteClick = (record: WorkflowCategoryResponse) => {
        setDeleteRecord(record);
        setDeleteDialogOpen(true);
    };

    // 确认删除
    const confirmDelete = async () => {
        if (!deleteRecord) return;
        
        try {
            await deleteWorkflowCategory(deleteRecord.id);
            toast({
                title: "删除成功",
                description: `分类 "${deleteRecord.name}" 已删除`,
            });
            loadCategories();
            onSuccess?.();
            setDeleteDialogOpen(false);
            setDeleteRecord(null);
        } catch (error) {
            console.error('删除失败:', error);
            toast({
                variant: "destructive",
                title: "删除失败",
                description: error instanceof Error ? error.message : '未知错误',
            });
        }
    };

    // 保存
    const handleSave = async (values: WorkflowCategoryRequest) => {
        try {
            if (editRecord) {
                await updateWorkflowCategory(editRecord.id, values);
                toast({
                    title: "更新成功",
                    description: `分类 "${values.name}" 已更新`,
                });
            } else {
                await createWorkflowCategory(values);
                toast({
                    title: "创建成功",
                    description: `分类 "${values.name}" 已创建`,
                });
            }
            setEditMode(false);
            loadCategories();
            onSuccess?.();
        } catch (error) {
            console.error('保存失败:', error);
            toast({
                variant: "destructive",
                title: "保存失败",
                description: error instanceof Error ? error.message : '未知错误',
            });
        }
    };

    // 取消编辑
    const handleCancel = () => {
        setEditMode(false);
        setEditRecord(null);
        form.reset();
    };

    // 渲染触发方式
    const renderTriggers = (triggers?: string[]) => {
        if (!triggers || triggers.length === 0) {
            return <span className="text-muted-foreground text-sm">-</span>;
        }
        return (
            <div className="flex gap-1 flex-wrap max-w-[240px]">
                {triggers.map(trigger => {
                    const option = triggerOptions.find(o => o.value === trigger);
                    if (!option) return null;
                    const Icon = option.icon;
                    return (
                        <Badge key={trigger} variant="outline" className="inline-flex items-center gap-1 text-xs whitespace-nowrap">
                            <Icon className="h-3 w-3" />
                            {option.label}
                        </Badge>
                    );
                })}
            </div>
        );
    };

    return (
        <>
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-6xl max-h-[85vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <FolderKanban className="h-5 w-5" />
                        分类管理
                    </DialogTitle>
                </DialogHeader>

                {!editMode ? (
                    <div className="space-y-4">
                        {/* 搜索和新建 */}
                        <div className="flex items-center gap-4">
                            <div className="relative flex-1">
                                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                                <Input
                                    placeholder="搜索分类名称..."
                                    value={searchText}
                                    onChange={(e) => setSearchText(e.target.value)}
                                    className="pl-10"
                                />
                            </div>
                            <Button onClick={handleCreate}>
                                <Plus className="h-4 w-4 mr-2" />
                                新建分类
                            </Button>
                        </div>

                        {/* 分类列表 */}
                        <div className="rounded-md border overflow-x-auto">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead className="w-[160px]">分类名称</TableHead>
                                        <TableHead className="w-[140px]">分类代码</TableHead>
                                        <TableHead className="w-[60px]">图标</TableHead>
                                        <TableHead className="w-[240px]">支持触发方式</TableHead>
                                        <TableHead className="w-[80px] text-center">排序</TableHead>
                                        <TableHead className="w-[80px]">状态</TableHead>
                                        <TableHead className="min-w-[150px]">描述</TableHead>
                                        <TableHead className="w-[100px] text-right sticky right-0 bg-background shadow-[-2px_0_4px_rgba(0,0,0,0.05)]">操作</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {loading ? (
                                        <TableRow>
                                            <TableCell colSpan={8} className="h-24 text-center">
                                                <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                                            </TableCell>
                                        </TableRow>
                                    ) : data?.content && data.content.length > 0 ? (
                                        data.content.map((record) => (
                                            <TableRow key={record.id}>
                                                <TableCell className="font-medium text-sm">{record.name}</TableCell>
                                                <TableCell>
                                                    <code className="text-xs bg-muted px-2 py-0.5 rounded whitespace-nowrap">
                                                        {record.code}
                                                    </code>
                                                </TableCell>
                                                <TableCell>
                                                    {record.icon ? (
                                                        <div className="flex items-center justify-center">
                                                            <DynamicIcon name={record.icon} className="h-5 w-5" />
                                                        </div>
                                                    ) : (
                                                        <span className="text-muted-foreground text-sm">-</span>
                                                    )}
                                                </TableCell>
                                                <TableCell>
                                                    {renderTriggers(record.supportedTriggers)}
                                                </TableCell>
                                                <TableCell className="text-center">{record.sort}</TableCell>
                                                <TableCell>
                                                    <Badge
                                                        variant={record.enabled ? "success" : "secondary"}
                                                        className="inline-flex items-center gap-1 text-xs whitespace-nowrap"
                                                    >
                                                        {record.enabled ? (
                                                            <>
                                                                <CheckCircle2 className="h-3 w-3" />
                                                                启用
                                                            </>
                                                        ) : (
                                                            <>
                                                                <XCircle className="h-3 w-3" />
                                                                禁用
                                                            </>
                                                        )}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell className="max-w-[200px] truncate text-sm" title={record.description}>
                                                    {record.description || '-'}
                                                </TableCell>
                                                <TableCell className="sticky right-0 bg-background shadow-[-2px_0_4px_rgba(0,0,0,0.05)]">
                                                    <div className="flex items-center justify-end gap-1">
                                                        <Button
                                                            variant="ghost"
                                                            size="sm"
                                                            className="h-8 w-8 p-0"
                                                            onClick={() => handleEdit(record)}
                                                        >
                                                            <Edit className="h-3.5 w-3.5" />
                                                        </Button>
                                                        <Button
                                                            variant="ghost"
                                                            size="sm"
                                                            className="h-8 w-8 p-0"
                                                            onClick={() => handleDeleteClick(record)}
                                                        >
                                                            <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                                        </Button>
                                                    </div>
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    ) : (
                                        <TableRow>
                                            <TableCell colSpan={8} className="h-24 text-center text-muted-foreground">
                                                暂无分类数据
                                            </TableCell>
                                        </TableRow>
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    </div>
                ) : (
                    /* 编辑表单 */
                    <Form {...form}>
                        <form onSubmit={form.handleSubmit(handleSave)} className="space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                                <FormField
                                    control={form.control}
                                    name="name"
                                    rules={{ required: '请输入分类名称' }}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>分类名称</FormLabel>
                                            <FormControl>
                                                <Input placeholder="输入分类名称" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                <FormField
                                    control={form.control}
                                    name="code"
                                    rules={{ required: '请输入分类代码' }}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>分类代码</FormLabel>
                                            <FormControl>
                                                <Input placeholder="输入分类代码" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                <FormField
                                    control={form.control}
                                    name="icon"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>图标</FormLabel>
                                            <FormControl>
                                                <div className="flex items-center gap-2">
                                                    <Input 
                                                        placeholder="点击选择图标" 
                                                        value={field.value}
                                                        readOnly
                                                        onClick={() => setIconSelectOpen(true)}
                                                        className="cursor-pointer"
                                                    />
                                                    {field.value && (
                                                        <div className="flex items-center justify-center w-10 h-10 border rounded-md">
                                                            <DynamicIcon name={field.value} className="h-5 w-5" />
                                                        </div>
                                                    )}
                                                </div>
                                            </FormControl>
                                            <FormMessage />
                                            <LucideIconSelect
                                                open={iconSelectOpen}
                                                onOpenChange={setIconSelectOpen}
                                                value={field.value}
                                                onChange={field.onChange}
                                            />
                                        </FormItem>
                                    )}
                                />

                                <FormField
                                    control={form.control}
                                    name="sort"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>排序</FormLabel>
                                            <FormControl>
                                                <Input
                                                    type="number"
                                                    placeholder="输入排序值"
                                                    {...field}
                                                    onChange={(e) => field.onChange(Number(e.target.value))}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <FormField
                                control={form.control}
                                name="supportedTriggers"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>支持的触发方式</FormLabel>
                                        <div className="flex gap-4">
                                            {triggerOptions.map((option) => {
                                                const Icon = option.icon;
                                                const isSelected = field.value?.includes(option.value);
                                                return (
                                                    <Button
                                                        key={option.value}
                                                        type="button"
                                                        variant={isSelected ? "default" : "outline"}
                                                        size="sm"
                                                        onClick={() => {
                                                            const current = field.value || [];
                                                            if (isSelected) {
                                                                field.onChange(current.filter(v => v !== option.value));
                                                            } else {
                                                                field.onChange([...current, option.value]);
                                                            }
                                                        }}
                                                        className="inline-flex items-center gap-2"
                                                    >
                                                        <Icon className="h-4 w-4" />
                                                        {option.label}
                                                    </Button>
                                                );
                                            })}
                                        </div>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <FormField
                                control={form.control}
                                name="description"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>描述</FormLabel>
                                        <FormControl>
                                            <Textarea placeholder="输入分类描述" rows={3} {...field} />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <FormField
                                control={form.control}
                                name="enabled"
                                render={({ field }) => (
                                    <FormItem className="flex items-center justify-between rounded-lg border p-4">
                                        <div className="space-y-0.5">
                                            <FormLabel className="text-base">启用状态</FormLabel>
                                            <div className="text-sm text-muted-foreground">
                                                控制此分类是否可用
                                            </div>
                                        </div>
                                        <FormControl>
                                            <Switch
                                                checked={field.value}
                                                onCheckedChange={field.onChange}
                                            />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />

                            <div className="flex items-center justify-end gap-2 pt-4 border-t">
                                <Button type="button" variant="outline" onClick={handleCancel}>
                                    取消
                                </Button>
                                <Button type="submit">
                                    保存
                                </Button>
                            </div>
                        </form>
                    </Form>
                )}
            </DialogContent>
        </Dialog>

        {/* 删除确认对话框 */}
        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>确认删除分类</AlertDialogTitle>
                    <AlertDialogDescription asChild>
                        <div className="space-y-3">
                            <p>您确定要删除以下分类吗？此操作无法撤销。</p>
                            {deleteRecord && (
                                <div className="rounded-md border p-3 space-y-2 bg-muted/50">
                                    <div className="flex items-center gap-2">
                                        <span className="text-sm font-medium text-muted-foreground">分类名称:</span>
                                        <span className="font-medium">{deleteRecord.name}</span>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <span className="text-sm font-medium text-muted-foreground">分类代码:</span>
                                        <code className="text-xs bg-background px-2 py-1 rounded">
                                            {deleteRecord.code}
                                        </code>
                                    </div>
                                    {deleteRecord.icon && (
                                        <div className="flex items-center gap-2">
                                            <span className="text-sm font-medium text-muted-foreground">图标:</span>
                                            <DynamicIcon name={deleteRecord.icon} className="h-4 w-4" />
                                        </div>
                                    )}
                                    {deleteRecord.description && (
                                        <div className="flex items-start gap-2">
                                            <span className="text-sm font-medium text-muted-foreground">描述:</span>
                                            <span className="text-sm">{deleteRecord.description}</span>
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>取消</AlertDialogCancel>
                    <AlertDialogAction
                        onClick={confirmDelete}
                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                    >
                        确认删除
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    </>
    );
};

export default CategoryManageDialog;

