import React, { useState, useEffect } from 'react';
import { Button, Table, Form, Input, Select, Modal, message, Card, Tabs, Space, Tag, Divider, Alert } from 'antd';
import { PlusOutlined, SyncOutlined, EditOutlined, DeleteOutlined, CheckOutlined, CloseOutlined, LoadingOutlined } from '@ant-design/icons';
import { operationAgentService, Store, StoreBindingData } from '../services/operationAgentService';

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

const platforms = [
  { value: 'amazon', label: 'Amazon' },
  { value: 'shopee', label: 'Shopee' },
  { value: 'aliexpress', label: 'AliExpress' },
  { value: 'tiktok', label: 'TikTok' },
  { value: 'ebay', label: 'Ebay' },
  { value: 'lazada', label: 'Lazada' },
  { value: 'wish', label: 'Wish' },
  { value: 'shein', label: 'Shein' },
  { value: 'jd_worldwide', label: 'JD Worldwide' },
  { value: 'walmart', label: 'Walmart' },
  { value: 'etsy', label: 'Etsy' },
  { value: 'target', label: 'Target' },
  { value: 'newegg', label: 'Newegg' },
  { value: 'cdiscount', label: 'Cdiscount' },
  { value: 'allegro', label: 'Allegro' },
  { value: 'otto', label: 'Otto' },
  { value: 'rakuten', label: 'Rakuten' },
  { value: 'qoo10', label: 'Qoo10' },
];

const statusMap = {
  active: { color: 'green', text: '活跃' },
  inactive: { color: 'red', text: '停用' },
  pending: { color: 'orange', text: '待处理' },
  suspended: { color: 'gray', text: '暂停' },
};

