import { formatCurrency } from '../../lib/utils';

interface OrderItem {
  product?: { name: string; images?: string[] };
  quantity: number;
  unit_price: number;
}

interface OrderSummariesProps {
  order: {
    id: string;
    order_number: string;
    status: string;
    payment_status: string;
    total: number;
    created_at: string;
  };
  products: OrderItem[];
}

const statusLabels: Record<string, string> = {
  pending: 'รอดำเนินการ',
  confirmed: 'ยืนยันแล้ว',
  processing: 'กำลังประมวลผล',
  shipped: 'จัดส่งแล้ว',
  delivered: 'จัดส่งสำเร็จ',
  cancelled: 'ยกเลิก',
  refunded: 'คืนเงินแล้ว'
};

export default function OrderSummaries({ order, products }: OrderSummariesProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm p-6">
      <div className="flex justify-between items-start mb-6">
        <div>
          <p className="text-sm text-gray-500">หมายเลขคำสั่งซื้อ</p>
          <p className="font-bold">{order.order_number}</p>
        </div>
        <span className={`px-3 py-1 rounded-full text-sm ${
          order.status === 'delivered' ? 'bg-green-100 text-green-700' :
          order.status === 'cancelled' ? 'bg-red-100 text-red-700' :
          'bg-yellow-100 text-yellow-700'
        }`}>
          {statusLabels[order.status] || order.status}
        </span>
      </div>

      <div className="space-y-4 mb-6">
        {products.map((item, idx) => (
          <div key={idx} className="flex gap-4">
            <img
              src={item.product?.images?.[0] || '/placeholder.jpg'}
              alt=""
              className="w-16 h-16 object-cover rounded"
            />
            <div className="flex-1">
              <p className="font-medium">{item.product?.name}</p>
              <p className="text-sm text-gray-500">x{item.quantity}</p>
            </div>
            <p className="font-medium">{formatCurrency(item.unit_price * item.quantity)}</p>
          </div>
        ))}
      </div>

      <div className="border-t pt-4">
        <div className="flex justify-between text-sm mb-2">
          <span className="text-gray-600">ราคารวม</span>
          <span>{formatCurrency(order.total * 0.93)}</span>
        </div>
        <div className="flex justify-between text-sm mb-2">
          <span className="text-gray-600">ภาษี (7%)</span>
          <span>{formatCurrency(order.total * 0.07)}</span>
        </div>
        <div className="flex justify-between font-bold text-lg mt-4">
          <span>รวมทั้งสิ้น</span>
          <span>{formatCurrency(order.total)}</span>
        </div>
      </div>
    </div>
  );
}