'use client'

import { useField, useFormFields } from '@payloadcms/ui'
import React, { useEffect, useState } from 'react'

interface PreorderItem {
  id: string
  title: string
  variant_id: string
  variant_sku?: string
  variant_title?: string
  quantity: number
  unit_price: number
  total: number
}

interface Order {
  id: string
  display_id: number
  status: string
  payment_status: string
  fulfillment_status: string
  email: string
  total: number
  preorder_amount: number
  preorder_quantity: number
  currency_code: string
  created_at: string
  preorder_items: PreorderItem[]
}

interface Statistics {
  total_orders: number
  total_quantity: number
  total_amount: number
  status_breakdown: Record<string, number>
}

export const PreorderOrdersField: React.FC = () => {
  const { value: medusaId } = useField<string>({ path: 'medusaId' })
  const { value: seedId } = useField<string>({ path: 'seedId' })
  
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [stats, setStats] = useState<Statistics | null>(null)

  useEffect(() => {
    if (medusaId || seedId) {
      fetchOrders()
    }
  }, [medusaId, seedId])

  const fetchOrders = async () => {
    const productId = seedId || medusaId
    if (!productId) return

    try {
      setLoading(true)
      setError(null)

      const response = await fetch(`/api/preorders/${productId}/orders`)
      
      if (!response.ok) {
        throw new Error('Failed to fetch orders')
      }

      const data = await response.json()
      setOrders(data.orders || [])
      setStats(data.statistics ?? null)
    } catch (err: any) {
      console.error('Failed to fetch orders:', err)
      setError(err.message || 'Failed to load orders')
    } finally {
      setLoading(false)
    }
  }

  const formatCurrency = (amount: number, currency: string) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: currency.toUpperCase(),
    }).format(amount / 100)
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  }

  if (!medusaId && !seedId) {
    return (
      <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', marginBottom: '1rem' }}>
        <p style={{ margin: 0, color: '#666' }}>
          产品尚未同步到 Medusa，无法查看订单
        </p>
      </div>
    )
  }

  if (loading) {
    return (
      <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', marginBottom: '1rem' }}>
        <p style={{ margin: 0 }}>加载订单中...</p>
      </div>
    )
  }

  if (error) {
    return (
      <div style={{ padding: '1rem', background: '#fee', borderRadius: '4px', marginBottom: '1rem', border: '1px solid #fcc' }}>
        <p style={{ margin: 0, color: '#c00' }}>加载失败: {error}</p>
        <button
          onClick={fetchOrders}
          style={{
            marginTop: '0.5rem',
            padding: '0.25rem 0.5rem',
            background: '#fff',
            border: '1px solid #ccc',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          重试
        </button>
      </div>
    )
  }

  if (orders.length === 0) {
    return (
      <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', marginBottom: '1rem' }}>
        <p style={{ margin: 0, color: '#666' }}>暂无订单</p>
        <button
          onClick={fetchOrders}
          style={{
            marginTop: '0.5rem',
            padding: '0.25rem 0.5rem',
            background: '#fff',
            border: '1px solid #ccc',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          刷新
        </button>
      </div>
    )
  }

  return (
    <div style={{ marginBottom: '1rem' }}>
      {/* 统计信息 */}
      {stats && (
        <div style={{
          padding: '1rem',
          background: '#e3f2fd',
          borderRadius: '4px',
          marginBottom: '1rem',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          gap: '1rem',
        }}>
          <div>
            <div style={{ fontSize: '0.875rem', color: '#666', marginBottom: '0.25rem' }}>订单总数</div>
            <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#1976d2' }}>{stats.total_orders}</div>
          </div>
          <div>
            <div style={{ fontSize: '0.875rem', color: '#666', marginBottom: '0.25rem' }}>预购数量</div>
            <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#1976d2' }}>{stats.total_quantity}</div>
          </div>
          <div>
            <div style={{ fontSize: '0.875rem', color: '#666', marginBottom: '0.25rem' }}>预购金额</div>
            <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#1976d2' }}>
              {formatCurrency(stats.total_amount, orders[0]?.currency_code || 'CNY')}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <button
              onClick={fetchOrders}
              style={{
                padding: '0.5rem 1rem',
                background: '#fff',
                border: '1px solid #1976d2',
                borderRadius: '4px',
                cursor: 'pointer',
                color: '#1976d2',
                fontSize: '0.875rem',
              }}
            >
              🔄 刷新订单
            </button>
          </div>
        </div>
      )}

      {/* 订单列表 */}
      <div style={{
        border: '1px solid #e0e0e0',
        borderRadius: '4px',
        overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: '#f5f5f5', borderBottom: '2px solid #e0e0e0' }}>
              <th style={{ padding: '0.75rem', textAlign: 'left', fontSize: '0.875rem', fontWeight: 600 }}>订单号</th>
              <th style={{ padding: '0.75rem', textAlign: 'left', fontSize: '0.875rem', fontWeight: 600 }}>客户</th>
              <th style={{ padding: '0.75rem', textAlign: 'left', fontSize: '0.875rem', fontWeight: 600 }}>商品</th>
              <th style={{ padding: '0.75rem', textAlign: 'right', fontSize: '0.875rem', fontWeight: 600 }}>金额</th>
              <th style={{ padding: '0.75rem', textAlign: 'center', fontSize: '0.875rem', fontWeight: 600 }}>状态</th>
              <th style={{ padding: '0.75rem', textAlign: 'left', fontSize: '0.875rem', fontWeight: 600 }}>时间</th>
            </tr>
          </thead>
          <tbody>
            {orders.map((order, index) => (
              <tr
                key={order.id}
                style={{
                  borderBottom: index < orders.length - 1 ? '1px solid #e0e0e0' : 'none',
                  background: index % 2 === 0 ? '#fff' : '#fafafa',
                }}
              >
                <td style={{ padding: '0.75rem', fontSize: '0.875rem' }}>
                  <div style={{ fontWeight: 600 }}>#{order.display_id}</div>
                  <div style={{ fontSize: '0.75rem', color: '#999' }}>{order.id.slice(0, 8)}</div>
                </td>
                <td style={{ padding: '0.75rem', fontSize: '0.875rem' }}>
                  {order.email}
                </td>
                <td style={{ padding: '0.75rem', fontSize: '0.875rem' }}>
                  {(order.preorder_items || []).map((item, i) => (
                    <div key={i} style={{ marginBottom: i < order.preorder_items.length - 1 ? '0.25rem' : 0 }}>
                      {item.variant_title ? `${item.title} · ${item.variant_title}` : item.title} × {item.quantity}
                    </div>
                  ))}
                </td>
                <td style={{ padding: '0.75rem', fontSize: '0.875rem', textAlign: 'right', fontWeight: 600 }}>
                  {formatCurrency(order.total, order.currency_code)}
                </td>
                <td style={{ padding: '0.75rem', textAlign: 'center' }}>
                  <span style={{
                    display: 'inline-block',
                    padding: '0.25rem 0.5rem',
                    borderRadius: '4px',
                    fontSize: '0.75rem',
                    fontWeight: 600,
                    background: order.status === 'completed' ? '#e8f5e9' : '#fff3e0',
                    color: order.status === 'completed' ? '#2e7d32' : '#f57c00',
                  }}>
                    {order.status}
                  </span>
                </td>
                <td style={{ padding: '0.75rem', fontSize: '0.875rem' }}>
                  {formatDate(order.created_at)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}