import React, { useState, useEffect } from 'react'
import { Plus, Edit, Trash2, Search, Save, X } from 'lucide-react'
import { ResourceCategoryService, ResourceCategory } from '../services/resourceCategoryService'

const ResourceCategoryPage: React.FC = () => {
  const [categories, setCategories] = useState<ResourceCategory[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [editingCategory, setEditingCategory] = useState<ResourceCategory | null>(null)
  const [showCreateForm, setShowCreateForm] = useState(false)
  const [formData, setFormData] = useState({
    title: '',
    ai_prompt: '',
    color: '#FF6B6B'
  })

  // 预设颜色选项
  const presetColors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD',
    '#FF7675', '#74B9FF', '#00B894', '#FDCB6E', '#E17055', '#A29BFE',
    '#FD79A8', '#6C5CE7', '#00CEC9', '#55A3FF', '#FF9F43', '#26DE81'
  ]

  useEffect(() => {
    loadCategories()
  }, [])

  const loadCategories = async () => {
    try {
      setLoading(true)
      const response = await ResourceCategoryService.getAllCategories()
      console.log(`loadCategories`, response)
      if (response.status && response.data) {
        setCategories(response.data)
      } else {
        console.error('Failed to load categories:', response.msg)
      }
    } catch (error) {
      console.error('Failed to load categories:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleCreateCategory = async () => {
    try {
      const response = await ResourceCategoryService.createCategory(formData)
      console.log(`handleCreateCategory`, response)
      if (response.status && response.data) {
        setCategories([...categories, response.data])
        setShowCreateForm(false)
        setFormData({ title: '', ai_prompt: '', color: '#FF6B6B' })
      } else {
        console.error('创建失败:', response.msg || '未知错误')
      }
    } catch (error) {
      console.error('Failed to create category:', error)
    }
  }

  const handleUpdateCategory = async () => {
    if (!editingCategory) return

    try {
      const response = await ResourceCategoryService.updateCategory(editingCategory.id, formData)
      if (response.status && response.data) {
        const updatedCategories = categories.map(cat =>
          cat.id === editingCategory.id ? response.data! : cat
        )
        setCategories(updatedCategories)
        setEditingCategory(null)
        setFormData({ title: '', ai_prompt: '', color: '#FF6B6B' })
      } else {
        console.error('更新失败:', response.msg || '未知错误')
      }
    } catch (error) {
      console.error('Failed to update category:', error)
    }
  }

  const handleDeleteCategory = async (categoryId: string) => {
    if (!confirm('确定要删除这个分类吗？')) return

    try {
      const response = await ResourceCategoryService.deleteCategory(categoryId)
      if (response.status) {
        setCategories(categories.filter(cat => cat.id !== categoryId))
      } else {
        console.error('删除失败:', response.msg || '未知错误')
      }
    } catch (error) {
      console.error('Failed to delete category:', error)
    }
  }

  const startEdit = (category: ResourceCategory) => {
    setEditingCategory(category)
    setFormData({
      title: category.title,
      ai_prompt: category.ai_prompt,
      color: category.color
    })
    setShowCreateForm(false)
  }

  const cancelEdit = () => {
    setEditingCategory(null)
    setShowCreateForm(false)
    setFormData({ title: '', ai_prompt: '', color: '#FF6B6B' })
  }

  const filteredCategories = categories.filter(category =>
    category.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    category.ai_prompt.toLowerCase().includes(searchTerm.toLowerCase())
  )

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-gray-500">加载中...</div>
      </div>
    )
  }

  return (
    <div className="p-6">
      {/* 页面标题 */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">素材分类管理</h1>
        <p className="text-gray-600 mt-2">管理素材分类，设置AI识别提示词和展示颜色</p>
      </div>

      {/* 搜索和创建按钮 */}
      <div className="flex items-center justify-between mb-6">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
          <input
            type="text"
            placeholder="搜索分类..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
          />
        </div>
        
        <button
          onClick={() => {
            setShowCreateForm(true)
            setEditingCategory(null)
            setFormData({ title: '', ai_prompt: '', color: '#FF6B6B' })
          }}
          className="ml-4 flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          <Plus size={20} className="mr-2" />
          新建分类
        </button>
      </div>

      {/* 分类列表 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredCategories.map((category) => (
          <div key={category.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            {/* 分类标题和颜色 */}
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center">
                <div
                  className="w-4 h-4 rounded-full mr-3"
                  style={{ backgroundColor: category.color }}
                />
                <h3 className="text-lg font-semibold text-gray-900">{category.title}</h3>
              </div>
              
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => startEdit(category)}
                  className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
                  title="编辑"
                >
                  <Edit size={16} />
                </button>
                <button
                  onClick={() => handleDeleteCategory(category.id)}
                  className="p-2 text-gray-400 hover:text-red-600 transition-colors"
                  title="删除"
                >
                  <Trash2 size={16} />
                </button>
              </div>
            </div>

            {/* AI提示词 */}
            <div className="mb-4">
              <p className="text-sm text-gray-600 leading-relaxed">{category.ai_prompt}</p>
            </div>

            {/* 创建时间 */}
            <div className="text-xs text-gray-400">
              创建于 {new Date(category.created_at).toLocaleDateString()}
            </div>
          </div>
        ))}
      </div>

      {/* 空状态 */}
      {filteredCategories.length === 0 && (
        <div className="text-center py-12">
          <div className="text-gray-400 mb-4">
            {searchTerm ? '没有找到匹配的分类' : '暂无分类'}
          </div>
          {!searchTerm && (
            <button
              onClick={() => setShowCreateForm(true)}
              className="text-blue-600 hover:text-blue-700"
            >
              创建第一个分类
            </button>
          )}
        </div>
      )}

      {/* 创建/编辑表单弹窗 */}
      {(showCreateForm || editingCategory) && (
        <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 w-full max-w-md mx-4">
            {/* 表单标题 */}
            <div className="flex items-center justify-between p-6 border-b border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900">
                {editingCategory ? '编辑分类' : '新建分类'}
              </h2>
              <button
                onClick={cancelEdit}
                className="text-gray-400 hover:text-gray-600"
              >
                <X size={24} />
              </button>
            </div>

            {/* 表单内容 */}
            <div className="p-6 space-y-4">
              {/* 分类标题 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  分类标题
                </label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="请输入分类标题"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              {/* AI识别提示词 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  AI识别提示词
                </label>
                <textarea
                  value={formData.ai_prompt}
                  onChange={(e) => setFormData({ ...formData, ai_prompt: e.target.value })}
                  placeholder="描述这类素材的特征，用于AI自动分类"
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                />
              </div>

              {/* 展示颜色 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  展示颜色
                </label>
                <div className="flex items-center space-x-3 mb-3">
                  <div
                    className="w-8 h-8 rounded-lg border-2 border-gray-300"
                    style={{ backgroundColor: formData.color }}
                  />
                  <input
                    type="color"
                    value={formData.color}
                    onChange={(e) => setFormData({ ...formData, color: e.target.value })}
                    className="w-16 h-8 border border-gray-300 rounded cursor-pointer"
                  />
                  <span className="text-sm text-gray-600">{formData.color}</span>
                </div>

                {/* 预设颜色 */}
                <div className="grid grid-cols-9 gap-2">
                  {presetColors.map((color) => (
                    <button
                      key={color}
                      onClick={() => setFormData({ ...formData, color })}
                      className={`w-8 h-8 rounded-lg border-2 transition-all ${
                        formData.color === color
                          ? 'border-gray-800 scale-110'
                          : 'border-gray-300 hover:border-gray-400'
                      }`}
                      style={{ backgroundColor: color }}
                      title={color}
                    />
                  ))}
                </div>
              </div>
            </div>

            {/* 表单按钮 */}
            <div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200">
              <button
                onClick={cancelEdit}
                className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                取消
              </button>
              <button
                onClick={editingCategory ? handleUpdateCategory : handleCreateCategory}
                disabled={!formData.title.trim() || !formData.ai_prompt.trim()}
                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
              >
                <Save size={16} className="mr-2" />
                {editingCategory ? '保存' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default ResourceCategoryPage