import {
  useState,
  useEffect,
  Card,
  Row,
  Col,
  Statistic,
  Button,
  Table,
  InboxOutlined,
  AlertOutlined,
  CheckCircleOutlined,
  DollarOutlined,
  useNavigate,
  inventoryDataSource,
  FC,
} from '@/imports';
import type { Inventory } from '@/types/inventory';
import { InventoryStatus } from '@/types/inventory';

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

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

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

  const columns = [
    {
      title: 'SKU',
      dataIndex: 'productId',
      key: 'productId',
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      key: 'productName',
    },
    {
      title: '库存数量',
      dataIndex: 'quantity',
      key: 'quantity',
      render: (stock: number, record: Inventory) => {
        let color = '#3f8600';
        if (record.status === InventoryStatus.LOW_STOCK) color = '#fa8c16';
        if (record.status === InventoryStatus.OUT_OF_STOCK) color = '#cf1322';
        return <span style={{ color }}>{stock}</span>;
      },
    },
    {
      title: '最低库存',
      dataIndex: 'threshold',
      key: 'threshold',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: InventoryStatus) => {
        const statusMap = {
          [InventoryStatus.IN_STOCK]: { text: '正常', icon: <CheckCircleOutlined style={{ color: '#3f8600' }} />, color: '#3f8600' },
          [InventoryStatus.LOW_STOCK]: { text: '库存不足', icon: <AlertOutlined style={{ color: '#fa8c16' }} />, color: '#fa8c16' },
          [InventoryStatus.OUT_OF_STOCK]: { text: '缺货', icon: <AlertOutlined style={{ color: '#cf1322' }} />, color: '#cf1322' },
        };
        const statusInfo = statusMap[status] || { 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 === InventoryStatus.LOW_STOCK).length;
  const outOfStockItems = inventory.filter(item => item.status === InventoryStatus.OUT_OF_STOCK).length;

  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={inventory.reduce((sum, item) => sum + item.quantity, 0)}
              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 InventoryPage;