/**
 * WorkflowList - OpenFang Workflow Management UI
 *
 * Displays available OpenFang Workflows and allows executing them.
 *
 * Design based on OpenFang Dashboard v0.4.0
 */

import { useState, useEffect, useCallback } from 'react';
import { useWorkflowStore, type Workflow } from '../store/workflowStore';
import { WorkflowEditor } from './WorkflowEditor';
import { WorkflowHistory } from './WorkflowHistory';
import {
  Play,
  Edit,
  Trash2,
  History,
  Plus,
  List,
  GitBranch,
  RefreshCw,
  Loader2,
  X,
} from 'lucide-react';
import { safeJsonParse } from '../lib/json-utils';

// === View Toggle Types ===

type ViewMode = 'list' | 'visual';

// === Workflow Execute Modal ===

interface ExecuteModalProps {
  workflow: Workflow;
  isOpen: boolean;
  onClose: () => void;
  onExecute: (id: string, input?: Record<string, unknown>) => Promise<void>;
  isExecuting: boolean;
}

function ExecuteModal({ workflow, isOpen, onClose, onExecute, isExecuting }: ExecuteModalProps) {
  const [input, setInput] = useState('');

  const handleExecute = async () => {
    let parsedInput: Record<string, unknown> | undefined;
    if (input.trim()) {
      const result = safeJsonParse<Record<string, unknown>>(input);
      if (!result.success) {
        alert('Input format error, please use valid JSON format.');
        return;
      }
      parsedInput = result.data;
    }
    await onExecute(workflow.id, parsedInput);
    setInput('');
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
              <Play className="w-4 h-4 text-green-600 dark:text-green-400" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                运行工作流
              </h2>
              <p className="text-sm text-gray-500 dark:text-gray-400">{workflow.name}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Body */}
        <div className="p-4">
          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
            输入参数 (JSON 格式，可选):
          </div>
          <textarea
            className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            rows={4}
            placeholder='{"key": "value"}'
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
          >
            取消
          </button>
          <button
            onClick={handleExecute}
            disabled={isExecuting}
            className="px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            {isExecuting ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                运行中...
              </>
            ) : (
              <>
                <Play className="w-4 h-4" />
                运行
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

// === Workflow Table Row ===

interface WorkflowRowProps {
  workflow: Workflow;
  onExecute: (workflow: Workflow) => void;
  onEdit: (workflow: Workflow) => void;
  onDelete: (workflow: Workflow) => void;
  onHistory: (workflow: Workflow) => void;
  isExecuting: boolean;
  isDeleting: boolean;
}

function WorkflowRow({ workflow, onExecute, onEdit, onDelete, onHistory, isExecuting, isDeleting }: WorkflowRowProps) {
  // Format created date if available
  const createdDate = workflow.createdAt
    ? new Date(workflow.createdAt).toLocaleDateString('zh-CN')
    : new Date().toLocaleDateString('zh-CN');

  return (
    <tr className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
      {/* Name */}
      <td className="px-4 py-3">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
            <GitBranch className="w-4 h-4 text-blue-600 dark:text-blue-400" />
          </div>
          <div className="min-w-0">
            <div className="font-medium text-gray-900 dark:text-white truncate">
              {workflow.name}
            </div>
            {workflow.description && (
              <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                {workflow.description}
              </div>
            )}
          </div>
        </div>
      </td>

      {/* Steps */}
      <td className="px-4 py-3 text-center">
        <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300">
          {workflow.steps}
        </span>
      </td>

      {/* Created */}
      <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
        {createdDate}
      </td>

      {/* Actions */}
      <td className="px-4 py-3">
        <div className="flex items-center justify-end gap-1">
          <button
            onClick={() => onExecute(workflow)}
            disabled={isExecuting}
            className="p-1.5 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
            title="Run"
          >
            {isExecuting ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Play className="w-4 h-4" />
            )}
          </button>
          <button
            onClick={() => onEdit(workflow)}
            className="p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md"
            title="Edit"
          >
            <Edit className="w-4 h-4" />
          </button>
          <button
            onClick={() => onHistory(workflow)}
            className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
            title="History"
          >
            <History className="w-4 h-4" />
          </button>
          <button
            onClick={() => onDelete(workflow)}
            disabled={isDeleting}
            className="p-1.5 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
            title="删除"
          >
            {isDeleting ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Trash2 className="w-4 h-4" />
            )}
          </button>
        </div>
      </td>
    </tr>
  );
}

