/**
 * 工作流详情模态框
 * 
 * 显示工作流模板的详细信息，包括基本信息、UI配置、工作流JSON等
 */

import React, { useState } from 'react';
import { X, Eye, Code, Settings, FileText, Play, Edit } from 'lucide-react';
import type { WorkflowTemplate } from '../../types/workflow';

interface WorkflowDetailModalProps {
  /** 工作流模板 */
  workflow: WorkflowTemplate | null;
  /** 是否显示模态框 */
  isOpen: boolean;
  /** 关闭回调 */
  onClose: () => void;
  /** 执行工作流回调 */
  onExecute?: (workflow: WorkflowTemplate) => void;
  /** 编辑工作流回调 */
  onEdit?: (workflow: WorkflowTemplate) => void;
}

/**
 * 工作流详情模态框组件
 */
export const WorkflowDetailModal: React.FC<WorkflowDetailModalProps> = ({
  workflow,
  isOpen,
  onClose,
  onExecute,
  onEdit
}) => {
  const [activeTab, setActiveTab] = useState<'overview' | 'ui_config' | 'workflow_json' | 'metadata'>('overview');

  if (!isOpen || !workflow) return null;

  const tabs = [
    { id: 'overview', label: '概览', icon: Eye },
    { id: 'ui_config', label: 'UI配置', icon: Settings },
    { id: 'workflow_json', label: '工作流JSON', icon: Code },
    { id: 'metadata', label: '元数据', icon: FileText }
  ];

  const renderOverview = () => (
    <div className="space-y-6">
      {/* 基本信息 */}
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">名称</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.name}</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">基础名称</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.base_name}</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">版本</label>
            <p className="mt-1 text-sm text-gray-900">v{workflow.version}</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">类型</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.type}</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">分类</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.category || '未分类'}</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">作者</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.author || '未知'}</p>
          </div>
        </div>
      </div>

      {/* 描述 */}
      {workflow.description && (
        <div className="bg-gray-50 rounded-lg p-4">
          <h3 className="text-lg font-medium text-gray-900 mb-2">描述</h3>
          <p className="text-sm text-gray-700">{workflow.description}</p>
        </div>
      )}

      {/* 标签 */}
      {workflow.tags && workflow.tags.length > 0 && (
        <div className="bg-gray-50 rounded-lg p-4">
          <h3 className="text-lg font-medium text-gray-900 mb-2">标签</h3>
          <div className="flex flex-wrap gap-2">
            {workflow.tags.map(tag => (
              <span
                key={tag}
                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* 状态信息 */}
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-lg font-medium text-gray-900 mb-4">状态信息</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">是否激活</label>
            <p className="mt-1 text-sm text-gray-900">
              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                workflow.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
              }`}>
                {workflow.is_active ? '已激活' : '未激活'}
              </span>
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">是否发布</label>
            <p className="mt-1 text-sm text-gray-900">
              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                workflow.is_published ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
              }`}>
                {workflow.is_published ? '已发布' : '草稿'}
              </span>
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">创建时间</label>
            <p className="mt-1 text-sm text-gray-900">
              {workflow.created_at ? new Date(workflow.created_at).toLocaleString() : '未知'}
            </p>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">更新时间</label>
            <p className="mt-1 text-sm text-gray-900">
              {workflow.updated_at ? new Date(workflow.updated_at).toLocaleString() : '未知'}
            </p>
          </div>
        </div>
      </div>
    </div>
  );

  const renderUIConfig = () => (
    <div className="space-y-4">
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-lg font-medium text-gray-900 mb-2">UI配置</h3>
        <pre className="text-sm text-gray-700 bg-white p-4 rounded border overflow-auto max-h-96">
          {JSON.stringify(workflow.ui_config_json, null, 2)}
        </pre>
      </div>
    </div>
  );

  const renderWorkflowJSON = () => (
    <div className="space-y-4">
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-lg font-medium text-gray-900 mb-2">工作流JSON</h3>
        <pre className="text-sm text-gray-700 bg-white p-4 rounded border overflow-auto max-h-96">
          {JSON.stringify(workflow.comfyui_workflow_json, null, 2)}
        </pre>
      </div>
    </div>
  );

  const renderMetadata = () => (
    <div className="space-y-4">
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-lg font-medium text-gray-900 mb-4">元数据</h3>
        <div className="space-y-3">
          <div>
            <label className="block text-sm font-medium text-gray-700">ID</label>
            <p className="mt-1 text-sm text-gray-900">{workflow.id}</p>
          </div>
          {workflow.input_schema_json && (
            <div>
              <label className="block text-sm font-medium text-gray-700">输入模式</label>
              <pre className="mt-1 text-xs text-gray-700 bg-white p-2 rounded border overflow-auto max-h-32">
                {JSON.stringify(workflow.input_schema_json, null, 2)}
              </pre>
            </div>
          )}
          {workflow.output_schema_json && (
            <div>
              <label className="block text-sm font-medium text-gray-700">输出模式</label>
              <pre className="mt-1 text-xs text-gray-700 bg-white p-2 rounded border overflow-auto max-h-32">
                {JSON.stringify(workflow.output_schema_json, null, 2)}
              </pre>
            </div>
          )}
        </div>
      </div>
    </div>
  );

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
        {/* 头部 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div className="flex items-center space-x-3">
            <div>
              <h2 className="text-lg font-semibold text-gray-900">
                {workflow.name}
              </h2>
              <p className="text-sm text-gray-500">
                {workflow.type} | v{workflow.version}
              </p>
            </div>
          </div>
          
          <div className="flex items-center space-x-2">
            {onExecute && (
              <button
                onClick={() => onExecute(workflow)}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2"
              >
                <Play className="w-4 h-4" />
                <span>执行</span>
              </button>
            )}
            {onEdit && (
              <button
                onClick={() => onEdit(workflow)}
                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center space-x-2"
              >
                <Edit className="w-4 h-4" />
                <span>编辑</span>
              </button>
            )}
            <button
              onClick={onClose}
              className="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* 标签页导航 */}
        <div className="flex border-b border-gray-200">
          {tabs.map(tab => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
                className={`flex items-center space-x-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                <Icon className="w-4 h-4" />
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>

        {/* 内容区域 */}
        <div className="flex-1 overflow-y-auto p-6">
          {activeTab === 'overview' && renderOverview()}
          {activeTab === 'ui_config' && renderUIConfig()}
          {activeTab === 'workflow_json' && renderWorkflowJSON()}
          {activeTab === 'metadata' && renderMetadata()}
        </div>
      </div>
    </div>
  );
};
