import {
  customercontrollerAddtag,
  customercontrollerDeltag,
  customercontrollerGetcustomerlist,
  customercontrollerGettags,
  customercontrollerSetrate,
  customercontrollerSynccustomers,
} from '@/servers/api/customer';
import { sitecontrollerAll } from '@/servers/api/site';
import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProFormSelect,
  ProTable,
} from '@ant-design/pro-components';
import { App, Avatar, Button, Rate, Space, Tag, Tooltip } from 'antd';
import { useEffect, useRef, useState } from 'react';
import HistoryOrders from './HistoryOrders';

// 地址格式化函数
const formatAddress = (address: any) => {
  if (!address) return '-';

  if (typeof address === 'string') {
    try {
      address = JSON.parse(address);
    } catch (e) {
      return address;
    }
  }

  const {
    first_name,
    last_name,
    company,
    address_1,
    address_2,
    city,
    state,
    postcode,
    country,
    phone: addressPhone,
    email: addressEmail,
  } = address;

  const parts = [];

  // 姓名
  const fullName = [first_name, last_name].filter(Boolean).join(' ');
  if (fullName) parts.push(fullName);

  // 公司
  if (company) parts.push(company);

  // 地址行
  if (address_1) parts.push(address_1);
  if (address_2) parts.push(address_2);

  // 城市、州、邮编
  const locationParts = [city, state, postcode].filter(Boolean).join(', ');
  if (locationParts) parts.push(locationParts);

  // 国家
  if (country) parts.push(country);

  // 联系方式
  if (addressPhone) parts.push(`电话: ${addressPhone}`);
  if (addressEmail) parts.push(`邮箱: ${addressEmail}`);

  return parts.join(', ');
};

// 地址卡片组件
const AddressCell: React.FC<{ address: any; title: string }> = ({
  address,
  title,
}) => {
  const formattedAddress = formatAddress(address);

  if (formattedAddress === '-') {
    return <span>-</span>;
  }

  return (
    <Tooltip
      title={
        <div style={{ maxWidth: 300, whiteSpace: 'pre-line' }}>
          <strong>{title}:</strong>
          <br />
          {formattedAddress}
        </div>
      }
      placement="topLeft"
    >
      <div
        style={{
          maxWidth: 200,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          cursor: 'pointer',
        }}
      >
        {formattedAddress}
      </div>
    </Tooltip>
  );
};

