/**
 * 分类管理组件
 * 提取自 app/admin/page.tsx 的分类管理功能
 * 包含：店铺分类、场景分类、平台分类、品类管理
 */

'use client'

import { useState } from 'react'
import type { Category, Scene, Platform, ProductCategory } from '@/hooks/useAdminState'
import { parseFetchError, handleError } from '@/lib/error-handler'

interface CategoryManagementProps {
  categories: Category[]
  setCategories: React.Dispatch<React.SetStateAction<Category[]>>
  scenes: Scene[]
  setScenes: React.Dispatch<React.SetStateAction<Scene[]>>
  platforms: Platform[]
  setPlatforms: React.Dispatch<React.SetStateAction<Platform[]>>
  productCategories: ProductCategory[]
  setProductCategories: React.Dispatch<React.SetStateAction<ProductCategory[]>>
  showToast: (message: string, type?: 'success' | 'error') => void
}

export default function CategoryManagement({
  categories,
  setCategories,
  scenes,
  setScenes,
  platforms,
  setPlatforms,
  productCategories,
  setProductCategories,
  showToast,
}: CategoryManagementProps) {
  // 编辑状态
  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
  const [editingScene, setEditingScene] = useState<Scene | null>(null)
  const [editingPlatform, setEditingPlatform] = useState<Platform | null>(null)
  const [editingProductCategory, setEditingProductCategory] = useState<ProductCategory | null>(null)
  
  // 添加弹窗状态
  const [showAddCategoryModal, setShowAddCategoryModal] = useState(false)
  const [showAddSceneModal, setShowAddSceneModal] = useState(false)
  const [showAddPlatformModal, setShowAddPlatformModal] = useState(false)
  const [showAddProductCategoryModal, setShowAddProductCategoryModal] = useState(false)
  
  // 新建输入状态
  const [newCategoryName, setNewCategoryName] = useState('')
  const [newSceneName, setNewSceneName] = useState('')
  const [newPlatformName, setNewPlatformName] = useState('')
  const [newProductCategoryName, setNewProductCategoryName] = useState('')

  // ========== 店铺分类操作 ==========
  const handleAddCategory = async () => {
    if (!newCategoryName.trim()) {
      showToast('分类名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/categories', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newCategoryName.trim() }),
      })

      if (response.ok) {
        const data = await response.json()
        setCategories(prev => [...prev, { id: data.id, name: newCategoryName.trim(), count: 0 }])
        setShowAddCategoryModal(false)
        setNewCategoryName('')
        showToast('添加成功')
      } else {
        const parsedError = await parseFetchError(response)
        showToast(parsedError.message, 'error')
      }
    } catch (error) {
      console.error('Error adding category:', error)
      const { message } = handleError(error)
      showToast(message, 'error')
    }
  }

  const handleUpdateCategory = async (id: string, newName: string) => {
    if (!newName.trim()) {
      showToast('分类名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/categories', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, name: newName.trim() }),
      })

      if (response.ok) {
        setCategories(prev => 
          prev.map(cat => cat.id === id ? { ...cat, name: newName.trim() } : cat)
        )
        setEditingCategory(null)
        showToast('修改成功')
      } else {
        const parsedError = await parseFetchError(response)
        showToast(parsedError.message, 'error')
      }
    } catch (error) {
      console.error('Error updating category:', error)
      const { message } = handleError(error)
      showToast(message, 'error')
    }
  }

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

    try {
      const response = await fetch(`/api/categories?id=${id}`, { method: 'DELETE' })

      if (response.ok) {
        setCategories(prev => prev.filter(cat => cat.id !== id))
        showToast('删除成功')
      } else {
        const parsedError = await parseFetchError(response)
        showToast(parsedError.message, 'error')
      }
    } catch (error) {
      console.error('Error deleting category:', error)
      const { message } = handleError(error)
      showToast(message, 'error')
    }
  }

  // ========== 场景分类操作 ==========
  const handleAddScene = async () => {
    if (!newSceneName.trim()) {
      showToast('场景名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/scenes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newSceneName.trim() }),
      })

      if (response.ok) {
        const data = await response.json()
        setScenes(prev => [...prev, { id: data.id, name: newSceneName.trim(), count: 0 }])
        setShowAddSceneModal(false)
        setNewSceneName('')
        showToast('添加成功')
      } else {
        const data = await response.json()
        showToast(data.error || '添加失败', 'error')
      }
    } catch (error) {
      console.error('Error adding scene:', error)
      showToast('添加失败', 'error')
    }
  }

  const handleUpdateScene = async (id: string, newName: string) => {
    if (!newName.trim()) {
      showToast('场景名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/scenes', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, name: newName.trim() }),
      })

      if (response.ok) {
        setScenes(prev => 
          prev.map(scene => scene.id === id ? { ...scene, name: newName.trim() } : scene)
        )
        setEditingScene(null)
        showToast('修改成功')
      } else {
        const data = await response.json()
        showToast(data.error || '修改失败', 'error')
      }
    } catch (error) {
      console.error('Error updating scene:', error)
      showToast('修改失败', 'error')
    }
  }

  const handleDeleteScene = async (id: string) => {
    if (!confirm('确定要删除这个场景类别吗？')) return

    try {
      const response = await fetch(`/api/scenes?id=${id}`, { method: 'DELETE' })

      if (response.ok) {
        setScenes(prev => prev.filter(scene => scene.id !== id))
        showToast('删除成功')
      } else {
        const data = await response.json()
        showToast(data.error || '删除失败', 'error')
      }
    } catch (error) {
      console.error('Error deleting scene:', error)
      showToast('删除失败', 'error')
    }
  }

  // ========== 平台分类操作 ==========
  const handleAddPlatform = async () => {
    if (!newPlatformName.trim()) {
      showToast('平台名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/platforms', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newPlatformName.trim() }),
      })

      if (response.ok) {
        const data = await response.json()
        setPlatforms(prev => [...prev, { id: data.id, name: newPlatformName.trim(), count: 0 }])
        setShowAddPlatformModal(false)
        setNewPlatformName('')
        showToast('添加成功')
      } else {
        const data = await response.json()
        showToast(data.error || '添加失败', 'error')
      }
    } catch (error) {
      console.error('Error adding platform:', error)
      showToast('添加失败', 'error')
    }
  }

  const handleUpdatePlatform = async (id: string, newName: string) => {
    if (!newName.trim()) {
      showToast('平台名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/platforms', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, name: newName.trim() }),
      })

      if (response.ok) {
        setPlatforms(prev => 
          prev.map(platform => platform.id === id ? { ...platform, name: newName.trim() } : platform)
        )
        setEditingPlatform(null)
        showToast('修改成功')
      } else {
        const data = await response.json()
        showToast(data.error || '修改失败', 'error')
      }
    } catch (error) {
      console.error('Error updating platform:', error)
      showToast('修改失败', 'error')
    }
  }

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

    try {
      const response = await fetch(`/api/platforms?id=${id}`, { method: 'DELETE' })

      if (response.ok) {
        setPlatforms(prev => prev.filter(platform => platform.id !== id))
        showToast('删除成功')
      } else {
        const data = await response.json()
        showToast(data.error || '删除失败', 'error')
      }
    } catch (error) {
      console.error('Error deleting platform:', error)
      showToast('删除失败', 'error')
    }
  }

  // ========== 品类操作 ==========
  const handleAddProductCategory = async () => {
    if (!newProductCategoryName.trim()) {
      showToast('请输入品类名称', 'error')
      return
    }

    try {
      const response = await fetch('/api/product-categories', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newProductCategoryName.trim() }),
      })

      if (response.ok) {
        const data = await response.json()
        setProductCategories(prev => [...prev, { id: data.id, name: newProductCategoryName.trim(), count: 0 }])
        setShowAddProductCategoryModal(false)
        setNewProductCategoryName('')
        showToast('添加成功')
      } else {
        const data = await response.json()
        showToast(data.error || '添加失败', 'error')
      }
    } catch (error) {
      console.error('Error adding product category:', error)
      showToast('添加失败', 'error')
    }
  }

  const handleUpdateProductCategory = async (id: string, newName: string) => {
    if (!newName.trim()) {
      showToast('品类名称不能为空', 'error')
      return
    }

    try {
      const response = await fetch('/api/product-categories', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, name: newName.trim() }),
      })

      if (response.ok) {
        setProductCategories(prev => 
          prev.map(cat => cat.id === id ? { ...cat, name: newName.trim() } : cat)
        )
        setEditingProductCategory(null)
        showToast('修改成功')
      } else {
        const data = await response.json()
        showToast(data.error || '修改失败', 'error')
      }
    } catch (error) {
      console.error('Error updating product category:', error)
      showToast('修改失败', 'error')
    }
  }

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

    try {
      const response = await fetch(`/api/product-categories?id=${id}`, { method: 'DELETE' })

      if (response.ok) {
        setProductCategories(prev => prev.filter(cat => cat.id !== id))
        showToast('删除成功')
      } else {
        const data = await response.json()
        showToast(data.error || '删除失败', 'error')
      }
    } catch (error) {
      console.error('Error deleting product category:', error)
      showToast('删除失败', 'error')
    }
  }

  return (
    <div className="space-y-8">
      {/* 使用店铺分类 */}
      <CategorySection
        title="使用店铺分类"
        description="管理所有使用店铺分类名称"
        addButtonText="新增店铺"
        items={categories}
        editingItem={editingCategory}
        onAdd={() => setShowAddCategoryModal(true)}
        onEdit={setEditingCategory}
        onUpdate={handleUpdateCategory}
        onDelete={handleDeleteCategory}
        onCancelEdit={() => setEditingCategory(null)}
      />

      {/* 场景类别 */}
      <CategorySection
        title="场景类别"
        description="管理所有场景类别名称"
        addButtonText="新增场景"
        items={scenes}
        editingItem={editingScene}
        onAdd={() => setShowAddSceneModal(true)}
        onEdit={setEditingScene}
        onUpdate={handleUpdateScene}
        onDelete={handleDeleteScene}
        onCancelEdit={() => setEditingScene(null)}
      />

      {/* 平台分类 */}
      <CategorySection
        title="平台分类"
        description="管理所有平台分类名称"
        addButtonText="新增平台"
        items={platforms}
        editingItem={editingPlatform}
        onAdd={() => setShowAddPlatformModal(true)}
        onEdit={setEditingPlatform}
        onUpdate={handleUpdatePlatform}
        onDelete={handleDeletePlatform}
        onCancelEdit={() => setEditingPlatform(null)}
      />

      {/* 品类管理 */}
      <CategorySection
        title="品类管理"
        description="管理所有品类名称"
        addButtonText="新增品类"
        items={productCategories}
        editingItem={editingProductCategory}
        onAdd={() => setShowAddProductCategoryModal(true)}
        onEdit={setEditingProductCategory}
        onUpdate={handleUpdateProductCategory}
        onDelete={handleDeleteProductCategory}
        onCancelEdit={() => setEditingProductCategory(null)}
      />

      {/* 添加弹窗 */}
      <AddModal
        show={showAddCategoryModal}
        title="新增店铺分类"
        placeholder="请输入店铺名称"
        value={newCategoryName}
        onChange={setNewCategoryName}
        onConfirm={handleAddCategory}
        onCancel={() => {
          setShowAddCategoryModal(false)
          setNewCategoryName('')
        }}
      />

      <AddModal
        show={showAddSceneModal}
        title="新增场景类别"
        placeholder="请输入场景名称"
        value={newSceneName}
        onChange={setNewSceneName}
        onConfirm={handleAddScene}
        onCancel={() => {
          setShowAddSceneModal(false)
          setNewSceneName('')
        }}
      />

      <AddModal
        show={showAddPlatformModal}
        title="新增平台分类"
        placeholder="请输入平台名称"
        value={newPlatformName}
        onChange={setNewPlatformName}
        onConfirm={handleAddPlatform}
        onCancel={() => {
          setShowAddPlatformModal(false)
          setNewPlatformName('')
        }}
      />

      <AddModal
        show={showAddProductCategoryModal}
        title="新增品类"
        placeholder="请输入品类名称"
        value={newProductCategoryName}
        onChange={setNewProductCategoryName}
        onConfirm={handleAddProductCategory}
        onCancel={() => {
          setShowAddProductCategoryModal(false)
          setNewProductCategoryName('')
        }}
      />
    </div>
  )
}

