import {
  productcontrollerBatchdeleteproduct,
  productcontrollerBatchupdateproduct,
  productcontrollerBindproductsiteskus,
  productcontrollerDeleteproduct,
  productcontrollerGetcategoriesall,
  productcontrollerGetproductcomponents,
  productcontrollerGetproductlist,
  productcontrollerUpdatenamecn,
} from '@/servers/api/product';
import { sitecontrollerAll } from '@/servers/api/site';
import { siteapicontrollerGetproducts } from '@/servers/api/siteApi';
import {
  wpproductcontrollerBatchsynctosite,
  wpproductcontrollerSynctoproduct,
} from '@/servers/api/wpProduct';
import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProFormSelect,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { App, Button, Modal, Popconfirm, Tag, Upload } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import CreateForm from './CreateForm';
import EditForm from './EditForm';

const NameCn: React.FC<{
  id: number;
  value: string | undefined;
  tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ value, tableRef, id }) => {
  const { message } = App.useApp();
  const [editable, setEditable] = React.useState<boolean>(false);
  if (!editable)
    return <div onClick={() => setEditable(true)}>{value || '-'}</div>;
  return (
    <ProFormText
      initialValue={value}
      fieldProps={{
        autoFocus: true,
        onBlur: async (e: React.FocusEvent<HTMLInputElement>) => {
          if (!e.target.value) return setEditable(false);
          const { success, message: errMsg } =
            await productcontrollerUpdatenamecn({
              id,
              nameCn: e.target.value,
            });
          setEditable(false);
          if (!success) {
            return message.error(errMsg);
          }
          tableRef?.current?.reloadAndRest?.();
        },
      }}
    />
  );
};

const AttributesCell: React.FC<{ record: any }> = ({ record }) => {
  return (
    <div>
      {(record.attributes || []).map((data: any, idx: number) => (
        <Tag key={idx} color="purple" style={{ marginBottom: 4 }}>
          {data?.dict?.name}: {data.name}
        </Tag>
      ))}
    </div>
  );
};

const ComponentsCell: React.FC<{ productId: number }> = ({ productId }) => {
  const [components, setComponents] = React.useState<any[]>([]);
  React.useEffect(() => {
    (async () => {
      const { data = [] } = await productcontrollerGetproductcomponents({
        id: productId,
      });
      setComponents(data || []);
    })();
  }, [productId]);
  return (
    <div>
      {components && components.length ? (
        components.map((component: any) => (
          <Tag key={component.id} color="blue" style={{ marginBottom: 4 }}>
            {component.sku || `#${component.id}`} × {component.quantity}
            (库存:
            {component.stock
              ?.map((s: any) => `${s.name}:${s.quantity}`)
              .join(', ') || '-'}
            )
          </Tag>
        ))
      ) : (
        <span>-</span>
      )}
    </div>
  );
};

const BatchEditModal: React.FC<{
  visible: boolean;
  onClose: () => void;
  selectedRows: API.Product[];
  tableRef: React.MutableRefObject<ActionType | undefined>;
  onSuccess: () => void;
}> = ({ visible, onClose, selectedRows, tableRef, onSuccess }) => {
  const { message } = App.useApp();
  const [categories, setCategories] = useState<any[]>([]);

  useEffect(() => {
    if (visible) {
      productcontrollerGetcategoriesall().then((res: any) => {
        setCategories(res?.data || []);
      });
    }
  }, [visible]);

  return (
    <ModalForm
      title={`批量修改 (${selectedRows.length} 项)`}
      open={visible}
      onOpenChange={(open) => !open && onClose()}
      modalProps={{ destroyOnClose: true }}
      onFinish={async (values) => {
        const ids = selectedRows.map((row) => row.id);
        const updateData: any = { ids };
        // 只有当用户输入了值才进行更新
        if (values.price) updateData.price = Number(values.price);
        if (values.promotionPrice)
          updateData.promotionPrice = Number(values.promotionPrice);
        if (values.categoryId) updateData.categoryId = values.categoryId;

        if (Object.keys(updateData).length <= 1) {
          message.warning('未修改任何属性');
          return false;
        }

        const { success, message: errMsg } =
          await productcontrollerBatchupdateproduct(updateData);
        if (success) {
          message.success('批量修改成功');
          onSuccess();
          tableRef.current?.reload();
          return true;
        } else {
          message.error(errMsg);
          return false;
        }
      }}
    >
      <ProFormText name="price" label="价格" placeholder="不修改请留空" />
      <ProFormText
        name="promotionPrice"
        label="促销价格"
        placeholder="不修改请留空"
      />
      <ProFormSelect
        name="categoryId"
        label="分类"
        options={categories.map((c) => ({ label: c.title, value: c.id }))}
        placeholder="不修改请留空"
      />
    </ModalForm>
  );
};

