'use client';

interface ModelConfigProps {
  data: any;
  onChange: (data: any) => void;
}

export default function ModelConfig({ data, onChange }: ModelConfigProps) {
  const models = [
    { id: 'gpt-4', name: 'GPT-4', desc: '最先进的语言模型，适合复杂任务', cost: '高' },
    { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', desc: '性价比最优，响应快速', cost: '中' },
    { id: 'claude-3', name: 'Claude-3', desc: '擅长分析和推理任务', cost: '中' },
    { id: 'gemini-pro', name: 'Gemini Pro', desc: '多模态能力强', cost: '中' }
  ];

  const handleInputChange = (field: string, value: any) => {
    onChange({ ...data, [field]: value });
  };

  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-6">模型配置</h3>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-3">选择基础模型</label>
              <div className="space-y-3">
                {models.map((model) => (
                  <div
                    key={model.id}
                    onClick={() => handleInputChange('model', model.id)}
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      data.model === model.id
                        ? 'border-blue-500 bg-blue-50'
                        : 'border-gray-300 hover:border-gray-400'
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <div>
                        <h4 className="font-medium text-gray-900">{model.name}</h4>
                        <p className="text-sm text-gray-600 mt-1">{model.desc}</p>
                      </div>
                      <div className="text-right">
                        <span className={`px-2 py-1 text-xs rounded-full ${
                          model.cost === '高' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
                        }`}>
                          成本{model.cost}
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                创造性 (Temperature): {data.temperature}
              </label>
              <input
                type="range"
                min="0"
                max="2"
                step="0.1"
                value={data.temperature}
                onChange={(e) => handleInputChange('temperature', parseFloat(e.target.value))}
                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              />
              <div className="flex justify-between text-xs text-gray-500 mt-1">
                <span>保守</span>
                <span>创新</span>
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">最大输出长度</label>
              <input
                type="number"
                min="100"
                max="4000"
                step="100"
                value={data.maxTokens}
                onChange={(e) => handleInputChange('maxTokens', parseInt(e.target.value))}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
              />
              <p className="text-xs text-gray-500 mt-1">建议范围: 100-4000 tokens</p>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">系统提示词</label>
              <textarea
                placeholder="定义Agent的角色、行为和回答风格..."
                rows={8}
                maxLength={500}
                value={data.systemPrompt}
                onChange={(e) => handleInputChange('systemPrompt', e.target.value)}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
              />
              <div className="text-xs text-gray-500 mt-1">{data.systemPrompt.length}/500</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}