'use client';

import { useState } from 'react';
import Link from 'next/link';

export default function WorkflowList() {
  const [selectedWorkflows, setSelectedWorkflows] = useState<number[]>([]);

  const workflows = [
    {
      id: 1,
      name: '客户数据处理流程',
      description: '自动处理客户数据，包括清洗、分类和分析',
      category: '数据处理',
      status: '运行中',
      version: 'v3.2',
      created: '2024-01-20',
      lastRun: '2分钟前',
      executions: 1245,
      successRate: 98.5,
      avgRuntime: '3.2分钟',
      icon: '📊',
      tags: ['数据清洗', 'ETL', '自动化'],
      nodes: 8,
      triggers: ['定时触发', 'API调用']
    },
    {
      id: 2,
      name: '内容生成与发布',
      description: '根据关键词自动生成文章并发布到多个平台',
      category: '内容创作',
      status: '运行中',
      version: 'v2.1',
      created: '2024-01-18',
      lastRun: '15分钟前',
      executions: 892,
      successRate: 96.2,
      avgRuntime: '5.8分钟',
      icon: '✍️',
      tags: ['内容生成', 'SEO', '多平台'],
      nodes: 12,
      triggers: ['手动触发', '定时触发']
    },
    {
      id: 3,
      name: '邮件智能分类回复',
      description: '自动分类邮件并生成智能回复',
      category: '任务自动化',
      status: '暂停',
      version: 'v1.8',
      created: '2024-01-15',
      lastRun: '2小时前',
      executions: 2156,
      successRate: 94.8,
      avgRuntime: '1.5分钟',
      icon: '📧',
      tags: ['邮件处理', 'NLP', '自动回复'],
      nodes: 6,
      triggers: ['邮件触发', '定时检查']
    },
    {
      id: 4,
      name: '订单处理自动化',
      description: '从下单到发货的完整自动化处理流程',
      category: '系统集成',
      status: '运行中',
      version: 'v4.0',
      created: '2024-01-12',
      lastRun: '30分钟前',
      executions: 3245,
      successRate: 99.1,
      avgRuntime: '2.1分钟',
      icon: '📦',
      tags: ['订单处理', 'ERP集成', '库存管理'],
      nodes: 15,
      triggers: ['订单事件', 'Webhook']
    },
    {
      id: 5,
      name: '社交媒体监控',
      description: '监控品牌提及并自动生成报告',
      category: '数据处理',
      status: '运行中',
      version: 'v2.5',
      created: '2024-01-10',
      lastRun: '1小时前',
      executions: 678,
      successRate: 97.3,
      avgRuntime: '4.2分钟',
      icon: '📱',
      tags: ['社媒监控', '情感分析', '报告生成'],
      nodes: 10,
      triggers: ['定时触发', '关键词匹配']
    },
    {
      id: 6,
      name: '财务报表生成',
      description: '自动收集财务数据并生成可视化报表',
      category: '数据处理',
      status: '运行中',
      version: 'v1.9',
      created: '2024-01-08',
      lastRun: '45分钟前',
      executions: 456,
      successRate: 99.8,
      avgRuntime: '6.5分钟',
      icon: '💰',
      tags: ['财务分析', '数据可视化', 'BI'],
      nodes: 11,
      triggers: ['定时触发', '手动执行']
    }
  ];

  const handleSelectWorkflow = (workflowId: number) => {
    setSelectedWorkflows(prev => 
      prev.includes(workflowId) 
        ? prev.filter(id => id !== workflowId)
        : [...prev, workflowId]
    );
  };

  const handleSelectAll = () => {
    setSelectedWorkflows(selectedWorkflows.length === workflows.length ? [] : workflows.map(w => w.id));
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
      <div className="p-6 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <input
              type="checkbox"
              checked={selectedWorkflows.length === workflows.length}
              onChange={handleSelectAll}
              className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
            />
            <span className="text-sm text-gray-600">
              {selectedWorkflows.length > 0 ? `已选择 ${selectedWorkflows.length} 个工作流` : '全选'}
            </span>
          </div>
          
          {selectedWorkflows.length > 0 && (
            <div className="flex items-center space-x-3">
              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
                批量启动
              </button>
              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
                批量暂停
              </button>
              <button className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
                批量删除
              </button>
            </div>
          )}
        </div>
      </div>
      
      <div className="divide-y divide-gray-200">
        {workflows.map((workflow) => (
          <div key={workflow.id} className="p-6 hover:bg-gray-50 transition-colors">
            <div className="flex items-start justify-between">
              <div className="flex items-start space-x-4 flex-1">
                <input
                  type="checkbox"
                  checked={selectedWorkflows.includes(workflow.id)}
                  onChange={() => handleSelectWorkflow(workflow.id)}
                  className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 mt-1"
                />
                
                <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                  <span className="text-xl">{workflow.icon}</span>
                </div>
                
                <div className="flex-1">
                  <div className="flex items-center space-x-3 mb-2">
                    <h3 className="text-lg font-semibold text-gray-900">{workflow.name}</h3>
                    <span className="text-sm text-gray-500">{workflow.version}</span>
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      workflow.status === '运行中' 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-yellow-100 text-yellow-800'
                    }`}>
                      {workflow.status}
                    </span>
                  </div>
                  
                  <p className="text-gray-600 mb-3">{workflow.description}</p>
                  
                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
                    <div>
                      <span className="text-sm text-gray-500">类型</span>
                      <p className="text-sm font-medium text-gray-900">{workflow.category}</p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-500">节点数</span>
                      <p className="text-sm font-medium text-gray-900">{workflow.nodes} 个</p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-500">成功率</span>
                      <p className="text-sm font-medium text-green-600">{workflow.successRate}%</p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-500">平均运行时间</span>
                      <p className="text-sm font-medium text-gray-900">{workflow.avgRuntime}</p>
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-4 mb-3">
                    <span className="text-sm text-gray-500">执行次数: {workflow.executions.toLocaleString()}</span>
                    <span className="text-sm text-gray-500">最后运行: {workflow.lastRun}</span>
                  </div>
                  
                  <div className="flex items-center space-x-2 mb-3">
                    <span className="text-sm text-gray-500">触发方式:</span>
                    {workflow.triggers.map((trigger, index) => (
                      <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
                        {trigger}
                      </span>
                    ))}
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    {workflow.tags.map((tag, index) => (
                      <span key={index} className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
              
              <div className="flex items-center space-x-3">
                <Link href={`/workflows/${workflow.id}/analytics`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-bar-chart-line"></i>
                  </div>
                </Link>
                <button className="p-2 text-gray-400 hover:text-green-600 transition-colors cursor-pointer">
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-play-line"></i>
                  </div>
                </button>
                <Link href={`/workflows/${workflow.id}/edit`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-edit-line"></i>
                  </div>
                </Link>
                <button className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-settings-line"></i>
                  </div>
                </button>
                <button className="p-2 text-gray-400 hover:text-red-600 transition-colors cursor-pointer">
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-delete-bin-line"></i>
                  </div>
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}