'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Trash2, Plus, Minus, ShoppingBag, ArrowLeft } from 'lucide-react'

interface CartItem {
  id: string
  quantity: number
  component: {
    id: string
    name: string
    brand: string
    price: number
    imageUrl?: string | null
    stock: number
    componentType: {
      name: string
    }
  }
}

export default function CartPage() {
  const [cartItems, setCartItems] = useState<CartItem[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isUpdating, setIsUpdating] = useState<string | null>(null)

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

  const loadCartItems = async () => {
    try {
      const token = localStorage.getItem('token')
      if (!token) {
        setIsLoading(false)
        return
      }

      const response = await fetch('/api/cart', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })

      if (response.ok) {
        const items = await response.json()
        setCartItems(items)
      } else if (response.status === 401) {
        // 登录过期，清除token
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        window.location.href = '/login'
      }
    } catch (error) {
      console.error('加载购物车失败:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const updateQuantity = async (cartItemId: string, newQuantity: number) => {
    if (newQuantity < 1) return

    setIsUpdating(cartItemId)
    try {
      const token = localStorage.getItem('token')
      const response = await fetch(`/api/cart/${cartItemId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ quantity: newQuantity })
      })

      if (response.ok) {
        // 重新加载购物车
        await loadCartItems()
      } else {
        const data = await response.json()
        alert(data.message || '更新失败')
      }
    } catch (error) {
      console.error('更新数量失败:', error)
      alert('更新失败')
    } finally {
      setIsUpdating(null)
    }
  }

  const removeFromCart = async (cartItemId: string) => {
    if (!confirm('确定要从购物车中移除这个商品吗？')) return

    setIsUpdating(cartItemId)
    try {
      const token = localStorage.getItem('token')
      const response = await fetch(`/api/cart/${cartItemId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })

      if (response.ok) {
        // 重新加载购物车
        await loadCartItems()
      } else {
        const data = await response.json()
        alert(data.message || '删除失败')
      }
    } catch (error) {
      console.error('删除失败:', error)
      alert('删除失败')
    } finally {
      setIsUpdating(null)
    }
  }

  const clearCart = async () => {
    if (!confirm('确定要清空购物车吗？')) return

    try {
      const token = localStorage.getItem('token')
      const response = await fetch('/api/cart', {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })

      if (response.ok) {
        setCartItems([])
      } else {
        const data = await response.json()
        alert(data.message || '清空失败')
      }
    } catch (error) {
      console.error('清空购物车失败:', error)
      alert('清空失败')
    }
  }

  const getTotalPrice = () => {
    return cartItems.reduce((total, item) => {
      return total + (item.component.price * item.quantity)
    }, 0)
  }

  const getTotalItems = () => {
    return cartItems.reduce((total, item) => total + item.quantity, 0)
  }

  const createOrder = async () => {
    if (cartItems.length === 0) {
      alert('购物车为空')
      return
    }

    try {
      const user = JSON.parse(localStorage.getItem('user') || 'null')
      if (!user) {
        alert('请先登录')
        window.location.href = '/login'
        return
      }

      const orderItems = cartItems.map(item => ({
        componentId: item.component.id,
        quantity: item.quantity,
        price: item.component.price
      }))

      const response = await fetch('/api/orders', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          items: orderItems,
          totalAmount: getTotalPrice()
        })
      })

      if (response.ok) {
        // 清空购物车
        await clearCart()
        alert('订单创建成功！')
        window.location.href = '/orders'
      } else {
        const data = await response.json()
        alert(data.message || '订单创建失败')
      }
    } catch (error) {
      console.error('创建订单失败:', error)
      alert('订单创建失败，请重试')
    }
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">加载中...</p>
        </div>
      </div>
    )
  }

  const user = JSON.parse(localStorage.getItem('user') || 'null')

  if (!user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <ShoppingBag className="h-16 w-16 text-gray-300 mx-auto mb-4" />
          <h2 className="text-2xl font-semibold text-gray-900 mb-4">请先登录</h2>
          <p className="text-gray-600 mb-8">登录后即可查看您的购物车</p>
          <Link
            href="/login"
            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            立即登录
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center space-x-4">
            <Link
              href="/components"
              className="flex items-center text-blue-600 hover:text-blue-800"
            >
              <ArrowLeft className="h-5 w-5 mr-2" />
              继续购物
            </Link>
            <h1 className="text-3xl font-bold text-gray-900">购物车</h1>
          </div>
          
          {cartItems.length > 0 && (
            <button
              onClick={clearCart}
              className="text-red-600 hover:text-red-800 text-sm font-medium"
            >
              清空购物车
            </button>
          )}
        </div>

        {cartItems.length === 0 ? (
          <div className="text-center py-16">
            <ShoppingBag className="h-16 w-16 text-gray-300 mx-auto mb-4" />
            <h2 className="text-2xl font-semibold text-gray-900 mb-4">购物车为空</h2>
            <p className="text-gray-600 mb-8">还没有添加任何商品到购物车</p>
            <Link
              href="/components"
              className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
            >
              开始购物
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Cart Items */}
            <div className="lg:col-span-2">
              <div className="bg-white rounded-lg shadow-sm">
                <div className="p-6 border-b border-gray-200">
                  <h2 className="text-lg font-semibold text-gray-900">
                    商品列表 ({getTotalItems()} 件商品)
                  </h2>
                </div>
                
                <div className="divide-y divide-gray-200">
                  {cartItems.map((item) => (
                    <div key={item.id} className="p-6">
                      <div className="flex items-center space-x-4">
                        <div className="flex-shrink-0 w-20 h-20 bg-gray-100 rounded-lg overflow-hidden">
                          {item.component.imageUrl ? (
                            <img
                              src={item.component.imageUrl}
                              alt={item.component.name}
                              className="w-full h-full object-cover"
                            />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center">
                              <ShoppingBag className="h-8 w-8 text-gray-400" />
                            </div>
                          )}
                        </div>
                        
                        <div className="flex-1">
                          <div className="flex justify-between">
                            <div>
                              <h3 className="font-medium text-gray-900">{item.component.name}</h3>
                              <p className="text-sm text-gray-600">{item.component.brand}</p>
                              <p className="text-xs text-gray-500">{item.component.componentType.name}</p>
                            </div>
                            <div className="text-right">
                              <p className="font-semibold text-gray-900">¥{item.component.price}</p>
                              <p className="text-sm text-gray-600">库存: {item.component.stock}</p>
                            </div>
                          </div>
                          
                          <div className="flex items-center justify-between mt-4">
                            <div className="flex items-center space-x-2">
                              <button
                                onClick={() => updateQuantity(item.id, item.quantity - 1)}
                                disabled={item.quantity <= 1 || isUpdating === item.id}
                                className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                              >
                                <Minus className="h-4 w-4" />
                              </button>
                              <span className="w-12 text-center">{item.quantity}</span>
                              <button
                                onClick={() => updateQuantity(item.id, item.quantity + 1)}
                                disabled={item.quantity >= item.component.stock || isUpdating === item.id}
                                className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                              >
                                <Plus className="h-4 w-4" />
                              </button>
                            </div>
                            
                            <div className="flex items-center space-x-4">
                              <p className="font-semibold text-lg">
                                ¥{(item.component.price * item.quantity).toFixed(2)}
                              </p>
                              <button
                                onClick={() => removeFromCart(item.id)}
                                disabled={isUpdating === item.id}
                                className="text-red-600 hover:text-red-800 disabled:opacity-50"
                              >
                                <Trash2 className="h-5 w-5" />
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Order Summary */}
            <div className="lg:col-span-1">
              <div className="bg-white rounded-lg shadow-sm p-6 sticky top-4">
                <h2 className="text-lg font-semibold text-gray-900 mb-4">订单摘要</h2>
                
                <div className="space-y-3 mb-6">
                  <div className="flex justify-between">
                    <span className="text-gray-600">商品总数:</span>
                    <span className="font-medium">{getTotalItems()} 件</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">商品总价:</span>
                    <span className="font-medium">¥{getTotalPrice().toFixed(2)}</span>
                  </div>
                  <div className="border-t border-gray-200 pt-3">
                    <div className="flex justify-between">
                      <span className="font-semibold text-lg">总计:</span>
                      <span className="font-semibold text-lg text-red-600">
                        ¥{getTotalPrice().toFixed(2)}
                      </span>
                    </div>
                  </div>
                </div>

                <button
                  onClick={createOrder}
                  className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium"
                >
                  结算订单
                </button>
                
                <p className="text-xs text-gray-500 mt-4 text-center">
                  点击结算将创建订单并清空购物车
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}