import {
  Card,
  Typography,
  Space,
  Divider,
  FC,
} from '@/imports';
import { InstanceType, InstanceConfig } from '@/services/instanceDataSource';

interface OrderSummaryProps {
  instanceType: InstanceType | undefined;
  config: InstanceConfig;
  billingCycle: 'monthly' | 'yearly';
  price: {
    monthly: number;
    yearly: number;
    discount: number;
  };
  paymentMethod: string;
}

const OrderSummary: FC<OrderSummaryProps> = ({
  instanceType,
  config,
  billingCycle,
  price,
  paymentMethod,
}) => {
  const getPaymentMethodName = (method: string): string => {
    switch (method) {
      case 'creditCard':
        return '信用卡';
      case 'alipay':
        return '支付宝';
      case 'wechat':
        return '微信支付';
      default:
        return '未知';
    }
  };

  return (
    <Card title="订单摘要">
      <Space direction="vertical" style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>实例类型</Typography.Text>
          <Typography.Text strong>{instanceType?.name}</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>CPU</Typography.Text>
          <Typography.Text strong>{config.cpu} 核</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>内存</Typography.Text>
          <Typography.Text strong>{config.memory} GB</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>存储</Typography.Text>
          <Typography.Text strong>{config.storage} GB</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>带宽</Typography.Text>
          <Typography.Text strong>{config.bandwidth} Mbps</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>计费周期</Typography.Text>
          <Typography.Text strong>{billingCycle === 'monthly' ? '月付' : '年付'}</Typography.Text>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
          <Typography.Text>支付方式</Typography.Text>
          <Typography.Text strong>{getPaymentMethodName(paymentMethod)}</Typography.Text>
        </div>
        <Divider />
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: '18px' }}>
          <Typography.Text strong>总计</Typography.Text>
          <Typography.Text strong style={{ color: '#1890ff' }}>
            ¥{billingCycle === 'monthly' ? price.monthly : price.yearly}
          </Typography.Text>
        </div>
      </Space>
    </Card>
  );
};

export default OrderSummary;