csdesign-pc-diy-store/app/orders/[id]/page.tsx

'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { 
  ArrowLeft, 
  Package, 
  Calendar, 
  DollarSign, 
  User, 
  MapPin, 
  Phone,
  Mail,
  Truck,
  CheckCircle,
  XCircle,
  Clock
} from 'lucide-react'

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

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

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

export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const [order, setOrder] = useState<Order | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isCancelling, setIsCancelling] = useState(false)
  const [orderId, setOrderId] = useState<string>('')
  const router = useRouter()

  useEffect(() => {
    const getParams = async () => {
      const { id } = await params
      setOrderId(id)
    }
    getParams()
  }, [params])

  useEffect(() => {
    if (orderId) {
      loadOrderDetail()
    }
  }, [orderId])

  const loadOrderDetail = async () => {
    try {
      const token = localStorage.getItem('token')
      if (!token) {
        router.push('/login')
        return
      }

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

      if (response.ok) {
        const data = await response.json()
        setOrder(data)
      } else if (response.status === 401) {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        router.push('/login')
      } else if (response.status === 404) {
        router.push('/orders')
      }
    } catch (error) {
      console.error('加载订单详情失败:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleCancelOrder = async () => {
    if (!order || order.status !== 'PENDING') {
      alert('当前订单状态不允许取消')
      return
    }

    if (!confirm('确定要取消这个订单吗？取消后将恢复商品库存。')) {
      return
    }

    setIsCancelling(true)

    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) {
        const updatedOrder = await response.json()
        setOrder(updatedOrder)
        alert('订单已成功取消')
      } else {
        const error = await response.json()
        alert(error.message || '取消订单失败')
      }
    } catch (error) {
      console.error('取消订单失败:', error)
      alert('取消订单失败，请重试')
    } finally {
      setIsCancelling(false)
    }
  }
  const handleReorder = async () => {
    if (!order) return

    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('商品已添加到购物车！')
      router.push('/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>
    )
  }

  if (!order) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Package className="h-24 w-24 text-gray-300 mx-auto mb-6" />
          <h2 className="text-2xl font-semibold text-gray-900 mb-4">订单不存在</h2>
          <Link
            href="/orders"
            className="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            <ArrowLeft className="h-5 w-5 mr-2" />
            返回订单列表
          </Link>
        </div>
      </div>
    )
  }

  const statusConfig = statusMap[order.status] || { text: order.status, color: 'bg-gray-100 text-gray-800 border-gray-200', icon: Package }
  const StatusIcon = statusConfig.icon

  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="/orders"
              className="text-gray-600 hover:text-gray-900 transition-colors"
            >
              <ArrowLeft className="h-6 w-6" />
            </Link>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">订单详情</h1>
              <p className="text-gray-600">订单号: {order.orderNumber}</p>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {/* Order Status */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <div className={`p-3 rounded-full ${statusConfig.color.replace('text-', 'bg-').replace('bg-', 'bg-').replace('-100', '-200')}`}>
                  <StatusIcon className="h-6 w-6" />
                </div>
                <div>
                  <h2 className="text-xl font-semibold text-gray-900">订单状态</h2>
                  <span className={`inline-flex px-3 py-1 text-sm font-medium rounded-full border ${statusConfig.color}`}>
                    {statusConfig.text}
                  </span>
                </div>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-600">下单时间</p>
                <p className="font-medium text-gray-900">
                  {new Date(order.createdAt).toLocaleString('zh-CN')}
                </p>
                {order.updatedAt !== order.createdAt && (
                  <>
                    <p className="text-sm text-gray-600 mt-2">更新时间</p>
                    <p className="font-medium text-gray-900">
                      {new Date(order.updatedAt).toLocaleString('zh-CN')}
                    </p>
                  </>
                )}
              </div>
            </div>
          </div>

          {/* Order Items */}
          <div className="bg-white rounded-lg shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">订单商品</h3>
            </div>
            <div className="p-6">
              <div className="space-y-6">
                {order.orderItems.map((item, index) => (
                  <div key={item.id} className={`flex items-center space-x-4 ${index > 0 ? 'pt-6 border-t border-gray-200' : ''}`}>
                    <div className="w-20 h-20 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-10 w-10 text-gray-400" />
                      )}
                    </div>
                    <div className="flex-1">
                      <h4 className="font-medium text-gray-900 text-lg">{item.component?.name || '未知商品'}</h4>
                      <div className="mt-1 space-y-1">
                        <p className="text-sm text-gray-600">
                          品牌: {item.component?.brand || '未知品牌'}
                        </p>
                        <p className="text-sm text-gray-600">
                          型号: {item.component?.model || '未知型号'}
                        </p>
                        <p className="text-sm text-gray-600">
                          类型: {item.component?.componentType?.name || '未知类型'}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-lg font-medium text-gray-900">¥{item.price}</p>
                      <p className="text-sm text-gray-600">数量: {item.quantity}</p>
                      <p className="text-sm font-medium text-red-600">
                        小计: ¥{(item.price * item.quantity).toFixed(2)}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Order Summary */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">订单汇总</h3>
            <div className="space-y-3">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">商品数量:</span>
                <span className="text-gray-900">{order.orderItems.length} 件</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">商品总价:</span>
                <span className="text-gray-900">¥{order.totalAmount}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">运费:</span>
                <span className="text-gray-900">免费</span>
              </div>
              <div className="border-t border-gray-200 pt-3">
                <div className="flex justify-between">
                  <span className="text-lg font-semibold text-gray-900">实付款:</span>
                  <span className="text-xl font-bold text-red-600">¥{order.totalAmount}</span>
                </div>
              </div>
            </div>
          </div>

          {/* User Info */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">用户信息</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="flex items-center space-x-3">
                <User className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">用户名</p>
                  <p className="font-medium text-gray-900">{order.user.username}</p>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                <Mail className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">邮箱</p>
                  <p className="font-medium text-gray-900">{order.user.email}</p>
                </div>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex justify-between items-center">
              <div className="text-sm text-gray-600">
                <Calendar className="h-4 w-4 inline mr-1" />
                订单创建于 {new Date(order.createdAt).toLocaleDateString('zh-CN')}
              </div>
              <div className="flex space-x-3">
                {order.status === 'PENDING' && (
                  <button
                    onClick={handleCancelOrder}
                    disabled={isCancelling}
                    className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:bg-red-300 disabled:cursor-not-allowed transition-colors"
                  >
                    {isCancelling ? '取消中...' : '取消订单'}
                  </button>
                )}
                {order.status === 'DELIVERED' && (
                  <button
                    onClick={handleReorder}
                    className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    再次购买
                  </button>
                )}
                <Link
                  href="/orders"
                  className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors"
                >
                  返回订单列表
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}