import React, { useState, useEffect } from 'react';
import { Table, Button, Input, Select, message, Card } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, PhoneOutlined, MailOutlined, HomeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { suppliersDataSource, Supplier } from '@/services/suppliersDataSource';

const { Option } = Select;
const { Search } = Input;

const Suppliers: React.FC = () => {
  const navigate = useNavigate();
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [loading, setLoading] = useState(false);
  const [filters, setFilters] = useState({
    category: '',
    status: '',
    search: '',
  });

  useEffect(() => {
    fetchSuppliers();
  }, [filters]);

  const fetchSuppliers = async () => {
    setLoading(true);
    try {
      const data = await suppliersDataSource.fetchSuppliers();
      setSuppliers(data);
    } catch (error) {
      message.error('Failed to load suppliers');
    } finally {
      setLoading(false);
    }
  };

  const handleAddSupplier = () => {
    message.info('添加供应商功能开发中');
  };

  const handleEditSupplier = (id: string) => {
    navigate(`/suppliers/${id}`);
  };

  const handleDeleteSupplier = (id: string) => {
    message.success('供应商已删除');
    fetchSuppliers();
  };

  const columns = [
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      key: 'contactName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap: Record<string, string> = {
          active: '活跃',
          inactive: '非活跃',
          pending: '待审核',
        };
        return statusMap[status] || status;
      },
    },
    {
      title: '评分',
      dataIndex: 'rating',
      key: 'rating',
    },
    {
      title: '交货期(天)',
      dataIndex: 'leadTime',
      key: 'leadTime',
    },
    {
      title: '最小订单量',
      dataIndex: 'minOrder',
      key: 'minOrder',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Supplier) => (
        <div>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEditSupplier(record.id)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDeleteSupplier(record.id)}
          >
            删除
          </Button>
        </div>
      ),
    },
  ];

  return (
    <div className="suppliers">
      <div className="page-header">
        <h1>供应商管理</h1>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={handleAddSupplier}
        >
          添加供应商
        </Button>
      </div>

      <div className="filter-section" style={{ marginBottom: 24, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <Search
          placeholder="搜索供应商名称或联系人"
          style={{ width: 300 }}
          onChange={(e) => setFilters({ ...filters, search: e.target.value })}
        />
        <Select
          placeholder="类别"
          style={{ width: 120 }}
          onChange={(value) => setFilters({ ...filters, category: value })}
        >
          <Option value="">全部</Option>
          <Option value="Electronics">Electronics</Option>
          <Option value="Clothing">Clothing</Option>
          <Option value="Home Goods">Home Goods</Option>
        </Select>
        <Select
          placeholder="状态"
          style={{ width: 120 }}
          onChange={(value) => setFilters({ ...filters, status: value })}
        >
          <Option value="">全部</Option>
          <Option value="active">活跃</Option>
          <Option value="inactive">非活跃</Option>
          <Option value="pending">待审核</Option>
        </Select>
        <Button
          icon={<SearchOutlined />}
          onClick={fetchSuppliers}
        >
          筛选
        </Button>
      </div>

      <Card title="供应商列表">
        <Table
          columns={columns}
          dataSource={suppliers}
          loading={loading}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
          }}
        />
      </Card>
    </div>
  );
};

export default Suppliers;