import {
  useState,
  useEffect,
  FC,
  Card,
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  Select,
  Tag,
  message,
  Row,
  Col,
  Statistic,
  Badge,
  Typography,
  Divider,
  Alert,
  Spin,
  PlusOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  SyncOutlined,
  ShopOutlined,
  LinkOutlined,
  ApiOutlined,
  ReloadOutlined,
  DeleteOutlined,
  Title,
  Text,
  Option,
} from '@/imports';
import type { ColumnsType } from 'antd/es/table';
import { platformAuthDataSource } from '@/services/platformAuthDataSource';
import { PlatformAccount, PlatformAccountStats, Platform } from '@/types/platform';

const PLATFORM_CONFIG: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  // TikTok系列
  TIKTOK: { color: 'cyan', text: 'TikTok', icon: <ShopOutlined /> },
  TIKTOK_FULL: { color: 'cyan', text: 'TikTok全托管', icon: <ShopOutlined /> },
  
  // Shopee系列
  SHOPEE: { color: 'red', text: 'Shopee', icon: <ShopOutlined /> },
  SHOPEE_FULL: { color: 'red', text: 'Shopee全托管', icon: <ShopOutlined /> },
  SHOPEE_LIGHT: { color: 'red', text: 'Shopee轻出海', icon: <ShopOutlined /> },
  
  // Lazada系列
  LAZADA: { color: 'purple', text: 'Lazada', icon: <ShopOutlined /> },
  LAZADA_FULL: { color: 'purple', text: 'Lazada全托管', icon: <ShopOutlined /> },
  
  // Temu
  TEMU_FULL: { color: 'green', text: 'Temu全托管', icon: <ShopOutlined /> },
  
  // SHEIN系列
  SHEIN: { color: 'pink', text: 'SHEIN', icon: <ShopOutlined /> },
  SHEIN_HALF: { color: 'pink', text: 'SHEIN半托管', icon: <ShopOutlined /> },
  
  // 其他平台
  OZON: { color: 'yellow', text: 'Ozon', icon: <ShopOutlined /> },
  YANDEX: { color: 'blue', text: 'Yandex', icon: <ShopOutlined /> },
  ALIEXPRESS: { color: 'orange', text: 'AliExpress', icon: <ShopOutlined /> },
  ALIEXPRESS_HALF: { color: 'orange', text: '速卖通半托管', icon: <ShopOutlined /> },
  ALIEXPRESS_POP: { color: 'orange', text: '速卖通本土POP', icon: <ShopOutlined /> },
  COUPANG: { color: 'red', text: 'Coupang', icon: <ShopOutlined /> },
  WALMART: { color: 'blue', text: 'Walmart', icon: <ShopOutlined /> },
  WILDBERRIES: { color: 'purple', text: 'Wildberries', icon: <ShopOutlined /> },
  ALLEGRO: { color: 'green', text: 'Allegro', icon: <ShopOutlined /> },
  MERCADO_LIBRE: { color: 'yellow', text: 'Mercado Libre', icon: <ShopOutlined /> },
  JUMIA: { color: 'blue', text: 'Jumia', icon: <ShopOutlined /> },
  JOOM: { color: 'purple', text: 'Joom', icon: <ShopOutlined /> },
  AMAZON: { color: 'orange', text: 'Amazon', icon: <ShopOutlined /> },
  WISH: { color: 'blue', text: 'Wish', icon: <ShopOutlined /> },
  EMAG: { color: 'green', text: 'eMAG', icon: <ShopOutlined /> },
  MIRAVIA: { color: 'pink', text: 'Miravia', icon: <ShopOutlined /> },
  DARAZ: { color: 'blue', text: 'Daraz', icon: <ShopOutlined /> },
  JOYBUY: { color: 'red', text: 'Joybuy', icon: <ShopOutlined /> },
  ALIBABA: { color: 'orange', text: 'Alibaba', icon: <ShopOutlined /> },
  QOO10: { color: 'red', text: 'Qoo10', icon: <ShopOutlined /> },
  SHOPIFY: { color: 'green', text: 'Shopify', icon: <ShopOutlined /> },
  SHOPLAZZA: { color: 'blue', text: 'Shoplazza', icon: <ShopOutlined /> },
  SHOPYY_V1: { color: 'purple', text: 'SHOPYY v1.0', icon: <ShopOutlined /> },
  SHOPYY_V2: { color: 'purple', text: 'SHOPYY v2.0', icon: <ShopOutlined /> },
  SHOPLINE: { color: 'green', text: 'SHOPLINE', icon: <ShopOutlined /> },
  GREATBOSS: { color: 'blue', text: 'GreatBoss', icon: <ShopOutlined /> },
  OTHER: { color: 'default', text: '其他', icon: <ShopOutlined /> },
  
  // 原有平台
  EBAY: { color: 'blue', text: 'eBay', icon: <ShopOutlined /> },
};