// 分类区块组件
interface CategoryItem {
  id: string
  name: string
  count: number
}

interface CategorySectionProps {
  title: string
  description: string
  addButtonText: string
  items: CategoryItem[]
  editingItem: CategoryItem | null
  onAdd: () => void
  onEdit: (item: CategoryItem) => void
  onUpdate: (id: string, newName: string) => void
  onDelete: (id: string) => void
  onCancelEdit: () => void
}

function CategorySection({
  title,
  description,
  addButtonText,
  items,
  editingItem,
  onAdd,
  onEdit,
  onUpdate,
  onDelete,
  onCancelEdit,
}: CategorySectionProps) {
  const [editValue, setEditValue] = useState('')

  const handleStartEdit = (item: CategoryItem) => {
    onEdit(item)
    setEditValue(item.name)
  }

  const handleConfirmEdit = (id: string) => {
    onUpdate(id, editValue)
    setEditValue('')
  }

  const handleCancelEdit = () => {
    onCancelEdit()
    setEditValue('')
  }

  return (
    <div className="card-apple">
      <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h2>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>
        </div>
        <button
          onClick={onAdd}
          className="px-4 py-2 bg-gray-900 dark:bg-gray-700 text-white text-sm rounded-lg hover:bg-gray-800 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          {addButtonText}
        </button>
      </div>
      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {items.map((item) => (
            <div
              key={item.id}
              className="border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:shadow-md transition-shadow"
            >
              {editingItem?.id === item.id ? (
                <div className="space-y-3">
                  <input
                    type="text"
                    value={editValue}
                    onChange={(e) => setEditValue(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-400 outline-none dark:bg-gray-700 dark:text-white"
                    autoFocus
                  />
                  <div className="flex gap-2">
                    <button
                      onClick={() => handleConfirmEdit(item.id)}
                      className="flex-1 px-3 py-1.5 bg-gray-900 dark:bg-gray-600 text-white text-sm rounded-lg hover:bg-gray-800 dark:hover:bg-gray-500 transition-colors"
                    >
                      保存
                    </button>
                    <button
                      onClick={handleCancelEdit}
                      className="flex-1 px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                    >
                      取消
                    </button>
                  </div>
                </div>
              ) : (
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-medium text-gray-900 dark:text-white">{item.name}</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{item.count} 个素材</p>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => handleStartEdit(item)}
                      className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                    </button>
                    <button
                      onClick={() => onDelete(item.id)}
                      className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
        {items.length === 0 && (
          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
            暂无数据
          </div>
        )}
      </div>
    </div>
  )
}

// 添加弹窗组件
interface AddModalProps {
  show: boolean
  title: string
  placeholder: string
  value: string
  onChange: (value: string) => void
  onConfirm: () => void
  onCancel: () => void
}

function AddModal({
  show,
  title,
  placeholder,
  value,
  onChange,
  onConfirm,
  onCancel,
}: AddModalProps) {
  if (!show) return null

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-96 max-w-[90vw]">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{title}</h3>
        <input
          type="text"
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-400 outline-none dark:bg-gray-700 dark:text-white mb-4"
          autoFocus
          onKeyDown={(e) => {
            if (e.key === 'Enter') onConfirm()
            if (e.key === 'Escape') onCancel()
          }}
        />
        <div className="flex justify-end gap-3">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            取消
          </button>
          <button
            onClick={onConfirm}
            className="px-4 py-2 bg-gray-900 dark:bg-gray-600 text-white rounded-lg hover:bg-gray-800 dark:hover:bg-gray-500 transition-colors"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  )
}