import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Card,
  Table,
  Button,
  Space,
  Tag,
  Input,
  InputNumber,
  Select,
  Row,
  Col,
  Modal,
  message,
  Tooltip,
  Badge,
  Dropdown,
  Menu,
  Image,
  Typography,
  DatePicker,
  Form,
  Drawer,
  Alert,
  Spin,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SyncOutlined,
  UploadOutlined,
  FilterOutlined,
  SortAscendingOutlined,
  SortDescendingOutlined,
  MoreOutlined,
  EyeOutlined,
  CopyOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DollarOutlined,
  ShoppingOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';

import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
import moment from 'moment';

const { Title, Text } = Typography;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;

interface Product {
  id: string;
  sku: string;
  name: string;
  image: string;
  category: string;
  price: number;
  costPrice: number;
  profit: number;
  roi: number;
  stock: number;
  status: 'DRAFT' | 'PRICED' | 'LISTED' | 'SYNCING' | 'LIVE' | 'SYNC_FAILED' | 'OFFLINE';
  platformStatus: Record<string, string>;
  createdAt: string;
  updatedAt: string;
}

interface FilterState {
  keyword: string;
  status: string[];
  platform: string[];
  category: string[];
  roiRange: [number, number] | null;
  dateRange: any;
}

interface SortState {
  field: string;
  order: 'ascend' | 'descend' | null;
}

const STATUS_CONFIG: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  DRAFT: { color: 'default', text: '草稿', icon: <EditOutlined /> },
  PRICED: { color: 'processing', text: '已定价', icon: <DollarOutlined /> },
  LISTED: { color: 'warning', text: '已上架', icon: <ShoppingOutlined /> },
  SYNCING: { color: 'processing', text: '同步中', icon: <SyncOutlined spin /> },
  LIVE: { color: 'success', text: '已在线', icon: <CheckCircleOutlined /> },
  SYNC_FAILED: { color: 'error', text: '同步失败', icon: <CloseCircleOutlined /> },
  OFFLINE: { color: 'default', text: '已下架', icon: <ExclamationCircleOutlined /> },
};

const PLATFORMS = ['Amazon', 'eBay', 'Shopee', 'TikTok', 'Shopify'];
const CATEGORIES = ['工业自动化', '电子元器件', '工具设备', '仪器仪表', '安防设备'];

const MOCK_PRODUCTS: Product[] = [
  {
    id: '1',
    sku: 'TP-TEMP-001',
    name: '工业温度传感器 Pro',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工业自动化',
    price: 89.99,
    costPrice: 45.00,
    profit: 44.99,
    roi: 99.98,
    stock: 256,
    status: 'LIVE',
    platformStatus: { Amazon: 'LIVE', eBay: 'LIVE', Shopee: 'PENDING' },
    createdAt: '2025-12-15',
    updatedAt: '2026-03-18',
  },
  {
    id: '2',
    sku: 'TP-PRES-002',
    name: '压力传感器 Digital',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工业自动化',
    price: 129.99,
    costPrice: 65.00,
    profit: 64.99,
    roi: 99.98,
    stock: 128,
    status: 'DRAFT',
    platformStatus: {},
    createdAt: '2026-03-10',
    updatedAt: '2026-03-10',
  },
  {
    id: '3',
    sku: 'TP-FLOW-003',
    name: '流量计 Ultra',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '仪器仪表',
    price: 299.99,
    costPrice: 150.00,
    profit: 149.99,
    roi: 99.99,
    stock: 64,
    status: 'PRICED',
    platformStatus: {},
    createdAt: '2026-03-15',
    updatedAt: '2026-03-16',
  },
  {
    id: '4',
    sku: 'TP-MOTR-004',
    name: '步进电机 57型',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工业自动化',
    price: 59.99,
    costPrice: 30.00,
    profit: 29.99,
    roi: 99.97,
    stock: 512,
    status: 'LISTED',
    platformStatus: { Amazon: 'LISTED' },
    createdAt: '2026-03-01',
    updatedAt: '2026-03-17',
  },
  {
    id: '5',
    sku: 'TP-CTRL-005',
    name: 'PLC控制器 Mini',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工业自动化',
    price: 199.99,
    costPrice: 100.00,
    profit: 99.99,
    roi: 99.99,
    stock: 32,
    status: 'SYNCING',
    platformStatus: { Amazon: 'SYNCING', eBay: 'SYNCING' },
    createdAt: '2026-03-18',
    updatedAt: '2026-03-18',
  },
  {
    id: '6',
    sku: 'TP-SENS-006',
    name: '光电传感器',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工业自动化',
    price: 39.99,
    costPrice: 20.00,
    profit: 19.99,
    roi: 99.95,
    stock: 0,
    status: 'SYNC_FAILED',
    platformStatus: { Amazon: 'FAILED' },
    createdAt: '2026-03-05',
    updatedAt: '2026-03-18',
  },
  {
    id: '7',
    sku: 'TP-VALV-007',
    name: '电磁阀 24V',
    image: 'https://via.placeholder.com/80x80?text=Product',
    category: '工具设备',
    price: 79.99,
    costPrice: 40.00,
    profit: 39.99,
    roi: 99.98,
    stock: 200,
    status: 'OFFLINE',
    platformStatus: { Amazon: 'OFFLINE', eBay: 'OFFLINE' },
    createdAt: '2025-11-20',
    updatedAt: '2026-02-28',
  },
];