const SyncToSiteModal: React.FC<{
  visible: boolean;
  onClose: () => void;
  productIds: number[];
  productRows: API.Product[];
  onSuccess: () => void;
}> = ({ visible, onClose, productIds, productRows, onSuccess }) => {
  const { message } = App.useApp();
  const [sites, setSites] = useState<any[]>([]);
  const formRef = useRef<any>();

  useEffect(() => {
    if (visible) {
      sitecontrollerAll().then((res: any) => {
        setSites(res?.data || []);
      });
    }
  }, [visible]);

  return (
    <ModalForm
      title={`同步到站点 (${productIds.length} 项)`}
      open={visible}
      onOpenChange={(open) => !open && onClose()}
      modalProps={{ destroyOnClose: true }}
      formRef={formRef}
      onValuesChange={(changedValues) => {
        if ('siteId' in changedValues && changedValues.siteId) {
          const siteId = changedValues.siteId;
          const site = sites.find((s: any) => s.id === siteId) || {};
          const prefix = site.skuPrefix || '';
          const map: Record<string, any> = {};
          productRows.forEach((p) => {
            map[p.id] = {
              code: `${prefix}${p.sku || ''}`,
              quantity: undefined,
            };
          });
          formRef.current?.setFieldsValue({ productSiteSkus: map });
        }
      }}
      onFinish={async (values) => {
        if (!values.siteId) return false;
        try {
          await wpproductcontrollerBatchsynctosite(
            { siteId: values.siteId },
            { productIds },
          );
          const map = values.productSiteSkus || {};
          for (const currentProductId of productIds) {
            const entry = map?.[currentProductId];
            if (entry && entry.code) {
              await productcontrollerBindproductsiteskus(
                { id: currentProductId },
                {
                  siteSkus: [
                    {
                      siteId: values.siteId,
                      code: entry.code,
                      quantity: entry.quantity,
                    },
                  ],
                },
              );
            }
          }
          message.success('同步任务已提交');
          onSuccess();
          return true;
        } catch (error: any) {
          message.error(error.message || '同步失败');
          return false;
        }
      }}
    >
      <ProFormSelect
        name="siteId"
        label="选择站点"
        options={sites.map((site) => ({ label: site.name, value: site.id }))}
        rules={[{ required: true, message: '请选择站点' }]}
      />
      {productRows.map((row) => (
        <div
          key={row.id}
          style={{ display: 'flex', gap: 12, alignItems: 'flex-end' }}
        >
          <div style={{ minWidth: 220 }}>原始SKU: {row.sku || '-'}</div>
          <ProFormText
            name={['productSiteSkus', row.id, 'code']}
            label={`商品 ${row.id} 站点SKU`}
            placeholder="请输入站点SKU"
          />
          <ProFormText
            name={['productSiteSkus', row.id, 'quantity']}
            label="数量"
            placeholder="请输入数量"
          />
        </div>
      ))}
    </ModalForm>
  );
};

