import { showBatchOperationResult } from '@/utils/showResult';
import {
  productcontrollerBatchsynctosite,
  productcontrollerGetproductlist,
  productcontrollerSynctosite,
} from '@/servers/api/product';
import { EditOutlined, SyncOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import {
  Button,
  Card,
  message,
  Modal,
  Progress,
  Select,
  Spin,
  Tag,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import EditForm from '../List/EditForm';
import SiteProductCell from './SiteProductCell';

// 定义站点接口
interface Site {
  id: number;
  name: string;
  skuPrefix?: string;
  isDisabled?: boolean;
}

// 定义本地产品接口(与后端 Product 实体匹配)
interface SiteProduct {
  id: number;
  sku: string;
  name: string;
  nameCn: string;
  shortDescription?: string;
  description?: string;
  price: number;
  promotionPrice: number;
  type: string;
  categoryId?: number;
  category?: any;
  attributes?: any[];
  components?: any[];
  siteSkus: string[];
  source: number;
  createdAt: Date;
  updatedAt: Date;
}

// 定义API响应接口
interface ApiResponse<T> {
  data: T[];
  success: boolean;
  message?: string;
}

// 模拟API请求函数
const getSites = async (): Promise<ApiResponse<Site>> => {
  const res = await request('/site/list', {
    method: 'GET',
    params: {
      current: 1,
      pageSize: 1000,
    },
  });
  return {
    data: res.data?.items || [],
    success: res.success,
    message: res.message,
  };
};

const ProductSyncPage: React.FC = () => {
  const [sites, setSites] = useState<Site[]>([]);

  const [initialLoading, setInitialLoading] = useState(true);
  const actionRef = useRef<ActionType>();
  const [selectedSiteId, setSelectedSiteId] = useState<string>('');
  const [batchSyncModalVisible, setBatchSyncModalVisible] = useState(false);
  const [syncProgress, setSyncProgress] = useState(0);
  const [syncing, setSyncing] = useState(false);
  const [syncResults, setSyncResults] = useState<{
    success: number;
    failed: number;
    errors: string[];
  }>({ success: 0, failed: 0, errors: [] });
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [selectedRows, setSelectedRows] = useState<SiteProduct[]>([]);
  // 初始化加载站点列表
  useEffect(() => {
    const initializeData = async () => {
      try {
        // 获取站点列表
        const sitesRes = await getSites();
        if (sitesRes.success && sitesRes.data.length > 0) {
          setSites(sitesRes.data);
        }
      } catch (error) {
        console.error('初始化数据失败:', error);
        message.error('初始化数据失败');
      } finally {
        setInitialLoading(false);
      }
    };

    initializeData();
  }, []);

  const syncProductToSite = async (
    values: any,
    record: SiteProduct,
    site: Site,
    siteProductId?: string,
  ) => {
    try {
      const hide = message.loading('正在同步...', 0);

      // 使用 productcontrollerSynctosite API 同步产品到站点
      const res = await productcontrollerSynctosite({
        productId: Number(record.id),
        siteId: Number(site.id),
      } as any);

      if (!res.success) {
        hide();
        throw new Error(res.message || '同步失败');
      }

      hide();
      message.success('同步成功');
      return true;
    } catch (error: any) {
      message.error('同步失败: ' + (error.message || error.toString()));
      return false;
    }
  };

  // 批量同步产品到指定站点
  const batchSyncProducts = async (productsToSync?: SiteProduct[]) => {
    if (!selectedSiteId) {
      message.error('请选择要同步到的站点');
      return;
    }

    const targetSite = sites.find((site) => site.id === selectedSiteId);
    if (!targetSite) {
      message.error('选择的站点不存在');
      return;
    }

    // 如果没有传入产品列表，则使用选中的产品
    let products = productsToSync || selectedRows;

    // 如果既没有传入产品也没有选中产品，则同步所有产品
    if (!products || products.length === 0) {
      try {
        const { data, success } = await productcontrollerGetproductlist({
          current: 1,
          pageSize: 10000, // 获取所有产品
        } as any);

        if (!success || !data?.items) {
          message.error('获取产品列表失败');
          return;
        }
        products = data.items as SiteProduct[];
      } catch (error) {
        message.error('获取产品列表失败');
        return;
      }
    }

    setSyncing(true);
    setSyncProgress(0);
    setSyncResults({ success: 0, failed: 0, errors: [] });

    try {
      // 使用 productcontrollerBatchsynctosite API 批量同步
      const productIds = products.map((product) => Number(product.id));

      // 更新进度为50%，表示正在处理
      setSyncProgress(50);

      const res = await productcontrollerBatchsynctosite({
        productIds: productIds,
        siteId: Number(targetSite.id),
      } as any);

      if (res.success) {
        const syncedCount = res.data?.synced || 0;
        const errors = res.data?.errors || [];

        // 更新进度为100%，表示完成
        setSyncProgress(100);

        setSyncResults({
          success: syncedCount,
          failed: errors.length,
          errors: errors.map((err: any) => err.error || '未知错误'),
        });

        if (errors.length === 0) {
          message.success(`批量同步完成，成功同步 ${syncedCount} 个产品`);
        } else {
          message.warning(
            `批量同步完成，成功 ${syncedCount} 个，失败 ${errors.length} 个`,
          );
        }

        // 刷新表格
        actionRef.current?.reload();
      } else {
        throw new Error(res.message || '批量同步失败');
      }
    } catch (error: any) {
      message.error('批量同步失败: ' + (error.message || error.toString()));
    } finally {
      setSyncing(false);
    }
  };

  // 生成表格列配置
  const generateColumns = (): ProColumns<Site>[] => {
    const columns: ProColumns<SiteProduct>[] = [
      {
        title: 'SKU',
        dataIndex: 'sku',
        key: 'sku',
        width: 150,
        fixed: 'left',
        copyable: true,
      },
      {
        title: '商品信息',
        key: 'profile',
        width: 300,
        fixed: 'left',
        render: (_, record) => (
          <div>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 4,
              }}
            >
              <div style={{ fontWeight: 'bold', fontSize: 14 }}>
                {record.name}
              </div>
              <EditForm
                record={record}
                tableRef={actionRef}
                trigger={
                  <EditOutlined
                    style={{
                      cursor: 'pointer',
                      fontSize: 16,
                      color: '#1890ff',
                    }}
                  />
                }
              />
            </div>
            <div style={{ fontSize: 12, color: '#666' }}>
              <span style={{ marginRight: 8 }}>价格: {record.price}</span>
              {record.promotionPrice && (
                <span style={{ color: 'red' }}>
                  促销价: {record.promotionPrice}
                </span>
              )}
            </div>

            {/* 属性 */}
            <div style={{ marginTop: 4 }}>
              {record.attributes?.map((attr: any, idx: number) => (
                <Tag
                  key={idx}
                  style={{ fontSize: 10, marginRight: 4, marginBottom: 2 }}
                >
                  {attr.dict?.name || attr.name}: {attr.name}
                </Tag>
              ))}
            </div>

            {/* 组成 (如果是 Bundle) */}
            {record.type === 'bundle' &&
              record.components &&
              record.components.length > 0 && (
                <div
                  style={{
                    marginTop: 8,
                    fontSize: 12,
                    background: '#f5f5f5',
                    padding: 4,
                    borderRadius: 4,
                  }}
                >
                  <div style={{ fontWeight: 'bold', marginBottom: 2 }}>
                    Components:
                  </div>
                  {record.components.map((comp: any, idx: number) => (
                    <div key={idx}>
                      {comp.sku} × {comp.quantity}
                    </div>
                  ))}
                </div>
              )}
          </div>
        ),
      },
    ];

    // 为每个站点生成列
    sites.forEach((site: Site) => {
      const siteColumn: ProColumns<SiteProduct> = {
        title: site.name,
        key: `site_${site.id}`,
        hideInSearch: true,
        width: 220,
        render: (_, record) => {
          return (
            <SiteProductCell
              product={record}
              site={site}
              onSyncSuccess={() => {
                // 同步成功后刷新表格
                actionRef.current?.reload();
              }}
            />
          );
        },
      };
      columns.push(siteColumn);
    });

    return columns;
  };

  if (initialLoading) {
    return (
      <Card title="商品同步状态" className="product-sync-card">
        <Spin
          size="large"
          style={{ display: 'flex', justifyContent: 'center', padding: 40 }}
        />
      </Card>
    );
  }

  return (
    <Card title="商品同步状态" className="product-sync-card">
      <ProTable<SiteProduct>
        columns={generateColumns()}
        actionRef={actionRef}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: (keys, rows) => {
            setSelectedRowKeys(keys);
            setSelectedRows(rows);
          },
        }}
        toolBarRender={() => [
          <Select
            key="site-select"
            style={{ width: 200 }}
            placeholder="选择目标站点"
            value={selectedSiteId}
            onChange={setSelectedSiteId}
            options={sites.map((site) => ({
              label: site.name,
              value: site.id,
            }))}
          />,
          <Button
            key="batch-sync"
            type="primary"
            icon={<SyncOutlined />}
            onClick={() => {
              if (!selectedSiteId) {
                message.warning('请先选择目标站点');
                return;
              }
              setBatchSyncModalVisible(true);
            }}
            disabled={!selectedSiteId || sites.length === 0}
          >
            批量同步
          </Button>,
        ]}
        request={async (params, sort, filter) => {
          // 调用本地获取产品列表 API
          const response = await productcontrollerGetproductlist({
            ...params,
            current: params.current,
            pageSize: params.pageSize,
            // 传递搜索参数
            // keyword: params.keyword, // 假设 ProTable 的 search 表单会传递 keyword 或其他字段
            sku: (params as any).sku,
            name: (params as any).name,
          } as any);
          console.log('result', response);
          // 返回给 ProTable
          return {
            data: response.data?.items || [],
            success: response.success,
            total: response.data?.total || 0,
          };
        }}
        pagination={{
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
        }}
        scroll={{ x: 'max-content' }}
        search={{
          labelWidth: 'auto',
        }}
        options={{
          density: true,
          fullScreen: true,
        }}
        dateFormatter="string"
      />

      {/* 批量同步模态框 */}
      <Modal
        title="批量同步产品"
        open={batchSyncModalVisible}
        onCancel={() => !syncing && setBatchSyncModalVisible(false)}
        footer={null}
        closable={!syncing}
        maskClosable={!syncing}
      >
        <div style={{ marginBottom: 16 }}>
          <p>
            目标站点:
            <strong>{sites.find((s) => s.id === selectedSiteId)?.name}</strong>
          </p>
          {selectedRows.length > 0 ? (
            <p>
              已选择 <strong>{selectedRows.length}</strong> 个产品进行同步
            </p>
          ) : (
            <p>此操作将同步所有库存产品到指定站点，请确认是否继续？</p>
          )}
        </div>

        {syncing && (
          <div style={{ marginBottom: 16 }}>
            <div style={{ marginBottom: 8 }}>同步进度:</div>
            <Progress percent={syncProgress} status="active" />
            <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>
              成功:{syncResults.success} | 失败:{syncResults.failed}
            </div>
          </div>
        )}

        {syncResults.errors.length > 0 && (
          <div style={{ marginBottom: 16, maxHeight: 200, overflow: 'auto' }}>
            <div style={{ marginBottom: 8, color: '#ff4d4f' }}>错误详情:</div>
            {syncResults.errors.slice(0, 10).map((error, index) => (
              <div
                key={index}
                style={{ fontSize: 12, color: '#666', marginBottom: 4 }}
              >
                {error}
              </div>
            ))}
            {syncResults.errors.length > 10 && (
              <div style={{ fontSize: 12, color: '#999' }}>
                ...还有 {syncResults.errors.length - 10} 个错误
              </div>
            )}
          </div>
        )}

        <div style={{ textAlign: 'right' }}>
          <Button
            onClick={() => setBatchSyncModalVisible(false)}
            disabled={syncing}
            style={{ marginRight: 8 }}
          >
            取消
          </Button>
          <Button
            type="primary"
            onClick={() => batchSyncProducts()}
            loading={syncing}
            disabled={syncing}
          >
            {syncing ? '同步中...' : '开始同步'}
          </Button>
        </div>
      </Modal>
    </Card>
  );
};

export default ProductSyncPage;