export const ProductList: React.FC = () => {
  const navigate = useNavigate();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState<Product[]>([]);
  const [filterVisible, setFilterVisible] = useState(false);
  const [sortDrawerVisible, setSortDrawerVisible] = useState(false);
  const [pricingModalVisible, setPricingModalVisible] = useState(false);
  const [currentProduct, setCurrentProduct] = useState<Product | null>(null);
  const [syncLoading, setSyncLoading] = useState<Record<string, boolean>>({});
  
  const [filters, setFilters] = useState<FilterState>({
    keyword: '',
    status: [],
    platform: [],
    category: [],
    roiRange: null,
    dateRange: null,
  });
  
  const [sort, setSort] = useState<SortState>({
    field: 'updatedAt',
    order: 'descend',
  });

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = useCallback(async () => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 500));
    setProducts(MOCK_PRODUCTS);
    setLoading(false);
  }, []);

  const handleFilterChange = (key: keyof FilterState, value: any) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  const handleSortChange = (field: string, order: 'ascend' | 'descend') => {
    setSort({ field, order });
    setSortDrawerVisible(false);
    message.success(`已按 ${field} ${order === 'ascend' ? '升序' : '降序'} 排序`);
  };

  const handleTableChange = (
    pagination: TablePaginationConfig,
    filters: Record<string, FilterValue | null>,
    sorter: SorterResult<Product> | SorterResult<Product>[],
    extra: TableCurrentDataSource<Product>
  ) => {
    if (!Array.isArray(sorter) && sorter.field) {
      setSort({
        field: sorter.field as string,
        order: sorter.order || null,
      });
    }
  };

  const handleSearch = (value: string) => {
    handleFilterChange('keyword', value);
  };

  const handleResetFilters = () => {
    setFilters({
      keyword: '',
      status: [],
      platform: [],
      category: [],
      roiRange: null,
      dateRange: null,
    });
    message.success('筛选条件已重置');
  };

  const handleAddProduct = () => {
    navigate('/dashboard/product/publish');
  };

  const handleEditProduct = (record: Product) => {
    navigate(`/dashboard/product/detail/${record.id}`);
  };

  const handleViewProduct = (record: Product) => {
    navigate(`/dashboard/product/detail/${record.id}`);
  };

  const handleDeleteProduct = (record: Product) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除商品 "${record.name}" 吗？此操作不可恢复。`,
      okText: '删除',
      okType: 'danger',
      onOk: () => {
        setProducts(products.filter(p => p.id !== record.id));
        message.success('商品删除成功');
      },
    });
  };

  const handleDuplicateProduct = (record: Product) => {
    const newProduct: Product = {
      ...record,
      id: `${Date.now()}`,
      sku: `${record.sku}-COPY`,
      name: `${record.name} (复制)`,
      status: 'DRAFT',
      platformStatus: {},
      createdAt: moment().format('YYYY-MM-DD'),
      updatedAt: moment().format('YYYY-MM-DD'),
    };
    setProducts([newProduct, ...products]);
    message.success('商品复制成功');
  };

  const handlePricing = (record: Product) => {
    setCurrentProduct(record);
    setPricingModalVisible(true);
  };

  const handlePublish = (record: Product) => {
    Modal.confirm({
      title: '确认上架',
      content: `确定要上架商品 "${record.name}" 吗？`,
      onOk: () => {
        updateProductStatus(record.id, 'LISTED');
        message.success('商品上架成功');
      },
    });
  };

  const handleSync = async (record: Product) => {
    setSyncLoading(prev => ({ ...prev, [record.id]: true }));
    
    updateProductStatus(record.id, 'SYNCING');
    message.loading({ content: '正在同步到平台...', key: record.id });
    
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    const success = Math.random() > 0.3;
    if (success) {
      updateProductStatus(record.id, 'LIVE');
      message.success({ content: '同步成功', key: record.id });
    } else {
      updateProductStatus(record.id, 'SYNC_FAILED');
      message.error({ content: '同步失败，请重试', key: record.id });
    }
    
    setSyncLoading(prev => ({ ...prev, [record.id]: false }));
  };

  const handleOffline = (record: Product) => {
    Modal.confirm({
      title: '确认下架',
      content: `确定要下架商品 "${record.name}" 吗？`,
      onOk: () => {
        updateProductStatus(record.id, 'OFFLINE');
        message.success('商品已下架');
      },
    });
  };

  const handleRetrySync = (record: Product) => {
    handleSync(record);
  };

  const updateProductStatus = (productId: string, status: Product['status']) => {
    setProducts(products.map(p => 
      p.id === productId ? { ...p, status, updatedAt: moment().format('YYYY-MM-DD') } : p
    ));
  };

  const handleBatchDelete = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要删除的商品');
      return;
    }
    Modal.confirm({
      title: '确认批量删除',
      content: `确定要删除选中的 ${selectedRows.length} 个商品吗？`,
      okText: '删除',
      okType: 'danger',
      onOk: () => {
        const ids = selectedRows.map(r => r.id);
        setProducts(products.filter(p => !ids.includes(p.id)));
        setSelectedRows([]);
        message.success(`成功删除 ${ids.length} 个商品`);
      },
    });
  };

  const handleBatchPricing = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要定价的商品');
      return;
    }
    message.info(`批量定价功能：已选择 ${selectedRows.length} 个商品`);
  };

  const handleBatchPublish = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要上架的商品');
      return;
    }
    const pricedProducts = selectedRows.filter(p => p.status === 'PRICED');
    if (pricedProducts.length === 0) {
      message.warning('选中的商品中没有已定价的商品');
      return;
    }
    Modal.confirm({
      title: '确认批量上架',
      content: `确定要上架选中的 ${pricedProducts.length} 个商品吗？`,
      onOk: () => {
        pricedProducts.forEach(p => updateProductStatus(p.id, 'LISTED'));
        setSelectedRows([]);
        message.success(`成功上架 ${pricedProducts.length} 个商品`);
      },
    });
  };

  const handleBatchSync = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要同步的商品');
      return;
    }
    const listableProducts = selectedRows.filter(p => p.status === 'LISTED' || p.status === 'LIVE');
    if (listableProducts.length === 0) {
      message.warning('选中的商品中没有可同步的商品');
      return;
    }
    message.loading('正在批量同步...');
    setTimeout(() => {
      listableProducts.forEach(p => handleSync(p));
      setSelectedRows([]);
    }, 500);
  };

  const filteredProducts = products.filter(product => {
    if (filters.keyword && !product.name.toLowerCase().includes(filters.keyword.toLowerCase()) && 
        !product.sku.toLowerCase().includes(filters.keyword.toLowerCase())) {
      return false;
    }
    if (filters.status.length > 0 && !filters.status.includes(product.status)) {
      return false;
    }
    if (filters.category.length > 0 && !filters.category.includes(product.category)) {
      return false;
    }
    return true;
  });

  const sortedProducts = [...filteredProducts].sort((a, b) => {
    const field = sort.field as keyof Product;
    const aValue = a[field];
    const bValue = b[field];
    
    if (sort.order === 'ascend') {
      return aValue > bValue ? 1 : -1;
    } else {
      return aValue < bValue ? 1 : -1;
    }
  });

  const columns: ColumnsType<Product> = [
    {
      title: '商品信息',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <Space>
          <Image src={record.image} width={60} height={60} style={{ objectFit: 'cover' }} />
          <div>
            <div style={{ fontWeight: 500 }}>{text}</div>
            <div style={{ fontSize: 12, color: '#999' }}>SKU: {record.sku}</div>
            <div style={{ fontSize: 12, color: '#666' }}>{record.category}</div>
          </div>
        </Space>
      ),
      sorter: true,
    },
    {
      title: '售价',
      dataIndex: 'price',
      key: 'price',
      render: (value) => <Text strong>${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: '成本',
      dataIndex: 'costPrice',
      key: 'costPrice',
      render: (value) => <Text type="secondary">${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: '利润',
      dataIndex: 'profit',
      key: 'profit',
      render: (value) => <Text type="success">${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: 'ROI',
      dataIndex: 'roi',
      key: 'roi',
      render: (value) => <Tag color="green">{value.toFixed(2)}%</Tag>,
      sorter: true,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
      render: (value) => (
        <Badge 
          count={value} 
          style={{ backgroundColor: value > 50 ? '#52c41a' : value > 0 ? '#faad14' : '#ff4d4f' }}
        />
      ),
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const config = STATUS_CONFIG[status];
        return (
          <Tag color={config.color} icon={config.icon}>
            {config.text}
          </Tag>
        );
      },
      filters: Object.entries(STATUS_CONFIG).map(([key, config]) => ({
        text: config.text,
        value: key,
      })),
    },
    {
      title: '平台状态',
      key: 'platformStatus',
      render: (_, record) => (
        <Space size="small">
          {Object.entries(record.platformStatus).map(([platform, status]) => (
            <Tooltip key={platform} title={`${platform}: ${status}`}>
              <Tag 

                color={status === 'LIVE' ? 'success' : status === 'FAILED' ? 'error' : 'processing'}
              >
                {platform.charAt(0)}
              </Tag>
            </Tooltip>
          ))}
        </Space>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      sorter: true,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 200,
      render: (_, record) => {
        const menu = (
          <Menu>
            <Menu.Item key="view" icon={<EyeOutlined />} onClick={() => handleViewProduct(record)}>
              查看详情
            </Menu.Item>
            <Menu.Item key="edit" icon={<EditOutlined />} onClick={() => handleEditProduct(record)}>
              编辑
            </Menu.Item>
            <Menu.Item key="duplicate" icon={<CopyOutlined />} onClick={() => handleDuplicateProduct(record)}>
              复制
            </Menu.Item>
            <Menu.Item key="pricing" icon={<DollarOutlined />} onClick={() => handlePricing(record)}>
              定价
            </Menu.Item>
            {record.status === 'PRICED' && (
              <Menu.Item key="publish" icon={<ShoppingOutlined />} onClick={() => handlePublish(record)}>
                上架
              </Menu.Item>
            )}
            {(record.status === 'LISTED' || record.status === 'LIVE') && (
              <Menu.Item 
                key="sync" 
                icon={<SyncOutlined spin={syncLoading[record.id]} />} 
                onClick={() => handleSync(record)}
                disabled={syncLoading[record.id]}
              >
                同步到平台
              </Menu.Item>
            )}
            {record.status === 'SYNC_FAILED' && (
              <Menu.Item key="retry" icon={<SyncOutlined />} onClick={() => handleRetrySync(record)}>
                重试同步
              </Menu.Item>
            )}
            {(record.status === 'LISTED' || record.status === 'LIVE') && (
              <Menu.Item key="offline" icon={<CloseCircleOutlined />} onClick={() => handleOffline(record)}>
                下架
              </Menu.Item>
            )}
            <Menu.Divider />
            <Menu.Item key="delete" icon={<DeleteOutlined />} danger onClick={() => handleDeleteProduct(record)}>
              删除
            </Menu.Item>
          </Menu>
        );

        return (
          <Space>
            <Button type="link" size="small" onClick={() => handleViewProduct(record)}>
              查看
            </Button>
            <Button type="link" size="small" onClick={() => handleEditProduct(record)}>
              编辑
            </Button>
            <Dropdown overlay={menu} placement="bottomRight">
              <Button type="link" size="small" icon={<MoreOutlined />}>
                更多
              </Button>
            </Dropdown>
          </Space>
        );
      },
    },
  ];

  const rowSelection = {
    selectedRowKeys: selectedRows.map(r => r.id),
    onChange: (selectedRowKeys: React.Key[], selectedRows: Product[]) => {
      setSelectedRows(selectedRows);
    },
  };

  return (
    <Card>
      <Alert
        message="商品管理流程说明"
        description={
          <div>
            <p>1. 新建商品：先保存到本地系统（草稿状态）</p>
            <p>2. 定价上架：完成定价后上架到本地（已上架状态）</p>
            <p>3. 平台同步：手动或自动同步到各销售平台（同步中 → 已在线）</p>
            <p>所有商品数据以本地系统为准，平台数据通过同步机制保持一致</p>
          </div>
        }
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col span={24}>
          <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Space>
              <Title level={4} style={{ margin: 0 }}>商品列表</Title>
              <Badge count={sortedProducts.length} showZero style={{ backgroundColor: '#1890ff' }} />
            </Space>
            <Space>
              <Button icon={<FilterOutlined />} onClick={() => setFilterVisible(true)}>
                筛选
              </Button>
              <Button icon={<SortAscendingOutlined />} onClick={() => setSortDrawerVisible(true)}>
                排序
              </Button>
              <Button type="primary" icon={<PlusOutlined />} onClick={handleAddProduct}>
                新增商品
              </Button>
            </Space>
          </Space>
        </Col>
        <Col span={24}>
          <Search
            placeholder="搜索商品名称或SKU"
            allowClear
            enterButton
            onSearch={handleSearch}
            style={{ maxWidth: 400 }}
          />
        </Col>
      </Row>

      {selectedRows.length > 0 && (
        <Alert
          message={`已选择 ${selectedRows.length} 项`}
          type="info"
          showIcon
          action={
            <Space>
              <Button size="small" onClick={handleBatchPricing}>
                批量定价
              </Button>
              <Button size="small" onClick={handleBatchPublish}>
                批量上架
              </Button>
              <Button size="small" onClick={handleBatchSync}>
                批量同步
              </Button>
              <Button size="small" danger onClick={handleBatchDelete}>
                批量删除
              </Button>
            </Space>
          }
          style={{ marginBottom: 16 }}
        />
      )}

      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={sortedProducts}
        loading={loading}
        rowKey="id"
        onChange={handleTableChange}
        scroll={{ x: 1200 }}
        pagination={{
          total: sortedProducts.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
        }}
      />

      <Drawer
        title="筛选条件"
        placement="right"
        onClose={() => setFilterVisible(false)}
        visible={filterVisible}
        width={400}
      >
        <Form layout="vertical">
          <Form.Item label="商品状态">
            <Select
              mode="multiple"
              placeholder="选择状态"
              value={filters.status}
              onChange={(value) => handleFilterChange('status', value)}
              style={{ width: '100%' }}
            >
              {Object.entries(STATUS_CONFIG).map(([key, config]) => (
                <Option key={key} value={key}>{config.text}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="商品类目">
            <Select
              mode="multiple"
              placeholder="选择类目"
              value={filters.category}
              onChange={(value) => handleFilterChange('category', value)}
              style={{ width: '100%' }}
            >
              {CATEGORIES.map(cat => (
                <Option key={cat} value={cat}>{cat}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="平台">
            <Select
              mode="multiple"
              placeholder="选择平台"
              value={filters.platform}
              onChange={(value) => handleFilterChange('platform', value)}
              style={{ width: '100%' }}
            >
              {PLATFORMS.map(platform => (
                <Option key={platform} value={platform}>{platform}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="更新时间">
            <RangePicker
              value={filters.dateRange}
              onChange={(dates) => handleFilterChange('dateRange', dates)}
              style={{ width: '100%' }}
            />
          </Form.Item>
        </Form>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, borderTop: '1px solid #f0f0f0', background: '#fff' }}>
          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={handleResetFilters}>重置</Button>
            <Button type="primary" onClick={() => setFilterVisible(false)}>确定</Button>
          </Space>
        </div>
      </Drawer>

      <Drawer
        title="排序设置"
        placement="right"
        onClose={() => setSortDrawerVisible(false)}
        visible={sortDrawerVisible}
        width={300}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          {[
            { key: 'name', label: '商品名称' },
            { key: 'price', label: '售价' },
            { key: 'profit', label: '利润' },
            { key: 'roi', label: 'ROI' },
            { key: 'stock', label: '库存' },
            { key: 'updatedAt', label: '更新时间' },
          ].map(item => (
            <Card key={item.key} size="small" hoverable>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{item.label}</span>
                <Space>
                  <Button 
     
                    icon={<ArrowUpOutlined />}
                    type={sort.field === item.key && sort.order === 'ascend' ? 'primary' : 'default'}
                    onClick={() => handleSortChange(item.key, 'ascend')}
                  >
                    升序
                  </Button>
                  <Button 
     
                    icon={<ArrowDownOutlined />}
                    type={sort.field === item.key && sort.order === 'descend' ? 'primary' : 'default'}
                    onClick={() => handleSortChange(item.key, 'descend')}
                  >
                    降序
                  </Button>
                </Space>
              </div>
            </Card>
          ))}
        </Space>
      </Drawer>

      <Modal
        title="商品定价"
        visible={pricingModalVisible}
        onCancel={() => setPricingModalVisible(false)}
        footer={null}
        width={600}
      >
        {currentProduct && (
          <Form layout="vertical">
            <Form.Item label="商品">
              <Text strong>{currentProduct.name}</Text>
            </Form.Item>
            <Form.Item label="当前售价">
              <Text>${currentProduct.price.toFixed(2)}</Text>
            </Form.Item>
            <Form.Item label="新售价">
              <InputNumber
                min={0}
                precision={2}
                style={{ width: '100%' }}
                placeholder="输入新售价"
              />
            </Form.Item>
            <Form.Item label="成本">
              <InputNumber
                min={0}
                precision={2}
                style={{ width: '100%' }}
                defaultValue={currentProduct.costPrice}
              />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary">保存定价</Button>
                <Button onClick={() => setPricingModalVisible(false)}>取消</Button>
              </Space>
            </Form.Item>
          </Form>
        )}
      </Modal>
    </Card>
  );
};

export default ProductList;