import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Button, Form, Input, Select, message, Tabs, Table } from 'antd';
import { ArrowLeftOutlined, SaveOutlined, UserOutlined, PhoneOutlined, MailOutlined, HomeOutlined, DollarOutlined, ClockOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import { suppliersDataSource, Supplier, SupplierProduct } from '@/services/suppliersDataSource';

const { Option } = Select;
const { TabPane } = Tabs;

const SupplierDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [supplier, setSupplier] = useState<Supplier | null>(null);
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    fetchSupplierDetail();
  }, [id]);

  const fetchSupplierDetail = async () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      const mockSupplier: Supplier = {
        id: id || '1',
        name: 'Supplier A',
        contactName: 'John Doe',
        email: 'john@supplier-a.com',
        phone: '+1 (123) 456-7890',
        address: '123 Main St, New York, NY',
        category: 'Electronics',
        status: 'active',
        rating: 4.5,
        leadTime: 7,
        minOrder: 100,
        paymentTerms: 'Net 30',
        notes: 'Preferred supplier for electronics components',
      };

      const mockProducts: Product[] = [
        {
          id: '1',
          sku: 'COMP-001',
          name: 'Component 1',
          price: 10.99,
          stock: 1000,
          moq: 50,
          leadTime: 5,
        },
        {
          id: '2',
          sku: 'COMP-002',
          name: 'Component 2',
          price: 15.99,
          stock: 500,
          moq: 25,
          leadTime: 3,
        },
        {
          id: '3',
          sku: 'COMP-003',
          name: 'Component 3',
          price: 20.99,
          stock: 750,
          moq: 30,
          leadTime: 7,
        },
      ];

      setSupplier(mockSupplier);
      setProducts(mockProducts);
      form.setFieldsValue(mockSupplier);
      setLoading(false);
    }, 500);
  };

  const handleSubmit = async (values: any) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      message.success('供应商信息更新成功');
      setLoading(false);
      fetchSupplierDetail();
    }, 1000);
  };

  const handleBack = () => {
    navigate('/suppliers');
  };

  const productColumns = [
    {
      title: 'SKU',
      dataIndex: 'sku',
      key: 'sku',
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      render: (price: number) => `$${price.toFixed(2)}`,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
    },
    {
      title: '最小起订量',
      dataIndex: 'moq',
      key: 'moq',
    },
    {
      title: '交货期(天)',
      dataIndex: 'leadTime',
      key: 'leadTime',
    },
  ];

  if (!supplier) {
    return <div>Loading...</div>;
  }

  return (
    <div className="supplier-detail">
      <div className="page-header">
        <h1>供应商详情 - {supplier.name}</h1>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
        >
          返回列表
        </Button>
      </div>

      <Tabs defaultActiveKey="info">
        <TabPane tab="基本信息" key="info">
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
          >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  label="供应商名称"
                  rules={[{ required: true, message: '请输入供应商名称' }]}
                >
                  <Input placeholder="请输入供应商名称" />
                </Form.Item>

                <Form.Item
                  name="contactName"
                  label="联系人"
                  rules={[{ required: true, message: '请输入联系人' }]}
                >
                  <Input placeholder="请输入联系人" />
                </Form.Item>

                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[{ required: true, message: '请输入邮箱' }]}
                >
                  <Input placeholder="请输入邮箱" />
                </Form.Item>

                <Form.Item
                  name="phone"
                  label="电话"
                  rules={[{ required: true, message: '请输入电话' }]}
                >
                  <Input placeholder="请输入电话" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="address"
                  label="地址"
                  rules={[{ required: true, message: '请输入地址' }]}
                >
                  <Input.TextArea rows={4} placeholder="请输入地址" />
                </Form.Item>

                <Form.Item
                  name="category"
                  label="类别"
                  rules={[{ required: true, message: '请选择类别' }]}
                >
                  <Select placeholder="请选择类别">
                    <Option value="Electronics">Electronics</Option>
                    <Option value="Clothing">Clothing</Option>
                    <Option value="Home Goods">Home Goods</Option>
                  </Select>
                </Form.Item>

                <Form.Item
                  name="status"
                  label="状态"
                  rules={[{ required: true, message: '请选择状态' }]}
                >
                  <Select placeholder="请选择状态">
                    <Option value="active">活跃</Option>
                    <Option value="inactive">非活跃</Option>
                    <Option value="pending">待审核</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="leadTime"
                  label="交货期(天)"
                  rules={[{ required: true, message: '请输入交货期' }]}
                >
                  <Input type="number" placeholder="请输入交货期" />
                </Form.Item>

                <Form.Item
                  name="minOrder"
                  label="最小订单量"
                  rules={[{ required: true, message: '请输入最小订单量' }]}
                >
                  <Input type="number" placeholder="请输入最小订单量" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="paymentTerms"
                  label="付款条件"
                  rules={[{ required: true, message: '请输入付款条件' }]}
                >
                  <Input placeholder="请输入付款条件" />
                </Form.Item>

                <Form.Item
                  name="notes"
                  label="备注"
                >
                  <Input.TextArea rows={3} placeholder="请输入备注" />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
                保存
              </Button>
            </Form.Item>
          </Form>
        </TabPane>

        <TabPane tab="产品列表" key="products">
          <Card title="供应商产品">
            <Table
              columns={productColumns}
              dataSource={products}
              loading={loading}
              rowKey="id"
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
              }}
            />
          </Card>
        </TabPane>

        <TabPane tab="历史订单" key="orders">
          <Card title="历史订单">
            <div style={{ textAlign: 'center', padding: '50px 0' }}>
              <p>历史订单列表</p>
            </div>
          </Card>
        </TabPane>

        <TabPane tab="绩效评估" key="performance">
          <Card title="绩效评估">
            <div style={{ textAlign: 'center', padding: '50px 0' }}>
              <p>绩效评估图表</p>
            </div>
          </Card>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default SupplierDetail;