const CustomerList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const { message } = App.useApp();
  const [syncModalVisible, setSyncModalVisible] = useState(false);
  const [syncLoading, setSyncLoading] = useState(false);
  const [sites, setSites] = useState<any[]>([]); // 添加站点数据状态

  // 获取站点数据
  const fetchSites = async () => {
    try {
      const { data, success } = await sitecontrollerAll();
      if (success) {
        setSites(data || []);
      }
    } catch (error) {
      console.error('获取站点数据失败:', error);
    }
  };

  // 根据站点ID获取站点名称
  const getSiteName = (siteId: number | undefined | null) => {
    if (!siteId) return '-';
    if (typeof siteId === 'string') {
      return siteId;
    }
    const site = sites.find((s) => s.id === siteId);
    console.log(`site`, site);
    return site ? site.name : String(siteId);
  };

  // 组件加载时获取站点数据
  useEffect(() => {
    fetchSites();
  }, []);

  const columns: ProColumns<API.UnifiedCustomerDTO>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: '站点',
      dataIndex: 'site_id',
      valueType: 'select',
      request: async () => {
        try {
          const { data, success } = await sitecontrollerAll();
          if (success && data) {
            return data.map((site: any) => ({
              label: site.name,
              value: site.id,
            }));
          }
          return [];
        } catch (error) {
          console.error('获取站点列表失败:', error);
          return [];
        }
      },
      render: (siteId: any) => {
        return <span>{getSiteName(siteId) || '-'}</span>;
      },
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      hideInSearch: true,
      width: 60,
      render: (_, record) => (
        <Avatar
          src={record.avatar}
          size="small"
          style={{ backgroundColor: '#1890ff' }}
        >
          {!record.avatar && record.fullname?.charAt(0)?.toUpperCase()}
        </Avatar>
      ),
    },
    {
      title: '姓名',
      dataIndex: 'fullname',
      sorter: true,
      render: (_, record) => {
        return (
          record.fullname ||
          `${record.first_name || ''} ${record.last_name || ''}`.trim() ||
          record.username ||
          '-'
        );
      },
    },
    {
      title: '用户名',
      dataIndex: 'username',
      hideInSearch: true,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      copyable: true,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      hideInSearch: true,
      copyable: true,
    },
    {
      title: '账单地址',
      dataIndex: 'billing',
      hideInSearch: true,
      width: 200,
      render: (billing) => <AddressCell address={billing} title="账单地址" />,
    },
    {
      title: '物流地址',
      dataIndex: 'shipping',
      hideInSearch: true,
      width: 200,
      render: (shipping) => <AddressCell address={shipping} title="物流地址" />,
    },
    {
      title: '评分',
      dataIndex: 'rate',
      width: 120,
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Rate
            onChange={async (val) => {
              try {
                const { success, message: msg } =
                  await customercontrollerSetrate({
                    id: record.id,
                    rate: val,
                  });
                if (success) {
                  message.success(msg);
                  actionRef.current?.reload();
                }
              } catch (e: any) {
                message.error(e?.message || '设置评分失败');
              }
            }}
            value={record.raw?.rate || 0}
            allowHalf
          />
        );
      },
    },
    {
      title: '标签',
      dataIndex: 'tags',
      hideInSearch: true,
      render: (_, record) => {
        const tags = record.raw?.tags || [];
        return (
          <Space size={[0, 8]} wrap>
            {tags.map((tag: string) => {
              return (
                <Tag
                  key={tag}
                  closable
                  onClose={async () => {
                    const { success, message: msg } =
                      await customercontrollerDeltag({
                        email: record.email,
                        tag,
                      });
                    if (!success) {
                      message.error(msg);
                      return false;
                    }
                    actionRef.current?.reload();
                    return true;
                  }}
                  style={{ marginBottom: 4 }}
                >
                  {tag}
                </Tag>
              );
            })}
          </Space>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'site_created_at',
      valueType: 'dateTime',
      hideInSearch: true,
      sorter: true,
      width: 140,
    },
    {
      title: '更新时间',
      dataIndex: 'site_created_at',
      valueType: 'dateTime',
      hideInSearch: true,
      sorter: true,
      width: 140,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 120,
      render: (_, record) => {
        return (
          <Space direction="vertical" size="small">
            <AddTag
              email={record.email || ''}
              tags={record.raw?.tags || []}
              tableRef={actionRef}
            />
            {/* 订单 */}
            <HistoryOrders customer={record} siteId={record.raw?.site_id} />
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer header={{ title: '客户列表' }}>
      <ProTable
        scroll={{ x: 'max-content' }}
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        request={async (params, sorter) => {
          const key = Object.keys(sorter)[0];
          const { data, success } = await customercontrollerGetcustomerlist({
            ...params,
            current: params.current?.toString(),
            pageSize: params.pageSize?.toString(),
            ...(key
              ? { sorterKey: key, sorterValue: sorter[key] as string }
              : {}),
          });

          return {
            total: data?.total || 0,
            data: data?.items || [],
            success,
          };
        }}
        columns={columns}
        search={{
          labelWidth: 'auto',
          span: 6,
        }}
        pagination={{
          pageSize: 20,
          showSizeChanger: true,
          showTotal: (total, range) =>
            `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
        }}
        toolBarRender={() => [
          <Button
            key="sync"
            type="primary"
            onClick={() => setSyncModalVisible(true)}
          >
            同步客户数据
          </Button>,
          // 这里可以添加导出、导入等功能按钮
        ]}
      />
      <SyncCustomersModal
        visible={syncModalVisible}
        onClose={() => setSyncModalVisible(false)}
        tableRef={actionRef}
      />
    </PageContainer>
  );
};

const AddTag: React.FC<{
  email: string;
  tags?: string[];
  tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ email, tags, tableRef }) => {
  const { message } = App.useApp();
  const [tagList, setTagList] = useState<string[]>([]);

  return (
    <ModalForm
      title={`修改标签 - ${email}`}
      trigger={
        <Button type="link" size="small">
          修改标签
        </Button>
      }
      width={800}
      modalProps={{
        destroyOnHidden: true,
      }}
      submitter={false}
    >
      <ProFormSelect
        mode="tags"
        allowClear
        name="tag"
        label="标签"
        request={async () => {
          const { data, success } = await customercontrollerGettags();
          if (!success) return [];
          setTagList(tags || []);
          return data
            .filter((tag: string) => {
              return !(tags || []).includes(tag);
            })
            .map((tag: string) => ({ label: tag, value: tag }));
        }}
        fieldProps={{
          value: tagList, // 当前值
          onChange: async (newValue) => {
            const added = newValue.filter((x) => !(tags || []).includes(x));
            const removed = (tags || []).filter((x) => !newValue.includes(x));

            if (added.length) {
              const { success, message: msg } = await customercontrollerAddtag({
                email,
                tag: added[0],
              });
              if (!success) {
                message.error(msg);
                return;
              }
            }
            if (removed.length) {
              const { success, message: msg } = await customercontrollerDeltag({
                email,
                tag: removed[0],
              });
              if (!success) {
                message.error(msg);
                return;
              }
            }
            tableRef?.current?.reload();
            setTagList(newValue);
          },
        }}
      ></ProFormSelect>
    </ModalForm>
  );
};

const SyncCustomersModal: React.FC<{
  visible: boolean;
  onClose: () => void;
  tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ visible, onClose, tableRef }) => {
  const { message } = App.useApp();
  const [sites, setSites] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // 获取站点列表
  useEffect(() => {
    if (visible) {
      setLoading(true);
      sitecontrollerAll()
        .then((res: any) => {
          setSites(res?.data || []);
        })
        .catch((error: any) => {
          message.error('获取站点列表失败: ' + (error.message || '未知错误'));
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [visible]);

  const handleSync = async (values: { siteId: number }) => {
    try {
      setLoading(true);
      const {
        success,
        message: msg,
        data,
      } = await customercontrollerSynccustomers({
        siteId: values.siteId,
      });

      if (success) {
        // 显示详细的同步结果
        const result = data || {};
        const {
          total = 0,
          synced = 0,
          created = 0,
          updated = 0,
          errors = [],
        } = result;

        let resultMessage = `同步完成！共处理 ${total} 个客户：`;
        if (created > 0) resultMessage += ` 新建 ${created} 个`;
        if (updated > 0) resultMessage += ` 更新 ${updated} 个`;
        if (synced > 0) resultMessage += ` 同步成功 ${synced} 个`;
        if (errors.length > 0) resultMessage += ` 失败 ${errors.length} 个`;

        if (errors.length > 0) {
          // 如果有错误，显示警告消息
          message.warning({
            content: (
              <div>
                <div>{resultMessage}</div>
                <div style={{ marginTop: 8, fontSize: 12, color: '#faad14' }}>
                  失败详情：
                  {errors
                    .slice(0, 3)
                    .map((err: any) => err.email || err.error)
                    .join(', ')}
                  {errors.length > 3 && ` 等 ${errors.length - 3} 个错误...`}
                </div>
              </div>
            ),
            duration: 8,
            key: 'sync-result',
          });
        } else {
          // 完全成功
          message.success({
            content: resultMessage,
            duration: 4,
            key: 'sync-result',
          });
        }

        onClose();
        // 刷新表格数据
        tableRef.current?.reload();
        return true;
      } else {
        message.error(msg || '同步失败');
        return false;
      }
    } catch (error: any) {
      message.error('同步失败: ' + (error.message || '未知错误'));
      return false;
    } finally {
      setLoading(false);
    }
  };

  return (
    <ModalForm
      title="同步客户数据"
      open={visible}
      onOpenChange={(open) => !open && onClose()}
      modalProps={{
        destroyOnClose: true,
        confirmLoading: loading,
      }}
      onFinish={handleSync}
    >
      <ProFormSelect
        name="siteId"
        label="选择站点"
        placeholder="请选择要同步的站点"
        options={sites.map((site) => ({
          label: site.name,
          value: site.id,
        }))}
        rules={[{ required: true, message: '请选择站点' }]}
        fieldProps={{
          loading: loading,
        }}
      />
    </ModalForm>
  );
};

export { AddTag };

export default CustomerList;
