import React, { useEffect, useState, useRef } from 'react';
import { Search, Plus, Upload, MoreHorizontal, Code, Edit2, Copy, Trash2, Calendar, CloudUpload, File as FileIcon, X, Layout, FilePlus } from 'lucide-react';
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Card } from '../components/UI';
import { useNavigate } from 'react-router-dom';
import { Workflow } from '../types';
import { deleteWorkflow, fetchWorkflows } from '../services/backendApi';

export const WorkflowsPage: React.FC = () => {
  const navigate = useNavigate();
  const [workflows, setWorkflows] = useState<Workflow[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [isUploadOpen, setIsUploadOpen] = useState(false);
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const [newWfName, setNewWfName] = useState('');
  const [selectedTemplate, setSelectedTemplate] = useState<'blank' | 'lead'>('blank');

  const filteredWorkflows = workflows.filter(wf => 
    wf.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  useEffect(() => {
    const loadWorkflows = async () => {
      setIsLoading(true);
      try {
        const list = await fetchWorkflows();
        setWorkflows(list);
      } catch (error) {
        console.error(error);
        alert('加载工作流失败，请检查后端服务。');
      } finally {
        setIsLoading(false);
      }
    };

    loadWorkflows();
  }, []);

  const handleCreateWorkflow = () => {
    if (!newWfName.trim()) {
      alert('请输入工作流名称');
      return;
    }
    setIsCreateOpen(false);
    navigate(`/workflows/new?name=${encodeURIComponent(newWfName)}&template=${selectedTemplate}`);
  };

  const handleDeleteWorkflow = async (id: string) => {
    if (confirm('确定要删除这个工作流吗？')) {
      try {
        await deleteWorkflow(id);
        setWorkflows(prev => prev.filter(w => w.id !== id));
        setActiveMenu(null);
      } catch (error) {
        console.error(error);
        alert('删除工作流失败。');
      }
    }
  };

  return (
    <div className="space-y-6 animate-in fade-in">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight text-white">工作流</h1>
        <div className="flex space-x-3">
            <Button variant="outline" onClick={() => setIsUploadOpen(true)}>
                <Upload className="mr-2 h-4 w-4" /> 上传 JSON 代码
            </Button>
            <Button onClick={() => setIsCreateOpen(true)}>
                <Plus className="mr-2 h-4 w-4" /> 创建工作流
            </Button>
        </div>
      </div>

      <div className="flex flex-col md:flex-row gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
         <div className="relative flex-1">
             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
             <Input 
                placeholder="搜索工作流..." 
                className="pl-9 border-0 bg-white/5" 
                value={searchTerm} 
                onChange={e => setSearchTerm(e.target.value)}
             />
         </div>
         <div className="flex items-center space-x-2 bg-white/5 rounded-md px-3 border border-white/10 group focus-within:border-primary/50 transition-colors">
            <Calendar className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
            <select className="bg-transparent text-sm h-9 focus:outline-none border-none text-foreground cursor-pointer [&>option]:bg-background text-white">
                <option value="all">所有时间</option>
                <option value="today">今天</option>
                <option value="week">近一周</option>
                <option value="month">近一月</option>
            </select>
         </div>
      </div>

      <div className="rounded-xl border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
        <table className="w-full text-sm">
          <TableHeader>
            <TableRow>
              <TableHead>名称</TableHead>
              <TableHead>节点数量</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>更新时间</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <tbody>
            {!isLoading && filteredWorkflows.map(wf => (
              <TableRow key={wf.id} className="group">
                <TableCell className="font-medium">
                  <button 
                    onClick={() => navigate(`/workflows/edit/${wf.id}`)}
                    className="hover:text-primary transition-colors cursor-pointer text-left font-semibold text-white"
                  >
                    {wf.name}
                  </button>
                </TableCell>
                <TableCell className="text-muted-foreground">{wf.nodeCount} 个节点</TableCell>
                <TableCell className="text-muted-foreground">{wf.createdAt}</TableCell>
                <TableCell className="text-muted-foreground">{wf.updatedAt}</TableCell>
                <TableCell className="text-right relative">
                    <Button 
                        variant="ghost" 
                        size="icon" 
                        onClick={() => setActiveMenu(activeMenu === wf.id ? null : wf.id)}
                    >
                        <MoreHorizontal className="h-4 w-4" />
                    </Button>
                    
                    {activeMenu === wf.id && (
                        <div className="absolute right-0 top-12 z-50 w-48 bg-background border border-white/10 rounded-lg shadow-xl py-1 animate-in zoom-in-95">
                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => { alert('JSON copied!'); setActiveMenu(null); }}>
                                <Code className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制 JSON 代码
                            </button>
                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => navigate(`/workflows/edit/${wf.id}`)}>
                                <Edit2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 编辑工作流
                            </button>
                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => setActiveMenu(null)}>
                                <Copy className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制
                            </button>
                            <div className="h-px bg-white/10 my-1" />
                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-destructive" onClick={() => handleDeleteWorkflow(wf.id)}>
                                <Trash2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 删除工作流
                            </button>
                        </div>
                    )}
                </TableCell>
              </TableRow>
            ))}
             {!isLoading && filteredWorkflows.length === 0 && (
                 <TableRow>
                     <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">暂无工作流数据</TableCell>
                 </TableRow>
             )}
             {isLoading && (
                 <TableRow>
                     <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">加载中...</TableCell>
                 </TableRow>
             )}
          </tbody>
        </table>
      </div>

      <UploadJsonModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />

      <Dialog 
        isOpen={isCreateOpen} 
        onClose={() => setIsCreateOpen(false)} 
        title="创建新工作流"
        footer={
          <>
            <Button variant="ghost" onClick={() => setIsCreateOpen(false)}>取消</Button>
            <Button onClick={handleCreateWorkflow}>创建</Button>
          </>
        }
      >
        <div className="space-y-4">
          <div className="space-y-2">
            <label className="text-sm font-medium text-white">工作流名称</label>
            <Input 
              value={newWfName} 
              onChange={e => setNewWfName(e.target.value)} 
              placeholder="例如: Lead Qualification Agent"
              autoFocus
            />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium text-white">选择模板</label>
            <div className="grid grid-cols-2 gap-3">
              <div 
                onClick={() => setSelectedTemplate('blank')}
                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'blank' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
              >
                <FilePlus className={`w-8 h-8 ${selectedTemplate === 'blank' ? 'text-primary' : 'text-muted-foreground'}`} />
                <div>
                  <div className="text-sm font-bold text-white">空白模板</div>
                  <div className="text-[10px] text-muted-foreground">从零开始构建</div>
                </div>
              </div>
              <div 
                onClick={() => setSelectedTemplate('lead')}
                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'lead' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
              >
                <Layout className={`w-8 h-8 ${selectedTemplate === 'lead' ? 'text-primary' : 'text-muted-foreground'}`} />
                <div>
                  <div className="text-sm font-bold text-white">销售获客</div>
                  <div className="text-[10px] text-muted-foreground">标准 Lead 转化逻辑</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Dialog>
    </div>
  );
};

const UploadJsonModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
    const [dragActive, setDragActive] = useState(false);
    const [file, setFile] = useState<File | null>(null);
    const inputRef = useRef<HTMLInputElement>(null);

    const handleDrag = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setDragActive(e.type === "dragenter" || e.type === "dragover");
    };

    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault(); e.stopPropagation();
        setDragActive(false);
        if (e.dataTransfer.files?.[0]) setFile(e.dataTransfer.files[0]);
    };

    return (
        <Dialog 
            isOpen={isOpen} onClose={onClose} title="上传工作流 JSON"
            footer={
                <>
                    <Button variant="ghost" onClick={onClose}>取消</Button>
                    <Button onClick={() => { alert('Import Success!'); onClose(); }}>确定导入</Button>
                </>
            }
        >
            <div 
                className={`relative flex flex-col items-center justify-center w-full h-48 rounded-lg border-2 border-dashed transition-all cursor-pointer ${dragActive ? "border-primary bg-primary/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
                onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
                onClick={() => inputRef.current?.click()}
            >
                <input ref={inputRef} type="file" className="hidden" accept=".json" onChange={e => e.target.files?.[0] && setFile(e.target.files[0])} />
                <CloudUpload className={`h-10 w-10 mb-3 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
                <p className="text-sm text-muted-foreground text-center">
                    {file ? <span className="text-primary font-medium">{file.name}</span> : <span className="text-white/70"><span className="font-semibold text-primary">点击上传</span> 或将 JSON 文件拖拽到此处</span>}
                </p>
                <p className="text-xs text-muted-foreground mt-1 text-white/40">仅支持 .json 格式的工作流配置文件</p>
            </div>
        </Dialog>
    );
};