const OperationAgent: React.FC = () => {
  const [stores, setStores] = useState<Store[]>([]);
  const [loading, setLoading] = useState(false);
  const [bindingModalVisible, setBindingModalVisible] = useState(false);
  const [currentStore, setCurrentStore] = useState<Store | null>(null);
  const [merchantId, setMerchantId] = useState('merchant-1'); // 默认商户ID
  const [form] = Form.useForm();

  // 加载店铺列表
  const loadStores = async () => {
    setLoading(true);
    try {
      const data = await operationAgentService.getStores(merchantId);
      setStores(data);
    } catch (error) {
      message.error('加载店铺失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 初始加载
  useEffect(() => {
    loadStores();
  }, [merchantId]);

  // 绑定店铺
  const handleBindStore = async (values: any) => {
    setLoading(true);
    try {
      const bindingData: StoreBindingData = {
        merchantId: values.merchantId,
        platform: values.platform,
        platformShopId: values.platformShopId,
        name: values.name,
        description: values.description,
        authInfo: {
          ...(values.platform === 'amazon' && {
            accessKey: values.accessKey,
            secretKey: values.secretKey,
            sellerId: values.sellerId,
            marketplaceId: values.marketplaceId,
          }),
          ...(values.platform === 'shopee' && {
            partnerId: values.partnerId,
            partnerKey: values.partnerKey,
            shopId: values.shopId,
          }),
          ...(values.platform === 'aliexpress' && {
            appKey: values.appKey,
            appSecret: values.appSecret,
            accessToken: values.accessToken,
          }),
          ...(values.platform === 'tiktok' && {
            appId: values.appId,
            appSecret: values.appSecret,
            accessToken: values.accessToken,
          }),
          ...(values.platform === 'ebay' && {
            clientId: values.clientId,
            clientSecret: values.clientSecret,
            refreshToken: values.refreshToken,
          }),
          ...(values.platform && !['amazon', 'shopee', 'aliexpress', 'tiktok', 'ebay'].includes(values.platform) && {
            apiKey: values.apiKey,
            apiSecret: values.apiSecret,
          }),
        },
      };

      await operationAgentService.bindStore(bindingData);
      message.success('店铺绑定成功');
      setBindingModalVisible(false);
      form.resetFields();
      loadStores();
    } catch (error) {
      message.error('店铺绑定失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 同步商品
  const handleSyncProducts = async (storeId: string) => {
    setLoading(true);
    try {
      const result = await operationAgentService.syncProducts(storeId);
      if (result.success) {
        message.success(`商品同步成功，共 ${result.count} 个商品`);
      } else {
        message.error('商品同步失败');
      }
    } catch (error) {
      message.error('商品同步失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 同步订单
  const handleSyncOrders = async (storeId: string) => {
    setLoading(true);
    try {
      const result = await operationAgentService.syncOrders(storeId);
      if (result.success) {
        message.success(`订单同步成功，共 ${result.count} 个订单`);
      } else {
        message.error('订单同步失败');
      }
    } catch (error) {
      message.error('订单同步失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 停用店铺
  const handleDeactivateStore = async (storeId: string) => {
    setLoading(true);
    try {
      await operationAgentService.deactivateStore(storeId);
      message.success('店铺已停用');
      loadStores();
    } catch (error) {
      message.error('停用店铺失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 重新激活店铺
  const handleReactivateStore = async (storeId: string) => {
    setLoading(true);
    try {
      await operationAgentService.reactivateStore(storeId);
      message.success('店铺已重新激活');
      loadStores();
    } catch (error) {
      message.error('激活店铺失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 查看店铺详情
  const handleViewStore = async (storeId: string) => {
    setLoading(true);
    try {
      const store = await operationAgentService.getStore(storeId);
      setCurrentStore(store);
    } catch (error) {
      message.error('获取店铺详情失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 渲染平台特定的授权信息表单
  const renderAuthInfoForm = (platform: string) => {
    switch (platform) {
      case 'amazon':
        return (
          <>
            <Form.Item name="accessKey" label="Access Key" rules={[{ required: true, message: '请输入Access Key' }]}>
              <Input placeholder="请输入Access Key" />
            </Form.Item>
            <Form.Item name="secretKey" label="Secret Key" rules={[{ required: true, message: '请输入Secret Key' }]}>
              <Input.Password placeholder="请输入Secret Key" />
            </Form.Item>
            <Form.Item name="sellerId" label="Seller ID" rules={[{ required: true, message: '请输入Seller ID' }]}>
              <Input placeholder="请输入Seller ID" />
            </Form.Item>
            <Form.Item name="marketplaceId" label="Marketplace ID" rules={[{ required: true, message: '请输入Marketplace ID' }]}>
              <Input placeholder="请输入Marketplace ID" />
            </Form.Item>
          </>
        );
      case 'shopee':
        return (
          <>
            <Form.Item name="partnerId" label="Partner ID" rules={[{ required: true, message: '请输入Partner ID' }]}>
              <Input placeholder="请输入Partner ID" />
            </Form.Item>
            <Form.Item name="partnerKey" label="Partner Key" rules={[{ required: true, message: '请输入Partner Key' }]}>
              <Input.Password placeholder="请输入Partner Key" />
            </Form.Item>
            <Form.Item name="shopId" label="Shop ID" rules={[{ required: true, message: '请输入Shop ID' }]}>
              <Input placeholder="请输入Shop ID" />
            </Form.Item>
          </>
        );
      case 'aliexpress':
        return (
          <>
            <Form.Item name="appKey" label="App Key" rules={[{ required: true, message: '请输入App Key' }]}>
              <Input placeholder="请输入App Key" />
            </Form.Item>
            <Form.Item name="appSecret" label="App Secret" rules={[{ required: true, message: '请输入App Secret' }]}>
              <Input.Password placeholder="请输入App Secret" />
            </Form.Item>
            <Form.Item name="accessToken" label="Access Token" rules={[{ required: true, message: '请输入Access Token' }]}>
              <Input placeholder="请输入Access Token" />
            </Form.Item>
          </>
        );
      case 'tiktok':
        return (
          <>
            <Form.Item name="appId" label="App ID" rules={[{ required: true, message: '请输入App ID' }]}>
              <Input placeholder="请输入App ID" />
            </Form.Item>
            <Form.Item name="appSecret" label="App Secret" rules={[{ required: true, message: '请输入App Secret' }]}>
              <Input.Password placeholder="请输入App Secret" />
            </Form.Item>
            <Form.Item name="accessToken" label="Access Token" rules={[{ required: true, message: '请输入Access Token' }]}>
              <Input placeholder="请输入Access Token" />
            </Form.Item>
          </>
        );
      case 'ebay':
        return (
          <>
            <Form.Item name="clientId" label="Client ID" rules={[{ required: true, message: '请输入Client ID' }]}>
              <Input placeholder="请输入Client ID" />
            </Form.Item>
            <Form.Item name="clientSecret" label="Client Secret" rules={[{ required: true, message: '请输入Client Secret' }]}>
              <Input.Password placeholder="请输入Client Secret" />
            </Form.Item>
            <Form.Item name="refreshToken" label="Refresh Token" rules={[{ required: true, message: '请输入Refresh Token' }]}>
              <Input placeholder="请输入Refresh Token" />
            </Form.Item>
          </>
        );
      default:
        return (
          <>
            <Form.Item name="apiKey" label="API Key" rules={[{ required: true, message: '请输入API Key' }]}>
              <Input placeholder="请输入API Key" />
            </Form.Item>
            <Form.Item name="apiSecret" label="API Secret" rules={[{ required: true, message: '请输入API Secret' }]}>
              <Input.Password placeholder="请输入API Secret" />
            </Form.Item>
          </>
        );
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <Card title="Operation-Agent 管理" extra={<Button type="primary" icon={<PlusOutlined />} onClick={() => setBindingModalVisible(true)}>绑定店铺</Button>}>
        <Alert
          message="操作说明"
          description="本页面用于管理Operation-Agent平台集成，包括店铺绑定、商品/订单同步等功能。"
          type="info"
          style={{ marginBottom: '20px' }}
        />

        <Form layout="inline" onFinish={(values) => setMerchantId(values.merchantId)} style={{ marginBottom: '20px' }}>
          <Form.Item name="merchantId" initialValue={merchantId} label="商户ID">
            <Input placeholder="请输入商户ID" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>

        <Table
          loading={loading}
          dataSource={stores}
          rowKey="id"
          columns={[
            {
              title: '店铺名称',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '平台',
              dataIndex: 'platform',
              key: 'platform',
              render: (platform: string) => {
                const platformInfo = platforms.find(p => p.value === platform);
                return platformInfo ? platformInfo.label : platform;
              },
            },
            {
              title: '平台店铺ID',
              dataIndex: 'platformShopId',
              key: 'platformShopId',
            },
            {
              title: '状态',
              dataIndex: 'status',
              key: 'status',
              render: (status: string) => {
                const statusInfo = statusMap[status as keyof typeof statusMap];
                return statusInfo ? (
                  <Tag color={statusInfo.color}>{statusInfo.text}</Tag>
                ) : (
                  <Tag color="default">{status}</Tag>
                );
              },
            },
            {
              title: '创建时间',
              dataIndex: 'created_at',
              key: 'created_at',
            },
            {
              title: '操作',
              key: 'action',
              render: (_: any, record: Store) => (
                <Space size="middle">
                  <Button icon={<SyncOutlined />} onClick={() => handleSyncProducts(record.id)}>同步商品</Button>
                  <Button icon={<SyncOutlined />} onClick={() => handleSyncOrders(record.id)}>同步订单</Button>
                  {record.status === 'active' ? (
                    <Button danger icon={<CloseOutlined />} onClick={() => handleDeactivateStore(record.id)}>停用</Button>
                  ) : (
                    <Button type="primary" icon={<CheckOutlined />} onClick={() => handleReactivateStore(record.id)}>激活</Button>
                  )}
                </Space>
              ),
            },
          ]}
        />
      </Card>

      {/* 绑定店铺模态框 */}
      <Modal
        title="绑定店铺"
        visible={bindingModalVisible}
        onCancel={() => setBindingModalVisible(false)}
        footer={null}
      >
        <Form form={form} layout="vertical" onFinish={handleBindStore}>
          <Form.Item name="merchantId" label="商户ID" rules={[{ required: true, message: '请输入商户ID' }]} initialValue={merchantId}>
            <Input placeholder="请输入商户ID" />
          </Form.Item>
          <Form.Item name="platform" label="平台" rules={[{ required: true, message: '请选择平台' }]}>
            <Select placeholder="请选择平台" onChange={() => form.resetFields(['accessKey', 'secretKey', 'sellerId', 'marketplaceId', 'partnerId', 'partnerKey', 'shopId', 'appKey', 'appSecret', 'accessToken', 'appId', 'clientId', 'clientSecret', 'refreshToken', 'apiKey', 'apiSecret'])}>
              {platforms.map(platform => (
                <Option key={platform.value} value={platform.value}>{platform.label}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="platformShopId" label="平台店铺ID" rules={[{ required: true, message: '请输入平台店铺ID' }]}>
            <Input placeholder="请输入平台店铺ID" />
          </Form.Item>
          <Form.Item name="name" label="店铺名称" rules={[{ required: true, message: '请输入店铺名称' }]}>
            <Input placeholder="请输入店铺名称" />
          </Form.Item>
          <Form.Item name="description" label="店铺描述">
            <TextArea placeholder="请输入店铺描述" rows={3} />
          </Form.Item>
          <Divider orientation="left">授权信息</Divider>
          <Form.Item name="platform" noStyle shouldUpdate>
            {({ getFieldValue }) => {
              const platform = getFieldValue('platform');
              return platform ? renderAuthInfoForm(platform) : null;
            }}
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setBindingModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={loading}>
                绑定
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 店铺详情模态框 */}
      {currentStore && (
        <Modal
          title="店铺详情"
          visible={!!currentStore}
          onCancel={() => setCurrentStore(null)}
          footer={null}
        >
          <Card>
            <Card.Meta title={currentStore.name} description={`平台: ${platforms.find(p => p.value === currentStore.platform)?.label || currentStore.platform}`} />
            <Divider />
            <p><strong>商户ID:</strong> {currentStore.merchantId}</p>
            <p><strong>平台店铺ID:</strong> {currentStore.platformShopId}</p>
            <p><strong>状态:</strong> <Tag color={statusMap[currentStore.status as keyof typeof statusMap]?.color || 'default'}>{statusMap[currentStore.status as keyof typeof statusMap]?.text || currentStore.status}</Tag></p>
            <p><strong>描述:</strong> {currentStore.description || '无'}</p>
            <p><strong>创建时间:</strong> {currentStore.created_at}</p>
            <p><strong>更新时间:</strong> {currentStore.updated_at}</p>
            <Divider />
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setCurrentStore(null)}>关闭</Button>
            </Space>
          </Card>
        </Modal>
      )}
    </div>
  );
};

export default OperationAgent;
