import React, { useState, useEffect } from 'react';
import { KnowledgeGroup, CreateGroupData, UpdateGroupData } from '../types';
import { knowledgeGroupService } from '../services/knowledgeGroupService';
import { useToast } from '../contexts/ToastContext';
import { Folder, Plus, Edit2, Trash2, X } from 'lucide-react';

interface GroupManagerProps {
  groups: KnowledgeGroup[];
  onGroupsChange: (groups: KnowledgeGroup[]) => void;
}

const DEFAULT_COLORS = [
  '#3B82F6', '#10B981', '#F59E0B', '#EF4444', 
  '#8B5CF6', '#06B6D4', '#84CC16', '#F97316'
];

export const GroupManager: React.FC<GroupManagerProps> = ({ groups, onGroupsChange }) => {
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [editingGroup, setEditingGroup] = useState<KnowledgeGroup | null>(null);
  const [formData, setFormData] = useState<CreateGroupData>({
    name: '',
    description: '',
    color: DEFAULT_COLORS[0],
  });
  const [loading, setLoading] = useState(false);
  const { showToast } = useToast();

  const resetForm = () => {
    setFormData({
      name: '',
      description: '',
      color: DEFAULT_COLORS[0],
    });
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name.trim()) return;

    setLoading(true);
    try {
      const newGroup = await knowledgeGroupService.createGroup(formData);
      onGroupsChange([...groups, newGroup]);
      setIsCreateModalOpen(false);
      resetForm();
      showToast('分组创建成功', 'success');
    } catch (error) {
      showToast('创建分组失败', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingGroup || !formData.name.trim()) return;

    setLoading(true);
    try {
      const updatedGroup = await knowledgeGroupService.updateGroup(editingGroup.id, formData);
      onGroupsChange(groups.map(g => g.id === editingGroup.id ? updatedGroup : g));
      setEditingGroup(null);
      resetForm();
      showToast('分组更新成功', 'success');
    } catch (error) {
      showToast('更新分组失败', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (group: KnowledgeGroup) => {
    if (!confirm(`确定要删除分组"${group.name}"吗？`)) return;

    try {
      await knowledgeGroupService.deleteGroup(group.id);
      onGroupsChange(groups.filter(g => g.id !== group.id));
      showToast('分组删除成功', 'success');
    } catch (error) {
      showToast('删除分组失败', 'error');
    }
  };

  const openEditModal = (group: KnowledgeGroup) => {
    setEditingGroup(group);
    setFormData({
      name: group.name,
      description: group.description || '',
      color: group.color,
    });
  };

  const closeModal = () => {
    setIsCreateModalOpen(false);
    setEditingGroup(null);
    resetForm();
  };

  const isModalOpen = isCreateModalOpen || editingGroup !== null;

  return (
    <div className="space-y-4">
      {/* 分组列表 */}
      <div className="space-y-2">
        {groups.map((group) => (
          <div
            key={group.id}
            className="flex items-center justify-between p-3 bg-white rounded-lg border hover:shadow-sm transition-shadow"
          >
            <div className="flex items-center space-x-3">
              <div
                className="w-4 h-4 rounded-full"
                style={{ backgroundColor: group.color }}
              />
              <div>
                <div className="font-medium text-gray-900">{group.name}</div>
                {group.description && (
                  <div className="text-sm text-gray-500">{group.description}</div>
                )}
                <div className="text-xs text-gray-400">
                  {group.fileCount} 个文件
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <button
                onClick={() => openEditModal(group)}
                className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
              >
                <Edit2 size={16} />
              </button>
              <button
                onClick={() => handleDelete(group)}
                className="p-1 text-gray-400 hover:text-red-600 transition-colors"
              >
                <Trash2 size={16} />
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* 创建按钮 */}
      <button
        onClick={() => setIsCreateModalOpen(true)}
        className="w-full flex items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-600 transition-colors"
        title="创建新分组"
      >
        <Plus size={18} />
      </button>

      {/* 创建/编辑模态框 */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">
                {editingGroup ? '编辑分组' : '创建分组'}
              </h3>
              <button
                onClick={closeModal}
                className="text-gray-400 hover:text-gray-600"
              >
                <X size={20} />
              </button>
            </div>

            <form onSubmit={editingGroup ? handleUpdate : handleCreate} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  分组名称 *
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: 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"
                  placeholder="输入分组名称"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  描述
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: 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"
                  placeholder="输入分组描述（可选）"
                  rows={3}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  颜色标识
                </label>
                <div className="flex space-x-2">
                  {DEFAULT_COLORS.map((color) => (
                    <button
                      key={color}
                      type="button"
                      onClick={() => setFormData({ ...formData, color })}
                      className={`w-8 h-8 rounded-full border-2 ${
                        formData.color === color ? 'border-gray-400' : 'border-gray-200'
                      }`}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>

              <div className="flex space-x-3 pt-4">
                <button
                  type="button"
                  onClick={closeModal}
                  className="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  disabled={loading || !formData.name.trim()}
                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {loading ? '保存中...' : (editingGroup ? '更新' : '创建')}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};