import React, { useState, useEffect } from 'react';
import { AIServiceConfig } from '../../services/aiServices';

interface AIConfigModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (config: AIServiceConfig) => void;
  currentConfig: AIServiceConfig;
}

export const AIConfigModal: React.FC<AIConfigModalProps> = ({
  isOpen,
  onClose,
  onSave,
  currentConfig
}) => {
  const [config, setConfig] = useState<AIServiceConfig>(currentConfig);

  useEffect(() => {
    setConfig(currentConfig);
  }, [currentConfig]);

  const handleSave = () => {
    onSave(config);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-gray-800">AI 服务配置</h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              ✕
            </button>
          </div>

          <div className="space-y-6">
            {/* OpenAI 配置 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h3 className="text-lg font-medium text-gray-800 mb-4">OpenAI 配置</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    API Key
                  </label>
                  <input
                    type="password"
                    value={config.openai.apiKey}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      openai: { ...prev.openai, apiKey: e.target.value }
                    }))}
                    placeholder="sk-..."
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Base URL
                  </label>
                  <input
                    type="url"
                    value={config.openai.baseURL}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      openai: { ...prev.openai, baseURL: e.target.value }
                    }))}
                    placeholder="https://api.openai.com/v1"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    模型
                  </label>
                  <select
                    value={config.openai.model}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      openai: { ...prev.openai, model: e.target.value }
                    }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="gpt-4">GPT-4</option>
                    <option value="gpt-4-turbo">GPT-4 Turbo</option>
                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                  </select>
                </div>
              </div>
            </div>

            {/* 图片生成配置 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h3 className="text-lg font-medium text-gray-800 mb-4">图片生成配置</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    服务提供商
                  </label>
                  <select
                    value={config.imageGeneration.provider}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      imageGeneration: { 
                        ...prev.imageGeneration, 
                        provider: e.target.value as any 
                      }
                    }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="openai">OpenAI DALL-E</option>
                    <option value="midjourney">Midjourney</option>
                    <option value="stable-diffusion">Stable Diffusion</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    API Key
                  </label>
                  <input
                    type="password"
                    value={config.imageGeneration.apiKey}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      imageGeneration: { 
                        ...prev.imageGeneration, 
                        apiKey: e.target.value 
                      }
                    }))}
                    placeholder="API Key for image generation service"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>

            {/* 视频生成配置 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h3 className="text-lg font-medium text-gray-800 mb-4">视频生成配置</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    服务提供商
                  </label>
                  <select
                    value={config.videoGeneration.provider}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      videoGeneration: { 
                        ...prev.videoGeneration, 
                        provider: e.target.value as any 
                      }
                    }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="runway">Runway ML</option>
                    <option value="pika">Pika Labs</option>
                    <option value="stable-video">Stable Video</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    API Key
                  </label>
                  <input
                    type="password"
                    value={config.videoGeneration.apiKey}
                    onChange={(e) => setConfig(prev => ({
                      ...prev,
                      videoGeneration: { 
                        ...prev.videoGeneration, 
                        apiKey: e.target.value 
                      }
                    }))}
                    placeholder="API Key for video generation service"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="flex justify-end space-x-3 mt-6 pt-6 border-t border-gray-200">
            <button
              onClick={onClose}
              className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
            >
              取消
            </button>
            <button
              onClick={handleSave}
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
            >
              保存配置
            </button>
          </div>

          {/* 配置说明 */}
          <div className="mt-4 p-4 bg-blue-50 rounded-lg">
            <h4 className="text-sm font-medium text-blue-800 mb-2">配置说明</h4>
            <ul className="text-xs text-blue-700 space-y-1">
              <li>• OpenAI API Key 用于提示词优化和图片生成</li>
              <li>• 图片生成服务支持多个提供商，请选择合适的服务</li>
              <li>• 视频生成需要专门的 API Key，处理时间较长</li>
              <li>• 配置保存后立即生效，无需重启应用</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};
