import React, { useState, useEffect, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DataTablePagination } from '@/components/ui/pagination';
import {
  Loader2, Plus, Search, Edit, Trash2, Play, CheckCircle2,
  Clock, Activity, Workflow, Eye, Pencil, FolderKanban
} from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { getDefinitions, getWorkflowCategoryList, deleteDefinition, publishDefinition, startWorkflowInstance } from './service';
import type { WorkflowDefinition, WorkflowDefinitionQuery, WorkflowCategoryResponse, WorkflowDefinitionStatus } from './types';
import type { Page } from '@/types/base';
import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
import EditModal from './components/EditModal';
import DeleteDialog from './components/DeleteDialog';
import DeployDialog from './components/DeployDialog';
import CategoryManageDialog from './components/CategoryManageDialog';
import StartWorkflowModal from './components/StartWorkflowModal';
import { getDefinitionById as getFormDefinitionById } from '@/pages/Form/Definition/service';
import type { FormDefinitionResponse } from '@/pages/Form/Definition/types';

/**
 * 工作流定义列表页
 */
const WorkflowDefinitionList: React.FC = () => {
  const navigate = useNavigate();
  const { toast } = useToast();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<Page<WorkflowDefinition> | null>(null);
  const [categories, setCategories] = useState<WorkflowCategoryResponse[]>([]);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editRecord, setEditRecord] = useState<WorkflowDefinition>();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteRecord, setDeleteRecord] = useState<WorkflowDefinition | null>(null);
  const [deployDialogOpen, setDeployDialogOpen] = useState(false);
  const [deployRecord, setDeployRecord] = useState<WorkflowDefinition | null>(null);
  const [categoryDialogOpen, setCategoryDialogOpen] = useState(false);
  const [startModalVisible, setStartModalVisible] = useState(false);
  const [startRecord, setStartRecord] = useState<WorkflowDefinition | null>(null);
  const [formDefinition, setFormDefinition] = useState<FormDefinitionResponse | null>(null);
  const [query, setQuery] = useState<WorkflowDefinitionQuery>({
    pageNum: DEFAULT_CURRENT - 1,
    pageSize: DEFAULT_PAGE_SIZE,
    name: '',
    categoryId: undefined,
    status: undefined
  });

  // 加载数据
  const loadData = async () => {
    setLoading(true);
    try {
      const result = await getDefinitions(query);
      setData(result);
    } catch (error) {
      console.error('加载工作流定义失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 加载分类
  const loadCategories = async () => {
    try {
      const result = await getWorkflowCategoryList();
      setCategories(result || []);
    } catch (error) {
      console.error('加载分类失败:', error);
    }
  };

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

  useEffect(() => {
    loadData();
  }, [query]);

  // 搜索
  const handleSearch = () => {
    setQuery(prev => ({ ...prev, pageNum: 0 }));
  };

  // 重置
  const handleReset = () => {
    setQuery({
      pageNum: 0,
      pageSize: DEFAULT_PAGE_SIZE,
      name: '',
      categoryId: undefined,
      status: undefined
    });
  };

  // 新建
  const handleCreate = async () => {
    try {
      // 先预加载分类列表，确保接口可用
      await getWorkflowCategoryList();
      // 接口成功，打开弹窗
      setEditRecord(undefined);
      setEditModalVisible(true);
    } catch (error) {
      // 接口失败，不打开弹窗，直接报错
      toast({
        title: '服务异常',
        description: '暂时无法申请',
        variant: 'destructive',
      });
    }
  };

  // 编辑
  const handleEdit = (record: WorkflowDefinition) => {
    setEditRecord(record);
    setEditModalVisible(true);
  };

  // 设计
  const handleDesign = (record: WorkflowDefinition) => {
    navigate(`/workflow/design/${record.id}`);
  };

  // 发布
  const handleDeploy = (record: WorkflowDefinition) => {
    setDeployRecord(record);
    setDeployDialogOpen(true);
  };

  const confirmDeploy = async () => {
    if (!deployRecord) return;
    try {
      await publishDefinition(deployRecord.id);
      toast({
        title: '发布成功',
        description: `工作流 "${deployRecord.name}" 已发布`,
      });
      loadData();
      setDeployDialogOpen(false);
      setDeployRecord(null);
    } catch (error) {
      console.error('发布失败:', error);
      toast({
        title: '发布失败',
        description: error instanceof Error ? error.message : '未知错误',
        variant: 'destructive'
      });
    }
  };

  // 删除
  const handleDelete = (record: WorkflowDefinition) => {
    setDeleteRecord(record);
    setDeleteDialogOpen(true);
  };

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

  // 启动工作流
  const handleStart = async (record: WorkflowDefinition) => {
    // 检查是否有关联的启动表单
    if (record.formDefinitionId) {
      // 加载表单定义数据
      try {
        const formDef = await getFormDefinitionById(record.formDefinitionId);
        setFormDefinition(formDef);
        setStartRecord(record);
        setStartModalVisible(true);
      } catch (error) {
        console.error('加载启动表单失败:', error);
        toast({
          title: '加载失败',
          description: '无法加载启动表单，请稍后重试',
          variant: 'destructive'
        });
      }
    } else {
      // 没有启动表单，直接启动（不传递表单数据）
      try {
        const result = await startWorkflowInstance({
          processKey: record.key
        });
        console.log('🚀 工作流启动成功:', result);
        toast({
          title: '启动成功',
          description: `工作流 "${record.name}" 已启动`,
        });
        loadData(); // 刷新列表
      } catch (error) {
        console.error('启动失败:', error);
        toast({
          title: '启动失败',
          description: error instanceof Error ? error.message : '未知错误',
          variant: 'destructive'
        });
      }
    }
  };

  // 处理启动工作流提交（带表单数据）
  const handleStartWorkflowSubmit = async (workflow: WorkflowDefinition, formData: Record<string, any>) => {
    try {
      console.log('🚀 启动工作流，携带表单数据:', formData);
      
      // 调用启动API，传递表单数据
      const result = await startWorkflowInstance({
        processKey: workflow.key,           // 流程定义key
        formKey: formDefinition?.key,       // 表单标识
        formData: formData,                  // 表单数据
        businessKey: undefined               // 自动生成 businessKey
      });
      
      console.log('✅ 工作流实例已创建:', result);
      
      toast({
        title: '启动成功',
        description: `工作流 "${workflow.name}" 已启动`,
      });
      
      loadData(); // 刷新列表
    } catch (error) {
      console.error('❌ 启动失败:', error);
      toast({
        title: '启动失败',
        description: error instanceof Error ? error.message : '未知错误',
        variant: 'destructive'
      });
      throw error; // 重新抛出让弹窗知道失败了
    }
  };

  // 状态徽章
  const getStatusBadge = (status: string) => {
    const statusMap: Record<string, {
      variant: 'default' | 'secondary' | 'destructive' | 'success' | 'outline';
      text: string;
      icon: React.ElementType
    }> = {
      DRAFT: { variant: 'outline', text: '草稿', icon: Clock },
      PUBLISHED: { variant: 'success', text: '已发布', icon: CheckCircle2 },
      DISABLED: { variant: 'secondary', text: '已停用', icon: Clock },
    };
    const statusInfo = statusMap[status] || { variant: 'outline', text: status, icon: Clock };
    const Icon = statusInfo.icon;
    return (
      <Badge variant={statusInfo.variant} className="inline-flex items-center gap-1">
        <Icon className="h-3 w-3" />
        {statusInfo.text}
      </Badge>
    );
  };

  // 统计数据
  const stats = useMemo(() => {
    const total = data?.totalElements || 0;
    const draftCount = data?.content?.filter(d => d.status === 'DRAFT').length || 0;
    const publishedCount = data?.content?.filter(d => d.status === 'PUBLISHED').length || 0;
    return { total, draftCount, publishedCount };
  }, [data]);

  const pageCount = data?.totalElements ? Math.ceil(data.totalElements / (query.pageSize || DEFAULT_PAGE_SIZE)) : 0;

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-foreground">工作流定义管理</h1>
        <p className="text-muted-foreground mt-2">
          创建和管理工作流定义，设计流程图并发布上线。
        </p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <Card className="bg-gradient-to-br from-blue-500/10 to-blue-500/5 border-blue-500/20">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-blue-700">总工作流</CardTitle>
            <Activity className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
            <p className="text-xs text-muted-foreground mt-1">全部工作流定义</p>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-yellow-500/10 to-yellow-500/5 border-yellow-500/20">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-yellow-700">草稿</CardTitle>
            <Clock className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.draftCount}</div>
            <p className="text-xs text-muted-foreground mt-1">待发布的工作流</p>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-green-500/10 to-green-500/5 border-green-500/20">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-green-700">已发布</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.publishedCount}</div>
            <p className="text-xs text-muted-foreground mt-1">正在使用的工作流</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>工作流列表</CardTitle>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={() => setCategoryDialogOpen(true)}>
              <FolderKanban className="h-4 w-4 mr-2" />
              分类管理
            </Button>
            <Button onClick={handleCreate}>
              <Plus className="h-4 w-4 mr-2" />
              新建工作流
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {/* 搜索栏 */}
          <div className="flex flex-wrap items-center gap-4 mb-4">
            <div className="flex-1 max-w-md">
              <Input
                placeholder="搜索工作流名称"
                value={query.name}
                onChange={(e) => setQuery(prev => ({ ...prev, name: e.target.value }))}
                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                className="h-9"
              />
            </div>
            <Select
              value={query.categoryId?.toString() || undefined}
              onValueChange={(value) => setQuery(prev => ({ ...prev, categoryId: Number(value) }))}
            >
              <SelectTrigger className="w-[160px] h-9">
                <SelectValue placeholder="全部分类" />
              </SelectTrigger>
              <SelectContent>
                {categories.map(cat => (
                  <SelectItem key={cat.id} value={cat.id.toString()}>
                    {cat.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={query.status || undefined}
              onValueChange={(value) => setQuery(prev => ({ ...prev, status: value as WorkflowDefinitionStatus | undefined }))}
            >
              <SelectTrigger className="w-[140px] h-9">
                <SelectValue placeholder="全部状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="DRAFT">草稿</SelectItem>
                <SelectItem value="PUBLISHED">已发布</SelectItem>
              </SelectContent>
            </Select>
            <Button onClick={handleSearch} className="h-9">
              <Search className="h-4 w-4 mr-2" />
              搜索
            </Button>
            <Button variant="outline" onClick={handleReset} className="h-9">
              重置
            </Button>
          </div>

          {/* 表格 */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[200px]">流程名称</TableHead>
                  <TableHead className="w-[150px]">流程标识</TableHead>
                  <TableHead className="w-[120px]">分类</TableHead>
                  <TableHead className="w-[80px]">版本</TableHead>
                  <TableHead className="w-[120px]">状态</TableHead>
                  <TableHead>描述</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell colSpan={7} className="h-24 text-center">
                      <div className="flex items-center justify-center">
                        <Loader2 className="h-6 w-6 animate-spin mr-2" />
                        <span className="text-sm text-muted-foreground">加载中...</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : data?.content && data.content.length > 0 ? (
                  data.content.map((record) => {
                    const categoryInfo = categories.find(c => c.id === record.categoryId);
                    const isDraft = record.status === 'DRAFT';
                    return (
                      <TableRow key={record.id} className="hover:bg-muted/50">
                        <TableCell className="font-medium">{record.name}</TableCell>
                        <TableCell>
                          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
                            {record.key}
                          </code>
                        </TableCell>
                        <TableCell>
                          {categoryInfo ? (
                            <Badge variant="outline">{categoryInfo.name}</Badge>
                          ) : (
                            <Badge variant="outline">未分类</Badge>
                          )}
                        </TableCell>
                        <TableCell>
                          <span className="font-mono text-sm">{record.flowVersion || 1}</span>
                        </TableCell>
                        <TableCell>{getStatusBadge(record.status || 'DRAFT')}</TableCell>
                        <TableCell>
                          <span className="text-sm line-clamp-1">{record.description || '-'}</span>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            {isDraft ? (
                              <>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleEdit(record)}
                                  title="编辑"
                                >
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleDesign(record)}
                                  title="设计"
                                >
                                  <Pencil className="h-4 w-4" />
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleDeploy(record)}
                                  title="发布"
                                  className="text-green-600 hover:text-green-700 hover:bg-green-50"
                                >
                                  <CheckCircle2 className="h-4 w-4" />
                                </Button>
                              </>
                            ) : (
                              <>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleStart(record)}
                                  title="启动"
                                  className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                                >
                                  <Play className="h-4 w-4" />
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleDesign(record)}
                                  title="查看"
                                >
                                  <Eye className="h-4 w-4" />
                                </Button>
                              </>
                            )}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDelete(record)}
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              title="删除"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    );
                  })
                ) : (
                  <TableRow>
                    <TableCell colSpan={7} className="h-24 text-center">
                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                        <Workflow className="w-16 h-16 mb-4 text-muted-foreground/50" />
                        <div className="text-lg font-semibold mb-2">暂无工作流定义</div>
                        <div className="text-sm">点击右上角"新建工作流"开始设计您的第一个工作流。</div>
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>

          {/* 分页 */}
          {pageCount > 1 && (
            <DataTablePagination
              pageIndex={(query.pageNum || 0) + 1}
              pageSize={query.pageSize || DEFAULT_PAGE_SIZE}
              pageCount={pageCount}
              onPageChange={(page) => setQuery(prev => ({
                ...prev,
                pageNum: page - 1
              }))}
            />
          )}
        </CardContent>
      </Card>

      {/* 编辑弹窗 */}
      <EditModal
        visible={editModalVisible}
        onClose={() => {
          setEditModalVisible(false);
          setEditRecord(undefined);
        }}
        onSuccess={loadData}
        record={editRecord}
      />

      {/* 发布确认对话框 */}
      <DeployDialog
        open={deployDialogOpen}
        record={deployRecord}
        onOpenChange={setDeployDialogOpen}
        onConfirm={confirmDeploy}
      />

      {/* 删除确认对话框 */}
      <DeleteDialog
        open={deleteDialogOpen}
        record={deleteRecord}
        onOpenChange={setDeleteDialogOpen}
        onConfirm={confirmDelete}
      />

      {/* 分类管理弹窗 */}
      <CategoryManageDialog
        open={categoryDialogOpen}
        onOpenChange={setCategoryDialogOpen}
        onSuccess={loadCategories}
      />

      {/* 启动工作流弹窗 */}
      <StartWorkflowModal
        open={startModalVisible}
        onClose={() => {
          setStartModalVisible(false);
          setStartRecord(null);
          setFormDefinition(null);
        }}
        workflowDefinition={startRecord}
        formDefinition={formDefinition}
        onSubmit={handleStartWorkflowSubmit}
      />
    </div>
  );
};

export default WorkflowDefinitionList;