water-sys/app/screens/Recipient/ConfirmOrder.tsx

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import BackIcon from '../../components/BackIcon';
import fontSize from '../../utils/fontsizeUtils';

export function ConfirmOrder() {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  // 模拟订单数据
  const orderInfo = {
    order_no: 'SO2024031500001',
    status: 'pending',
    payment_method: 'Brainnel Pay(Mobile Money)',
    payment_operator: 'MobiCash',
    total_amount: 486.92,
    items: [
      {
        id: 1,
        product_name: 'Classic Cotton T-Shirt',
        attributes: [
          { attribute_name: 'Color', value: 'White' },
          { attribute_name: 'Size', value: 'L' }
        ],
        quantity: 2,
        price: 89.96,
        total_price: 179.92
      },
      {
        id: 2,
        product_name: 'Casual Denim Jeans',
        attributes: [
          { attribute_name: 'Style', value: 'Slim Fit' },
          { attribute_name: 'Size', value: '32' }
        ],
        quantity: 1,
        price: 297.00,
        total_price: 297.00
      }
    ],
    shipping: {
      method: 'sea',
      domestic_fee: 25.50,
      international_fee: 45.00,
      estimated_arrival: '15-20 days'
    },
    recipient: {
      name: 'John Doe',
      phone: '+225 0123456789',
      address: 'Abidjan, Côte d\'Ivoire'
    }
  };

  return (
    <View style={styles.mainContainer}>
      <ScrollView style={styles.container}>
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon size={20} />
          </TouchableOpacity>
          <Text style={styles.title}>确认订单</Text>
        </View>

        {/* Order Number */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>📋</Text>
            <Text style={styles.sectionTitle}>订单编号</Text>
          </View>
          <Text style={styles.orderNumber}>{orderInfo.order_no}</Text>
        </View>
        <View style={styles.border}></View>

        {/* Payment Method */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>💳</Text>
            <Text style={styles.sectionTitle}>支付方式</Text>
          </View>
          <View style={styles.paymentInfo}>
            <Text style={styles.paymentMethod}>{orderInfo.payment_method}</Text>
            <Text style={styles.paymentOperator}>{orderInfo.payment_operator}</Text>
          </View>
        </View>
        <View style={styles.border}></View>

        {/* Shipping Info */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>🚢</Text>
            <Text style={styles.sectionTitle}>物流信息</Text>
          </View>
          <View style={styles.shippingInfo}>
            <View style={styles.shippingRow}>
              <Text style={styles.shippingLabel}>配送方式：</Text>
              <Text style={styles.shippingValue}>
                {orderInfo.shipping.method === 'sea' ? '海运' : '空运'}
              </Text>
            </View>
            <View style={styles.shippingRow}>
              <Text style={styles.shippingLabel}>预计到达：</Text>
              <Text style={styles.shippingValue}>{orderInfo.shipping.estimated_arrival}</Text>
            </View>
          </View>
        </View>
        <View style={styles.border}></View>

        {/* Recipient Info */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>👤</Text>
            <Text style={styles.sectionTitle}>收件人信息</Text>
          </View>
          <View style={styles.recipientInfo}>
            <Text style={styles.recipientName}>{orderInfo.recipient.name}</Text>
            <Text style={styles.recipientPhone}>{orderInfo.recipient.phone}</Text>
            <Text style={styles.recipientAddress}>{orderInfo.recipient.address}</Text>
          </View>
        </View>
        <View style={styles.border}></View>

        {/* Order Items */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>📦</Text>
            <Text style={styles.sectionTitle}>商品清单</Text>
          </View>
          <View style={styles.orderItems}>
            {orderInfo.items.map((item) => (
              <View key={item.id} style={styles.orderItem}>
                <View style={styles.itemDetails}>
                  <Text style={styles.itemName} numberOfLines={2}>
                    {item.product_name}
                  </Text>
                  {item.attributes.map((attr) => (
                    <Text key={attr.attribute_name} style={styles.itemAttribute}>
                      {attr.attribute_name}: {attr.value}
                    </Text>
                  ))}
                  <Text style={styles.itemQuantity}>x{item.quantity}</Text>
                </View>
                <View style={styles.itemPrice}>
                  <Text style={styles.priceText}>${item.total_price}</Text>
                </View>
              </View>
            ))}
          </View>
        </View>
        <View style={styles.border}></View>

        {/* Price Summary */}
        <View style={styles.section}>
          <View style={styles.priceSummary}>
            <View style={styles.priceRow}>
              <Text style={styles.priceLabel}>商品总价</Text>
              <Text style={styles.priceValue}>${orderInfo.items.reduce((sum, item) => sum + item.total_price, 0)}</Text>
            </View>
            <View style={styles.priceRow}>
              <Text style={styles.priceLabel}>国内运费</Text>
              <Text style={styles.priceValue}>${orderInfo.shipping.domestic_fee}</Text>
            </View>
            <View style={styles.priceRow}>
              <Text style={styles.priceLabel}>国际运费</Text>
              <Text style={styles.priceValue}>${orderInfo.shipping.international_fee}</Text>
            </View>
            <View style={[styles.priceRow, styles.totalRow]}>
              <Text style={styles.totalLabel}>实付金额</Text>
              <Text style={styles.totalAmount}>${orderInfo.total_amount}</Text>
            </View>
          </View>
        </View>

        {/* Bottom Button */}
        <TouchableOpacity style={styles.bottomButton}>
          <View style={styles.bottomButtonContent}>
            <Text style={styles.bottomButtonText}>立即支付</Text>
          </View>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#fff',
    elevation: 3,
  },
  title: {
    fontSize: fontSize(18),
    fontWeight: '500',
    flex: 1,
    textAlign: 'center',
  },
  section: {
    backgroundColor: '#fff',
    padding: 16,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  sectionIcon: {
    fontSize: fontSize(18),
    marginRight: 8,
  },
  sectionTitle: {
    fontSize: fontSize(16),
    fontWeight: '500',
  },
  border: {
    height: 6,
    backgroundColor: '#f5f5f5',
  },
  orderNumber: {
    fontSize: fontSize(16),
    color: '#666',
  },
  paymentInfo: {
    backgroundColor: '#f8f8f8',
    padding: 12,
    borderRadius: 8,
  },
  paymentMethod: {
    fontSize: fontSize(16),
    fontWeight: '500',
    marginBottom: 4,
  },
  paymentOperator: {
    fontSize: fontSize(14),
    color: '#666',
  },
  shippingInfo: {
    backgroundColor: '#f8f8f8',
    padding: 12,
    borderRadius: 8,
  },
  shippingRow: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  shippingLabel: {
    fontSize: fontSize(14),
    color: '#666',
    width: 80,
  },
  shippingValue: {
    fontSize: fontSize(14),
    flex: 1,
  },
  recipientInfo: {
    backgroundColor: '#f8f8f8',
    padding: 12,
    borderRadius: 8,
  },
  recipientName: {
    fontSize: fontSize(16),
    fontWeight: '500',
    marginBottom: 4,
  },
  recipientPhone: {
    fontSize: fontSize(14),
    color: '#666',
    marginBottom: 4,
  },
  recipientAddress: {
    fontSize: fontSize(14),
    color: '#666',
  },
  orderItems: {
    gap: 12,
  },
  orderItem: {
    flexDirection: 'row',
    padding: 12,
    backgroundColor: '#f8f8f8',
    borderRadius: 8,
  },
  itemDetails: {
    flex: 1,
  },
  itemName: {
    fontSize: fontSize(14),
    marginBottom: 4,
  },
  itemAttribute: {
    fontSize: fontSize(12),
    color: '#666',
    marginBottom: 2,
  },
  itemQuantity: {
    fontSize: fontSize(12),
    color: '#999',
    marginTop: 4,
  },
  itemPrice: {
    justifyContent: 'center',
  },
  priceText: {
    fontSize: fontSize(16),
    fontWeight: '500',
    color: '#ff6000',
  },
  priceSummary: {
    backgroundColor: '#f8f8f8',
    padding: 16,
    borderRadius: 8,
  },
  priceRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  priceLabel: {
    fontSize: fontSize(14),
    color: '#666',
  },
  priceValue: {
    fontSize: fontSize(14),
    color: '#333',
  },
  totalRow: {
    marginTop: 8,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  totalLabel: {
    fontSize: fontSize(16),
    fontWeight: '500',
  },
  totalAmount: {
    fontSize: fontSize(18),
    fontWeight: '600',
    color: '#ff6000',
  },
  bottomButton: {
    width: '100%',
    padding: 16,
    backgroundColor: '#fff',
  },
  bottomButtonContent: {
    backgroundColor: '#ff6000',
    padding: 16,
    borderRadius: 25,
    alignItems: 'center',
  },
  bottomButtonText: {
    color: '#fff',
    fontSize: fontSize(16),
    fontWeight: '500',
  },
});