import React from 'react';
import { Card, Row, Col, Statistic, Button, Table } from 'antd';
import { InboxOutlined, AlertOutlined, CheckCircleOutlined, DollarOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { inventoryDataSource, InventoryItem } from '@/services/inventoryDataSource';

const Inventory: React.FC = () => {
  const navigate = useNavigate();
  const [inventory, setInventory] = React.useState<InventoryItem[]>([]);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    fetchInventory();
  }, []);

  const fetchInventory = async () => {
    setLoading(true);
    try {
      const data = await inventoryDataSource.fetchInventory();
      setInventory(data);
    } catch (error) {
      // handle error
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: 'SKU',
      dataIndex: 'sku',
      key: 'sku',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '库存数量',
      dataIndex: 'stock',
      key: 'stock',
      render: (stock: number, record: InventoryItem) => {
        let color = '#3f8600';
        if (record.status === 'low') color = '#fa8c16';
        if (record.status === 'out') color = '#cf1322';
        return <span style={{ color }}>{stock}</span>;
      },
    },
    {
      title: '最低库存',
      dataIndex: 'minStock',
      key: 'minStock',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      render: (price: number) => `$${price.toFixed(2)}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          normal: { text: '正常', icon: <CheckCircleOutlined style={{ color: '#3f8600' }} />, color: '#3f8600' },
          low: { text: '库存不足', icon: <AlertOutlined style={{ color: '#fa8c16' }} />, color: '#fa8c16' },
          out: { text: '缺货', icon: <AlertOutlined style={{ color: '#cf1322' }} />, color: '#cf1322' },
        };
        const statusInfo = statusMap[status as keyof typeof statusMap] || { text: status, icon: null, color: '#000' };
        return (
          <span style={{ color: statusInfo.color }}>
            {statusInfo.icon} {statusInfo.text}
          </span>
        );
      },
    },
  ];

  const totalItems = inventory.length;
  const lowStockItems = inventory.filter(item => item.status === 'low').length;
  const outOfStockItems = inventory.filter(item => item.status === 'out').length;
  const totalValue = inventory.reduce((sum, item) => sum + item.stock * item.price, 0);

  return (
    <div className="inventory">
      <div className="page-header">
        <h1>库存管理</h1>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总商品数"
              value={totalItems}
              prefix={<InboxOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="库存不足"
              value={lowStockItems}
              prefix={<AlertOutlined style={{ color: '#fa8c16' }} />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="缺货商品"
              value={outOfStockItems}
              prefix={<AlertOutlined style={{ color: '#cf1322' }} />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="库存总值"
              value={totalValue}
              precision={2}
              prefix="$"
              suffix="USD"
              prefix={<DollarOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Card title="库存列表">
        <Table
          columns={columns}
          dataSource={inventory}
          loading={loading}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
          }}
        />
      </Card>

      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/inventory/warehouses')}>
            查看仓库管理
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/inventory/forecast')}>
            查看库存预测
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={fetchInventory}>
            刷新库存
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Inventory;