// === Main WorkflowList Component ===

export function WorkflowList() {
  const workflows = useWorkflowStore((s) => s.workflows);
  const loadWorkflows = useWorkflowStore((s) => s.loadWorkflows);
  const triggerWorkflow = useWorkflowStore((s) => s.triggerWorkflow);
  const deleteWorkflow = useWorkflowStore((s) => s.deleteWorkflow);
  const createWorkflow = useWorkflowStore((s) => s.createWorkflow);
  const updateWorkflow = useWorkflowStore((s) => s.updateWorkflow);
  const isLoading = useWorkflowStore((s) => s.isLoading);
  const [viewMode, setViewMode] = useState<ViewMode>('list');
  const [executingWorkflowId, setExecutingWorkflowId] = useState<string | null>(null);
  const [deletingWorkflowId, setDeletingWorkflowId] = useState<string | null>(null);
  const [selectedWorkflow, setSelectedWorkflow] = useState<Workflow | null>(null);
  const [showExecuteModal, setShowExecuteModal] = useState(false);
  const [showEditor, setShowEditor] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const [editingWorkflow, setEditingWorkflow] = useState<Workflow | null>(null);
  const [isSaving, setIsSaving] = useState(false);

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

  const handleExecute = useCallback(async (id: string, input?: Record<string, unknown>) => {
    setExecutingWorkflowId(id);
    try {
      await triggerWorkflow(id, input);
    } finally {
      setExecutingWorkflowId(null);
    }
  }, [triggerWorkflow]);

  const handleExecuteClick = useCallback((workflow: Workflow) => {
    setSelectedWorkflow(workflow);
    setShowExecuteModal(true);
  }, []);

  const handleEdit = useCallback((workflow: Workflow) => {
    setEditingWorkflow(workflow);
    setShowEditor(true);
  }, []);

  const handleDelete = useCallback(async (workflow: Workflow) => {
    if (confirm(`确定要删除 "${workflow.name}" 吗？此操作不可撤销。`)) {
      setDeletingWorkflowId(workflow.id);
      try {
        await deleteWorkflow(workflow.id);
        // The store will update the workflows list automatically
      } catch (error) {
        console.error('Failed to delete workflow:', error);
        alert(`删除工作流失败: ${error instanceof Error ? error.message : '未知错误'}`);
      } finally {
        setDeletingWorkflowId(null);
      }
    }
  }, [deleteWorkflow]);

  const handleHistory = useCallback((workflow: Workflow) => {
    setSelectedWorkflow(workflow);
    setShowHistory(true);
  }, []);

  const handleNewWorkflow = useCallback(() => {
    setEditingWorkflow(null);
    setShowEditor(true);
  }, []);

  const handleSaveWorkflow = useCallback(async (data: {
    name: string;
    description?: string;
    steps: Array<{
      handName: string;
      name?: string;
      params?: Record<string, unknown>;
      condition?: string;
    }>;
  }) => {
    setIsSaving(true);
    try {
      if (editingWorkflow) {
        await updateWorkflow(editingWorkflow.id, data);
      } else {
        await createWorkflow(data);
      }
      await loadWorkflows();
    } finally {
      setIsSaving(false);
    }
  }, [editingWorkflow, createWorkflow, updateWorkflow, loadWorkflows]);

  const handleCloseEditor = useCallback(() => {
    setShowEditor(false);
    setEditingWorkflow(null);
  }, []);

  const handleCloseModal = useCallback(() => {
    setShowExecuteModal(false);
    setSelectedWorkflow(null);
  }, []);

  // Loading state
  if (isLoading && workflows.length === 0) {
    return (
      <div className="p-4 text-center">
        <Loader2 className="w-6 h-6 animate-spin mx-auto text-gray-400 mb-2" />
        <p className="text-sm text-gray-500 dark:text-gray-400">加载工作流中...</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-start justify-between gap-4">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            工作流
          </h2>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
            工作流将多个代理和工具串联在一起，用于完成复杂任务。
          </p>
        </div>
        <button
          onClick={() => loadWorkflows()}
          disabled={isLoading}
          className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 disabled:opacity-50"
        >
          {isLoading ? (
            <Loader2 className="w-3.5 h-3.5 animate-spin" />
          ) : (
            <RefreshCw className="w-3.5 h-3.5" />
          )}
          刷新
        </button>
      </div>

      {/* Toolbar */}
      <div className="flex items-center justify-between">
        {/* View Toggle */}
        <div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
          <button
            onClick={() => setViewMode('list')}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-colors ${
              viewMode === 'list'
                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
            }`}
          >
            <List className="w-3.5 h-3.5" />
            列表
          </button>
          <button
            onClick={() => setViewMode('visual')}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-colors ${
              viewMode === 'visual'
                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
            }`}
          >
            <GitBranch className="w-3.5 h-3.5" />
            可视化编辑器
          </button>
        </div>

        {/* New Workflow Button */}
        <button
          onClick={handleNewWorkflow}
          className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          <Plus className="w-4 h-4" />
          新建工作流
        </button>
      </div>

      {/* Content */}
      {viewMode === 'list' ? (
        workflows.length === 0 ? (
          // Empty State
          <div className="p-8 text-center">
            <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3">
              <GitBranch className="w-6 h-6 text-gray-400" />
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">
              暂无可用工作流
            </p>
            <p className="text-xs text-gray-400 dark:text-gray-500 mb-4">
              创建你的第一个工作流来自动化复杂的多步骤任务。
            </p>
            <button
              onClick={handleNewWorkflow}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Plus className="w-4 h-4" />
              创建工作流
            </button>
          </div>
        ) : (
          // Table View
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
                  <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    名称
                  </th>
                  <th className="px-4 py-2.5 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    步骤
                  </th>
                  <th className="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    创建时间
                  </th>
                  <th className="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    操作
                  </th>
                </tr>
              </thead>
              <tbody>
                {workflows.map((workflow) => (
                  <WorkflowRow
                    key={workflow.id}
                    workflow={workflow}
                    onExecute={handleExecuteClick}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onHistory={handleHistory}
                    isExecuting={executingWorkflowId === workflow.id}
                    isDeleting={deletingWorkflowId === workflow.id}
                  />
                ))}
              </tbody>
            </table>
          </div>
        )
      ) : (
        // Visual Builder View (placeholder)
        <div className="p-8 text-center bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
          <div className="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
            <GitBranch className="w-6 h-6 text-gray-400" />
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
            可视化工作流编辑器
          </p>
          <p className="text-xs text-gray-400 dark:text-gray-500">
            拖拽式工作流编辑器即将推出！
          </p>
        </div>
      )}

      {/* Execute Modal */}
      {selectedWorkflow && (
        <ExecuteModal
          workflow={selectedWorkflow}
          isOpen={showExecuteModal}
          onClose={handleCloseModal}
          onExecute={handleExecute}
          isExecuting={executingWorkflowId === selectedWorkflow.id}
        />
      )}

      {/* Workflow Editor */}
      <WorkflowEditor
        workflow={editingWorkflow || undefined}
        isOpen={showEditor}
        onClose={handleCloseEditor}
        onSave={handleSaveWorkflow}
        isSaving={isSaving}
      />

      {/* Workflow History */}
      {selectedWorkflow && (
        <WorkflowHistory
          workflow={selectedWorkflow}
          isOpen={showHistory}
          onClose={() => {
            setShowHistory(false);
            setSelectedWorkflow(null);
          }}
        />
      )}
    </div>
  );
}

export default WorkflowList;