'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Package, Calendar, DollarSign, Eye, Filter } from 'lucide-react'

interface OrderItem {
  id: string
  quantity: number
  price: number
  component: {
    id: string
    name: string
    brand: string
    imageUrl?: string
    componentType: {
      name: string
    }
  }
}

interface Order {
  id: string
  orderNumber: string
  totalAmount: number
  status: string
  createdAt: string
  orderItems: OrderItem[]
}

const statusMap: { [key: string]: { text: string; color: string } } = {
  PENDING: { text: '待确认', color: 'bg-yellow-100 text-yellow-800' },
  CONFIRMED: { text: '已确认', color: 'bg-blue-100 text-blue-800' },
  PROCESSING: { text: '处理中', color: 'bg-purple-100 text-purple-800' },
  SHIPPED: { text: '已发货', color: 'bg-green-100 text-green-800' },
  DELIVERED: { text: '已送达', color: 'bg-green-100 text-green-800' },
  CANCELLED: { text: '已取消', color: 'bg-red-100 text-red-800' },
}

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [selectedStatus, setSelectedStatus] = useState<string>('ALL')
  const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(null)

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

  const loadOrders = async () => {
    try {
      const token = localStorage.getItem('token')
      if (!token) {
        window.location.href = '/login'
        return
      }

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

      if (response.ok) {
        const data = await response.json()
        setOrders(data)
      } else if (response.status === 401) {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        window.location.href = '/login'
      }
    } catch (error) {
      console.error('加载订单失败:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const filteredOrders = selectedStatus === 'ALL' 
    ? orders 
    : orders.filter(order => order.status === selectedStatus)

  const handleCancelOrder = async (orderId: string) => {
    if (!confirm('确定要取消这个订单吗？取消后将恢复商品库存。')) {
      return
    }

    setCancellingOrderId(orderId)

    try {
      const token = localStorage.getItem('token')
      const response = await fetch(`/api/orders/${orderId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ action: 'cancel' })
      })

      if (response.ok) {
        // 重新加载订单列表
        await loadOrders()
        alert('订单已成功取消')
      } else {
        const error = await response.json()
        alert(error.message || '取消订单失败')
      }
    } catch (error) {
      console.error('取消订单失败:', error)
      alert('取消订单失败，请重试')
    } finally {
      setCancellingOrderId(null)
    }  }

  const handleReorder = async (order: Order) => {
    const token = localStorage.getItem('token')
    if (!token) {
      alert('请先登录')
      return
    }

    try {
      // 批量添加订单商品到购物车
      for (const item of order.orderItems) {
        await fetch('/api/cart', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            componentId: item.component.id,
            quantity: item.quantity
          })
        })
      }
      
      window.dispatchEvent(new Event('cart-updated'))
      alert('商品已添加到购物车！')
      window.location.href = '/cart'
    } 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>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900">我的订单</h1>
          <Link
            href="/components"
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
          >
            继续购物
          </Link>
        </div>

        {/* Status Filter */}
        <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div className="flex items-center space-x-4">
            <Filter className="h-5 w-5 text-gray-600" />
            <span className="text-gray-700">筛选:</span>
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setSelectedStatus('ALL')}
                className={`px-3 py-1 rounded-full text-sm transition-colors ${
                  selectedStatus === 'ALL'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                全部
              </button>
              {Object.entries(statusMap).map(([status, config]) => (
                <button
                  key={status}
                  onClick={() => setSelectedStatus(status)}
                  className={`px-3 py-1 rounded-full text-sm transition-colors ${
                    selectedStatus === status
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  {config.text}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Orders List */}
        {filteredOrders.length === 0 ? (
          <div className="text-center py-16">
            <Package className="h-24 w-24 text-gray-300 mx-auto mb-6" />
            <h2 className="text-2xl font-semibold text-gray-900 mb-4">
              {selectedStatus === 'ALL' ? '暂无订单' : '暂无该状态的订单'}
            </h2>
            <p className="text-gray-600 mb-8">
              {selectedStatus === 'ALL' 
                ? '还没有任何订单，去看看有什么好东西吧！' 
                : '可以试试其他状态筛选'
              }
            </p>
            <Link
              href="/components"
              className="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Package className="h-5 w-5 mr-2" />
              去购物
            </Link>
          </div>
        ) : (
          <div className="space-y-6">
            {filteredOrders.map((order) => (
              <div key={order.id} className="bg-white rounded-lg shadow-sm overflow-hidden">
                {/* Order Header */}
                <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center space-x-6">
                      <div>
                        <p className="text-sm text-gray-600">订单号</p>
                        <p className="font-medium text-gray-900">{order.orderNumber}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">下单时间</p>
                        <p className="font-medium text-gray-900">
                          {new Date(order.createdAt).toLocaleString('zh-CN')}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">订单状态</p>
                        <span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
                          statusMap[order.status]?.color || 'bg-gray-100 text-gray-800'
                        }`}>
                          {statusMap[order.status]?.text || order.status}
                        </span>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-sm text-gray-600">订单金额</p>
                      <p className="text-xl font-bold text-red-600">¥{order.totalAmount.toFixed(2)}</p>
                    </div>
                  </div>
                </div>

                {/* Order Items */}
                <div className="p-6">
                  <div className="space-y-4">
                    {order.orderItems.map((item) => (
                      <div key={item.id} className="flex items-center space-x-4">                        <div className="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                          {item.component?.imageUrl ? (
                            <img loading='lazy'
                              src={item.component.imageUrl}
                              alt={item.component?.name || '商品图片'}
                              className="max-w-full max-h-full object-contain"
                            />
                          ) : (
                            <Package className="h-8 w-8 text-gray-400" />
                          )}
                        </div><div className="flex-1">
                          <h3 className="font-medium text-gray-900">{item.component?.name || '未知商品'}</h3>
                          <p className="text-sm text-gray-600">
                            {item.component?.brand || '未知品牌'} | {item.component?.componentType?.name || '未知类型'}
                          </p>
                          <p className="text-sm text-gray-600">数量: {item.quantity}</p>
                        </div>
                        <div className="text-right">
                          <p className="font-medium text-gray-900">¥{item.price}</p>
                          <p className="text-sm text-gray-600">
                            小计: ¥{(item.price * item.quantity).toFixed(2)}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Order Actions */}
                  <div className="flex justify-between items-center mt-6 pt-6 border-t border-gray-200">
                    <div className="flex items-center space-x-2 text-sm text-gray-600">
                      <Calendar className="h-4 w-4" />
                      <span>共 {order.orderItems.length} 件商品</span>
                      <DollarSign className="h-4 w-4 ml-4" />
                      <span>实付款: ¥{order.totalAmount}</span>
                    </div>
                    <div className="flex space-x-3">
                      <Link
                        href={`/orders/${order.id}`}
                        className="inline-flex items-center text-blue-600 hover:text-blue-800 text-sm"
                      >
                        <Eye className="h-4 w-4 mr-1" />
                        查看详情
                      </Link>                      {order.status === 'PENDING' && (
                        <button 
                          onClick={() => handleCancelOrder(order.id)}
                          disabled={cancellingOrderId === order.id}
                          className="text-red-600 hover:text-red-800 text-sm disabled:text-red-300 disabled:cursor-not-allowed"
                        >
                          {cancellingOrderId === order.id ? '取消中...' : '取消订单'}
                        </button>
                      )}
                      {order.status === 'DELIVERED' && (
                        <button 
                          onClick={() => handleReorder(order)} 
                          className="text-blue-600 hover:text-blue-800 text-sm"
                        >
                          再次购买
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}