import {
  productcontrollerBatchdeleteproduct,
  productcontrollerBatchupdateproduct,
  productcontrollerDeleteproduct,
  productcontrollerGetcategoriesall,
  productcontrollerGetproductlist,
  productcontrollerUpdatenamecn,
} from '@/servers/api/product';
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';
import SyncToSiteModal from './SyncToSiteModal';

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<{ components?: any[] }> = ({ components }) => {
  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 ProductList = ({
  filter,
  columns,
}: {
  filter: { skus: string[] };
  columns: any[];
}) => {
  return (
    <ProTable
      request={async (pag) => {
        const { data, success } = await productcontrollerGetproductlist({
          where: filter,
        });
        if (!success) return [];
        return data || [];
      }}
      columns={columns}
      pagination={false}
      rowKey="id"
      bordered
      size="small"
      scroll={{ x: 'max-content' }}
      headerTitle={null}
      toolBarRender={false}
    />
  );
};

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

  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: '关联商品',
      dataIndex: 'siteSkus',
      width: 200,
      render: (_, record) => (
        <>
          {record.siteSkus?.map((siteSku, index) => (
            <Tag key={index} color="cyan">
              {siteSku}
            </Tag>
          ))}
        </>
      ),
    },
    {
      title: '图片',
      dataIndex: 'image',
      width: 100,
      valueType: 'image',
    },
    {
      title: '名称',
      dataIndex: 'name',
      sorter: true,
    },
    {
      title: '中文名',
      dataIndex: 'nameCn',
      render: (_, record) => {
        return (
          <NameCn value={record.nameCn} id={record.id} tableRef={actionRef} />
        );
      },
    },

    {
      title: '价格',
      dataIndex: 'price',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '促销价',
      dataIndex: 'promotionPrice',
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '商品类型',
      dataIndex: 'category',
      render: (_, record: any) => {
        return record.category?.title || record.category?.name || '-';
      },
    },
    {
      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 components={record.components} />,
    },

    {
      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={() => {
              setSyncProducts([record]);
              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} />,
          // 导入 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>批量导入</Button>
          </Upload>,
          // 批量编辑按钮
          <Button
            disabled={selectedRows.length <= 0}
            onClick={() => setBatchEditModalVisible(true)}
          >
            批量修改
          </Button>,
          // 批量同步按钮
          <Button
            disabled={selectedRows.length <= 0}
            onClick={() => {
              setSyncProducts(selectedRows);
              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>,
        ]}
        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 { current, pageSize, ...where } = params;
          console.log(`params`, params);
          const { data, success } = await productcontrollerGetproductlist({
            where,
            page: current || 1,
            per_page: pageSize || 10,
            sortField,
            sortOrder,
          } as any);
          return {
            total: data?.total || 0,
            data: data?.items || [],
            success,
          };
        }}
        columns={columns}
        // expandable={{
        //   expandedRowRender: (record) => {
        //     return  <ProductList filter={{
        //       skus: record.components?.map(component => component.sku) || [],
        //     }}
        //     columns={columns}
        //     ></ProductList>
        //   }
        //   ,
        //   rowExpandable: (record) =>
        //     !!(record.type==='bundle'),
        // }}
        editable={{
          type: 'single',
          onSave: async (key, record, originRow) => {
            console.log('保存数据:', record);
          },
        }}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '50', '100', '1000', '2000'],
        }}
      />
      <BatchEditModal
        visible={batchEditModalVisible}
        onClose={() => setBatchEditModalVisible(false)}
        selectedRows={selectedRows}
        tableRef={actionRef}
        onSuccess={() => {
          setBatchEditModalVisible(false);
          setSelectedRows([]);
        }}
      />
      <SyncToSiteModal
        visible={syncModalVisible}
        onClose={() => setSyncModalVisible(false)}
        products={syncProducts}
        onSuccess={() => {
          setSyncModalVisible(false);
          setSelectedRows([]);
          actionRef.current?.reload();
        }}
      />
    </PageContainer>
  );
};

export default List;