import React from 'react';

// 商品信息
interface Product {
  id: string;
  name: string;
  category: string; // 商品分類（電子/服飾/食品）
  price: number;
  quantity: number; // 購(gòu)買數(shù)量
}

// 訂單信息
interface Order {
  orderId: string;
  userId: string;
  userName: string;
  createTime: string;
  products: Product[]; // 訂單包含的商品（嵌套數(shù)組）
  status: 'paid' | 'unpaid' | 'cancelled'; // 訂單狀態(tài)
}

// 最終統(tǒng)計(jì)結(jié)果類型
interface OrderStats {
  userTotal: Record<string, number>; // 用戶名 -> 總消費(fèi)金額
  categorySales: Record<string, number>; // 商品分類 -> 總銷量
  validOrders: Order[]; // 有效訂單（paid + 金額>100）
}

const ComplexReduceDemo: React.FC = () => {
  // 模擬復(fù)雜的訂單數(shù)據(jù)（多層嵌套）
  const rawOrders: Order[] = [
    {
      orderId: 'O001',
      userId: 'U001',
      userName: '張三',
      createTime: '2026-01-01',
      status: 'paid',
      products: [
        { id: 'P001', name: '手機(jī)', category: '電子', price: 2999, quantity: 1 },
        { id: 'P002', name: 'T恤', category: '服飾', price: 99, quantity: 2 },
      ],
    },
    {
      orderId: 'O002',
      userId: 'U001',
      userName: '張三',
      createTime: '2026-01-05',
      status: 'unpaid',
      products: [
        { id: 'P003', name: '面包', category: '食品', price: 15, quantity: 5 },
      ],
    },
    {
      orderId: 'O003',
      userId: 'U002',
      userName: '李四',
      createTime: '2026-01-10',
      status: 'paid',
      products: [
        { id: 'P001', name: '手機(jī)', category: '電子', price: 2999, quantity: 2 },
        { id: 'P004', name: '褲子', category: '服飾', price: 199, quantity: 1 },
      ],
    },
  ];

  // 核心：用一次 reduce 完成多維度統(tǒng)計(jì)（避免多次遍歷）
  const stats: OrderStats = rawOrders.reduce((acc, order) => {
    // 1. 計(jì)算當(dāng)前訂單的總金額（嵌套 products 數(shù)組的 reduce）
    const orderTotal = order.products.reduce((sum, product) => {
      return sum + product.price * product.quantity;
    }, 0);

    // 2. 統(tǒng)計(jì)用戶總消費(fèi)（僅已支付訂單）
    if (order.status === 'paid') {
      acc.userTotal[order.userName] = (acc.userTotal[order.userName] || 0) + orderTotal;
    }

    // 3. 按商品分類匯總銷量（所有訂單，無(wú)論狀態(tài)）
    order.products.forEach((product) => {
      acc.categorySales[product.category] = (acc.categorySales[product.category] || 0) + product.quantity;
    });

    // 4. 篩選有效訂單（已支付 + 金額>100）
    if (order.status === 'paid' && orderTotal > 100) {
      acc.validOrders.push({ ...order, // 深拷貝避免原數(shù)據(jù)污染
        products: [...order.products] 
      });
    }

    return acc;
  }, {
    userTotal: {},
    categorySales: {},
    validOrders: [],
  } as OrderStats); // 顯式指定累加器類型，TypeScript 更友好

  // 渲染統(tǒng)計(jì)結(jié)果
  return (
    <div style={{ padding: 20 }}>
      <h2>復(fù)雜對(duì)象的 reduce 處理示例</h2>
      
      <div style={{ margin: 10  marginTop: 20 }}>
        <h3>1. 用戶總消費(fèi)</h3>
        <ul>
          {Object.entries(stats.userTotal).map(([user, total]) => (
            <li key={user}>{user}：￥{total}</li>
          ))}
        </ul>
      </div>

      <div style={{ margin: 10  marginTop: 20 }}>
        <h3>2. 商品分類銷量</h3>
        <ul>
          {Object.entries(stats.categorySales).map(([category, sales]) => (
            <li key={category}>{category}：{sales} 件</li>
          ))}
        </ul>
      </div>

      <div style={{ margin: 10  marginTop: 20 }}>
        <h3>3. 有效訂單（已支付 + 金額>100）</h3>
        <ul>
          {stats.validOrders.map((order) => (
            <li key={order.orderId}>
              訂單{order.orderId}（{order.userName}）：￥{
                order.products.reduce((sum, p) => sum + p.price * p.quantity, 0)
              }
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ComplexReduceDemo;