const WpProductInfo: React.FC<{
  skus: string[];
  record: API.Product;
  parentTableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ skus, record, parentTableRef }) => {
  const actionRef = useRef<ActionType>();
  const { message } = App.useApp();

  return (
    <ProTable
      headerTitle="站点产品信息"
      actionRef={actionRef}
      search={false}
      options={false}
      pagination={false}
      toolBarRender={() => [
        <Button
          key="refresh"
          type="primary"
          onClick={() => actionRef.current?.reload()}
        >
          刷新
        </Button>,
      ]}
      request={async () => {
        // 判断是否存在站点SKU列表
        if (!skus || skus.length === 0) return { data: [] };
        try {
          // 获取所有站点列表用于遍历查询
          const { data: siteResponse } = await sitecontrollerAll();
          const siteList = siteResponse || [];
          // 聚合所有站点的产品数据
          const aggregatedProducts: any[] = [];
          // 遍历每一个站点
          for (const siteItem of siteList) {
            // 遍历每一个SKU在当前站点进行搜索
            for (const skuCode of skus) {
              // 直接调用站点API根据搜索关键字获取产品列表
              const response = await siteapicontrollerGetproducts({
                siteId: Number(siteItem.id),
                per_page: 100,
                search: skuCode,
              });
              const productPage = response as any;
              const siteProducts = productPage?.data?.items || [];
              // 将站点信息附加到产品数据中便于展示
              siteProducts.forEach((p: any) => {
                aggregatedProducts.push({
                  ...p,
                  siteId: siteItem.id,
                  siteName: siteItem.name,
                });
              });
            }
          }
          return { data: aggregatedProducts, success: true };
        } catch (error: any) {
          // 请求失败进行错误提示
          message.error(error?.message || '获取站点产品失败');
          return { data: [], success: false };
        }
      }}
      columns={[
        {
          title: '站点',
          dataIndex: 'siteName',
        },
        {
          title: 'SKU',
          dataIndex: 'sku',
        },
        {
          title: '价格',
          dataIndex: 'regular_price',
          render: (_, row) => (
            <div>
              <div>常规: {row.regular_price}</div>
              <div>促销: {row.sale_price}</div>
            </div>
          ),
        },
        {
          title: '状态',
          dataIndex: 'status',
        },
        {
          title: '操作',
          valueType: 'option',
          render: (_, wpRow) => [
            <a
              key="syncToSite"
              onClick={async () => {
                try {
                  await wpproductcontrollerBatchsynctosite(
                    { siteId: wpRow.siteId },
                    { productIds: [record.id] },
                  );
                  message.success('同步到站点成功');
                  actionRef.current?.reload();
                } catch (e: any) {
                  message.error(e.message || '同步失败');
                }
              }}
            >
              同步到站点
            </a>,
            <a
              key="syncToProduct"
              onClick={async () => {
                try {
                  await wpproductcontrollerSynctoproduct({ id: wpRow.id });
                  message.success('同步进商品成功');
                  parentTableRef.current?.reload();
                } catch (e: any) {
                  message.error(e.message || '同步失败');
                }
              }}
            >
              同步进商品
            </a>,
            <Popconfirm
              key="delete"
              title="删除"
              description="确认删除?"
              onConfirm={async () => {
                try {
                  await request(`/wp_product/${wpRow.id}`, {
                    method: 'DELETE',
                  });
                  message.success('删除成功');
                  actionRef.current?.reload();
                } catch (e: any) {
                  message.error(e.message || '删除失败');
                }
              }}
            >
              <a style={{ color: 'red' }}>删除</a>
            </Popconfirm>,
          ],
        },
      ]}
    />
  );
};