const STATUS_CONFIG: Record<string, { color: string; text: string }> = {
  active: { color: 'success', text: '已连接' },
  inactive: { color: 'default', text: '未连接' },
  expired: { color: 'warning', text: '已过期' },
  error: { color: 'error', text: '错误' },
};

const PlatformAuth: FC = () => {
  const [accounts, setAccounts] = useState<PlatformAccount[]>([]);
  const [stats, setStats] = useState<PlatformAccountStats>({ total: 0, active: 0, inactive: 0, expired: 0, error: 0 });
  const [loading, setLoading] = useState(true);
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();

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

  const loadData = async () => {
    setLoading(true);
    try {
      const [accountList, accountStats] = await Promise.all([
        platformAuthDataSource.list(),
        platformAuthDataSource.getStats(),
      ]);
      setAccounts(accountList);
      setStats(accountStats);
    } catch (error: any) {
      message.error(`加载失败: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handleConnect = async (values: { platform: Platform; appId: string; appSecret: string; config?: Record<string, any> }) => {
    try {
      const tenantId = localStorage.getItem('tenantId') || 'default';
      const result = await platformAuthDataSource.connect({
        platform: values.platform,
        accountName: values.appId,
        accountId: values.appId,
        config: {
          appId: values.appId,
          appSecret: values.appSecret,
          ...values.config,
        },
      });

      if (result.authUrl) {
        message.success('正在跳转到授权页面...');
        window.open(result.authUrl, '_blank');
      }

      setModalVisible(false);
      form.resetFields();
      loadData();
    } catch (error: any) {
      message.error(`连接失败: ${error.message}`);
    }
  };

  const handleDisconnect = async (id: string) => {
    Modal.confirm({
      title: '确认断开连接？',
      content: '断开后将无法同步该平台的数据',
      onOk: async () => {
        try {
          await platformAuthDataSource.disconnect(id);
          message.success('已断开连接');
          loadData();
        } catch (error: any) {
          message.error(`断开失败: ${error.message}`);
        }
      },
    });
  };

  const handleRefresh = async (id: string) => {
    try {
      message.loading({ content: '正在刷新授权...', key: 'refresh' });
      const result = await platformAuthDataSource.refresh(id);
      if (result.success) {
        message.success({ content: '授权已刷新', key: 'refresh' });
        loadData();
      } else {
        message.error({ content: result.message, key: 'refresh' });
      }
    } catch (error: any) {
      message.error({ content: `刷新失败: ${error.message}`, key: 'refresh' });
    }
  };

  const handleDelete = async (id: string) => {
    Modal.confirm({
      title: '确认删除？',
      content: '删除后需要重新授权才能使用该平台',
      okType: 'danger',
      onOk: async () => {
        try {
          await platformAuthDataSource.delete(id);
          message.success('已删除');
          loadData();
        } catch (error: any) {
          message.error(`删除失败: ${error.message}`);
        }
      },
    });
  };

  const columns: ColumnsType<PlatformAccount> = [
    {
      title: '平台',
      dataIndex: 'platform',
      key: 'platform',
      width: 150,
      render: (platform: string) => {
        const config = PLATFORM_CONFIG[platform] || { color: 'default', text: platform, icon: <ShopOutlined /> };
        return (
          <Space>
            {config.icon}
            <Tag color={config.color}>{config.text}</Tag>
          </Space>
        );
      },
    },
    {
      title: 'App ID',
      dataIndex: 'accountId',
      key: 'accountId',
      width: 200,
    },
    {
      title: '配置状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status: string) => {
        const config = STATUS_CONFIG[status] || { color: 'default', text: status };
        return <Badge status={config.color as any} text={config.text} />;
      },
    },

    {
      title: '最后同步',
      dataIndex: 'lastSyncAt',
      key: 'lastSyncAt',
      width: 180,
      render: (lastSyncAt?: string) => lastSyncAt ? new Date(lastSyncAt).toLocaleString() : '-',
    },
    {
      title: '授权过期',
      dataIndex: 'expiresAt',
      key: 'expiresAt',
      width: 180,
      render: (expiresAt?: string) => expiresAt ? new Date(expiresAt).toLocaleString() : '-',
    },
    {
      title: '操作',
      key: 'action',
      width: 220,
      render: (_, record) => (
        <Space>
          { record.status === 'active' && (
            <>
              <Button 
                type="link" 
                size="small" 
                icon={<ReloadOutlined />}
                onClick={() => handleRefresh(record.id)}
              >
                刷新
              </Button>
              <Button 
                type="link" 
                size="small" 
                danger
                onClick={() => handleDisconnect(record.id)}
              >
                断开
              </Button>
            </>
          )}
          {record.status === 'expired' && (
            <>
              <Button 
                type="link" 
                size="small" 
                icon={<SyncOutlined />}
                onClick={() => handleRefresh(record.id)}
              >
                重新授权
              </Button>
              <Button 
                type="link" 
                size="small" 
                danger
                icon={<DeleteOutlined />}
                onClick={() => handleDelete(record.id)}
              />
            </>
          )}
          {record.status === 'inactive' && (
            <Button 
              type="link" 
              size="small" 
              icon={<LinkOutlined />}
              onClick={() => {
                form.setFieldsValue({
                  platform: record.platform,
                  accountName: record.accountName,
                  accountId: record.accountId,
                });
                setModalVisible(true);
              }}
            >
              去授权
            </Button>
          )}
          {record.status === 'error' && (
            <>
              <Button 
                type="link" 
                size="small" 
                icon={<SyncOutlined />}
                onClick={() => handleRefresh(record.id)}
              >
                重试
              </Button>
              <Button 
                type="link" 
                size="small" 
                danger
                icon={<DeleteOutlined />}
                onClick={() => handleDelete(record.id)}
              />
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Title level={4}>平台开发者配置</Title>
      <Text type="secondary">管理各电商平台的开发者App ID和App Secret配置</Text>
      
      <Divider />
      
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic title="总平台数" value={stats.total} prefix={<ShopOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="已连接" 
              value={stats.active} 
              valueStyle={{ color: '#3f8600' }}
              prefix={<CheckCircleOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="已过期" 
              value={stats.expired} 
              valueStyle={{ color: '#faad14' }}
              prefix={<CloseCircleOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="错误" 
              value={stats.error} 
              valueStyle={{ color: '#cf1322' }}
              prefix={<SyncOutlined spin />}
            />
          </Card>
        </Col>
      </Row>

      {stats.expired > 0 && (
        <Alert
          message="部分平台授权已过期，请及时刷新授权以避免数据同步中断"
          type="warning"
          showIcon
          style={{ marginBottom: 16 }}
        />
      )}

      <Card>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
            添加平台配置
          </Button>
        </div>
        
        <Spin spinning={loading}>
          <Table 
            columns={columns} 
            dataSource={accounts} 
            rowKey="id"
            pagination={{ pageSize: 10 }}
          />
        </Spin>
      </Card>

      <Modal
        title="添加平台开发者配置"
        open={modalVisible}
        onCancel={() => {
          setModalVisible(false);
          form.resetFields();
        }}
        onOk={() => {
          form.validateFields().then(values => {
            handleConnect(values);
          });
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="platform" label="平台" rules={[{ required: true, message: '请选择平台' }]}>
            <Select placeholder="选择平台">
              {Object.entries(PLATFORM_CONFIG).map(([key, config]) => (
                <Option key={key} value={key}>
                  <Space>
                    {config.icon}
                    {config.text}
                  </Space>
                </Option>
              ))}
            </Select>
          </Form.Item>
          <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>
      </Modal>
    </div>
  );
};

export default PlatformAuth;