'use client';

import { useState } from 'react';

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

export default function BasicSettings({ data, onChange }: BasicSettingsProps) {
  const [tags, setTags] = useState(data.tags || []);
  const [newTag, setNewTag] = useState('');

  const agentTypes = [
    { value: 'chat', label: '对话型Agent', desc: '专注于多轮对话和问答' },
    { value: 'analysis', label: '分析型Agent', desc: '数据分析和报告生成' },
    { value: 'generation', label: '生成型Agent', desc: '内容创作和代码生成' },
    { value: 'workflow', label: '工作流型Agent', desc: '复杂任务自动化处理' }
  ];

  const avatars = ['🤖', '🎯', '📊', '💻', '📝', '🔍', '⚡', '🚀', '💡', '🎨'];

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

  const addTag = () => {
    if (newTag && !tags.includes(newTag)) {
      const updatedTags = [...tags, newTag];
      setTags(updatedTags);
      onChange({ ...data, tags: updatedTags });
      setNewTag('');
    }
  };

  const removeTag = (tagToRemove: string) => {
    const updatedTags = tags.filter(tag => tag !== tagToRemove);
    setTags(updatedTags);
    onChange({ ...data, tags: updatedTags });
  };

  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-2">Agent名称</label>
              <input
                type="text"
                placeholder="输入Agent名称"
                value={data.name}
                onChange={(e) => handleInputChange('name', 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"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">描述</label>
              <textarea
                placeholder="描述Agent的功能和用途"
                rows={4}
                maxLength={500}
                value={data.description}
                onChange={(e) => handleInputChange('description', 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.description.length}/500</div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">标签</label>
              <div className="flex flex-wrap gap-2 mb-3">
                {tags.map((tag, index) => (
                  <span
                    key={index}
                    className="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full"
                  >
                    {tag}
                    <button
                      onClick={() => removeTag(tag)}
                      className="ml-2 w-4 h-4 flex items-center justify-center hover:bg-blue-200 rounded-full cursor-pointer"
                    >
                      <i className="ri-close-line text-xs"></i>
                    </button>
                  </span>
                ))}
              </div>
              <div className="flex space-x-2">
                <input
                  type="text"
                  placeholder="添加标签"
                  value={newTag}
                  onChange={(e) => setNewTag(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && addTag()}
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                />
                <button
                  onClick={addTag}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap text-sm"
                >
                  添加
                </button>
              </div>
            </div>
          </div>
          
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">选择头像</label>
              <div className="grid grid-cols-5 gap-3">
                {avatars.map((avatar) => (
                  <button
                    key={avatar}
                    onClick={() => handleInputChange('avatar', avatar)}
                    className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl cursor-pointer transition-colors ${
                      data.avatar === avatar 
                        ? 'bg-blue-100 border-2 border-blue-500' 
                        : 'bg-gray-100 hover:bg-gray-200 border-2 border-transparent'
                    }`}
                  >
                    {avatar}
                  </button>
                ))}
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Agent类型</label>
              <div className="space-y-3">
                {agentTypes.map((type) => (
                  <div
                    key={type.value}
                    onClick={() => handleInputChange('type', type.value)}
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      data.type === type.value
                        ? '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">{type.label}</h4>
                        <p className="text-sm text-gray-600 mt-1">{type.desc}</p>
                      </div>
                      <div className={`w-4 h-4 rounded-full border-2 ${
                        data.type === type.value
                          ? 'border-blue-500 bg-blue-500'
                          : 'border-gray-300'
                      }`}>
                        {data.type === type.value && (
                          <div className="w-2 h-2 bg-white rounded-full mx-auto mt-0.5"></div>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}