const List: React.FC = () => {
  const actionRef = useRef<ActionType>();
  // 状态:存储当前选中的行
  const [selectedRows, setSelectedRows] = React.useState<API.Product[]>([]);
  const [batchEditModalVisible, setBatchEditModalVisible] = useState(false);
  const [syncModalVisible, setSyncModalVisible] = useState(false);
  const [syncProductIds, setSyncProductIds] = useState<number[]>([]);

  const { message } = App.useApp();
  // 导出产品 CSV(带认证请求)
  const handleDownloadProductsCSV = async () => {
    try {
      // 发起认证请求获取 CSV Blob
      const blob = await request('/product/export', { responseType: 'blob' });
      // 构建下载文件名
      const d = new Date();
      const pad = (n: number) => String(n).padStart(2, '0');
      const filename = `products-${d.getFullYear()}${pad(
        d.getMonth() + 1,
      )}${pad(d.getDate())}.csv`;
      // 创建临时链接并触发下载
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      message.error('导出失败');
    }
  };
  const columns: ProColumns<API.Product>[] = [
    {
      title: 'sku',
      dataIndex: 'sku',
      sorter: true,
    },
    {
      title: '商品SKU',
      dataIndex: 'siteSkus',
      render: (_, record) => (
        <>
          {record.siteSkus?.map((code, index) => (
            <Tag key={index} color="cyan">
              {code}
            </Tag>
          ))}
        </>
      ),
    },
    {
      title: '名称',
      dataIndex: 'name',
      sorter: true,
    },
    {
      title: '中文名',
      dataIndex: 'nameCn',
      render: (_, record) => {
        return (
          <NameCn value={record.nameCn} id={record.id} tableRef={actionRef} />
        );
      },
    },

    {
      title: '商品类型',
      dataIndex: 'category',
      render: (_, record: any) => {
        return record.category?.title || record.category?.name || '-';
      },
    },
    {
      title: '价格',
      dataIndex: 'price',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '促销价',
      dataIndex: 'promotionPrice',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '属性',
      dataIndex: 'attributes',
      hideInSearch: true,
      render: (_, record) => <AttributesCell record={record} />,
    },
    {
      title: '产品类型',
      dataIndex: 'type',
      valueType: 'select',
      valueEnum: {
        single: { text: '单品' },
        bundle: { text: '套装' },
      },
      render: (_, record) => {
        // 如果类型不存在,则返回-
        if (!record.type) return '-';
        // 判断是否为单品
        const isSingle = record.type === 'single';
        // 根据类型显示不同颜色的标签
        return (
          <Tag color={isSingle ? 'green' : 'orange'}>
            {isSingle ? '单品' : '套装'}
          </Tag>
        );
      },
    },
    {
      title: '构成',
      dataIndex: 'components',
      hideInSearch: true,
      render: (_, record) => <ComponentsCell productId={(record as any).id} />,
    },

    {
      title: '描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      valueType: 'dateTime',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => (
        <>
          <EditForm record={record} tableRef={actionRef} />
          <Button
            type="link"
            onClick={() => {
              setSyncProductIds([record.id]);
              setSyncModalVisible(true);
            }}
          >
            同步到站点
          </Button>
          <Popconfirm
            title="删除"
            description="确认删除?"
            onConfirm={async () => {
              try {
                const { success, message: errMsg } =
                  await productcontrollerDeleteproduct({ id: record.id });
                if (!success) {
                  throw new Error(errMsg);
                }
                actionRef.current?.reload();
              } catch (error: any) {
                message.error(error.message);
              }
            }}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <PageContainer header={{ title: '产品列表' }}>
      <ProTable<API.Product>
        scroll={{ x: 'max-content' }}
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
          // 新建按钮
          <CreateForm tableRef={actionRef} />,
          // 批量编辑按钮
          <Button
            disabled={selectedRows.length <= 0}
            onClick={() => setBatchEditModalVisible(true)}
          >
            批量修改
          </Button>,
          // 批量同步按钮
          <Button
            disabled={selectedRows.length <= 0}
            onClick={() => {
              setSyncProductIds(selectedRows.map((row) => row.id));
              setSyncModalVisible(true);
            }}
          >
            批量同步到站点
          </Button>,
          // 批量删除按钮
          <Button
            danger
            disabled={selectedRows.length <= 0}
            onClick={() => {
              Modal.confirm({
                title: '确认删除',
                content: `确定要删除选中的 ${selectedRows.length} 个产品吗？此操作不可恢复。`,
                onOk: async () => {
                  try {
                    const { success, message: errMsg } =
                      await productcontrollerBatchdeleteproduct({
                        ids: selectedRows.map((row) => row.id),
                      });
                    if (success) {
                      message.success('批量删除成功');
                      setSelectedRows([]);
                      actionRef.current?.reload();
                    } else {
                      message.error(errMsg || '删除失败');
                    }
                  } catch (error: any) {
                    message.error(error.message || '删除失败');
                  }
                },
              });
            }}
          >
            批量删除
          </Button>,
          // 导出 CSV(后端返回 text/csv,直接新窗口下载)
          <Button onClick={handleDownloadProductsCSV}>导出CSV</Button>,
          // 导入 CSV(使用 customRequest 以支持 request 拦截器和鉴权)
          <Upload
            name="file"
            accept=".csv"
            showUploadList={false}
            maxCount={1}
            customRequest={async (options) => {
              const { file, onSuccess, onError } = options;
              const formData = new FormData();
              formData.append('file', file);
              try {
                const res = await request('/product/import', {
                  method: 'POST',
                  data: formData,
                  requestType: 'form',
                });

                const {
                  created = 0,
                  updated = 0,
                  errors = [],
                } = res.data || {};

                if (errors && errors.length > 0) {
                  Modal.warning({
                    title: '导入结果 (存在错误)',
                    width: 600,
                    content: (
                      <div>
                        <p>创建成功: {created}</p>
                        <p>更新成功: {updated}</p>
                        <p style={{ color: 'red', fontWeight: 'bold' }}>
                          失败数量: {errors.length}
                        </p>
                        <div
                          style={{
                            maxHeight: '300px',
                            overflowY: 'auto',
                            background: '#f5f5f5',
                            padding: '8px',
                            marginTop: '8px',
                            borderRadius: '4px',
                            border: '1px solid #d9d9d9',
                          }}
                        >
                          {errors.map((err: string, idx: number) => (
                            <div
                              key={idx}
                              style={{
                                fontSize: '12px',
                                marginBottom: '4px',
                                borderBottom: '1px solid #e8e8e8',
                                paddingBottom: '2px',
                                color: '#ff4d4f',
                              }}
                            >
                              {idx + 1}. {err}
                            </div>
                          ))}
                        </div>
                      </div>
                    ),
                  });
                } else {
                  message.success(`导入成功: 创建 ${created}, 更新 ${updated}`);
                }

                onSuccess?.('ok');
                actionRef.current?.reload();
              } catch (error: any) {
                message.error('导入失败: ' + (error.message || '未知错误'));
                onError?.(error);
              }
            }}
          >
            <Button>导入CSV</Button>
          </Upload>,
        ]}
        request={async (params, sort) => {
          let sortField = undefined;
          let sortOrder = undefined;

          if (sort && Object.keys(sort).length > 0) {
            const field = Object.keys(sort)[0];
            sortField = field;
            sortOrder = sort[field];
          }

          const { data, success } = await productcontrollerGetproductlist({
            ...params,
            sortField,
            sortOrder,
          } as any);
          return {
            total: data?.total || 0,
            data: data?.items || [],
            success,
          };
        }}
        columns={columns}
        expandable={{
          expandedRowRender: (record) => (
            <WpProductInfo
              skus={(record.siteSkus as string[]) || []}
              record={record}
              parentTableRef={actionRef}
            />
          ),
          rowExpandable: (record) =>
            !!(record.siteSkus && record.siteSkus.length > 0),
        }}
        editable={{
          type: 'single',
          onSave: async (key, record, originRow) => {
            console.log('保存数据:', record);
          },
        }}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        }}
      />
      <BatchEditModal
        visible={batchEditModalVisible}
        onClose={() => setBatchEditModalVisible(false)}
        selectedRows={selectedRows}
        tableRef={actionRef}
        onSuccess={() => {
          setBatchEditModalVisible(false);
          setSelectedRows([]);
        }}
      />
      <SyncToSiteModal
        visible={syncModalVisible}
        onClose={() => setSyncModalVisible(false)}
        productIds={syncProductIds}
        productRows={selectedRows}
        onSuccess={() => {
          setSyncModalVisible(false);
          setSelectedRows([]);
          actionRef.current?.reload();
        }}
      />
    </PageContainer>
  );
};

export default List;