import { useEffect, useState } from 'react'
import dayjs, { type Dayjs } from 'dayjs'
import {
  Avatar,
  Button,
  Card,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Select,
  Space,
  Table,
  Typography,
} from 'antd'
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table'
import { toast } from 'sonner'
import {
  apiAdminMerchantPage,
  apiAdminRecommendMerchantDelete,
  apiAdminRecommendMerchantPage,
  apiAdminRecommendMerchantSave,
} from '@/apis/apiMallAdmin'
import StatusTag from '@/components/StatusTag'
import type {
  AdminRecommendMerchantItem,
  AdminRecommendMerchantPageParams,
  AdminRecommendMerchantSaveParams,
  EnabledStatus,
  MerchantInfo,
  RecommendMerchantPositionCode,
} from '@/types/mall'
import { compactText, formatTimestamp } from '@/utils/format'
import {
  enabledStatusOptions,
  getRecommendStorePositionLabel,
  recommendStorePositionOptions,
  withAllOption,
} from '@/utils/mall'

const { TextArea } = Input
const DEFAULT_PAGE_SIZE = 20
const DEFAULT_STATUS: EnabledStatus = 'enabled'
const DEFAULT_POSITION_CODE: RecommendMerchantPositionCode = 'home_featured_store'

interface RecommendStoreSearchValues {
  keyword?: string
  positionCode?: RecommendMerchantPositionCode | ''
  status?: EnabledStatus | ''
  merchantId?: string
  page: number
  size: number
}

interface RecommendStoreFormValues {
  positionCode: RecommendMerchantPositionCode
  merchantId?: string
  mainCategoryName?: string
  recommendReason?: string
  rankScore?: number
  sort?: number
  status: EnabledStatus
  startTime?: Dayjs | null
  endTime?: Dayjs | null
}

interface MerchantSelectOption {
  label: string
  value: string
}

const normalizeSearchValues = (values: RecommendStoreSearchValues): AdminRecommendMerchantPageParams => ({
  keyword: values.keyword?.trim() || undefined,
  positionCode: values.positionCode || undefined,
  status: values.status || undefined,
  merchantId: values.merchantId || undefined,
  page: values.page,
  size: values.size,
})

const buildMerchantOption = (merchant: Pick<MerchantInfo, 'id' | 'merchantName'>): MerchantSelectOption => ({
  value: String(merchant.id),
  label: compactText(merchant.merchantName),
})

const mergeMerchantOptions = (current: MerchantSelectOption[], next: MerchantSelectOption[]) => {
  const merged = new Map<string, MerchantSelectOption>()
  current.forEach(item => merged.set(item.value, item))
  next.forEach(item => merged.set(item.value, item))
  return Array.from(merged.values())
}

export default function RecommendStoreManagementPage() {
  const [form] = Form.useForm<RecommendStoreSearchValues>()
  const [modalForm] = Form.useForm<RecommendStoreFormValues>()
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [merchantLoading, setMerchantLoading] = useState(false)
  const [list, setList] = useState<AdminRecommendMerchantItem[]>([])
  const [total, setTotal] = useState(0)
  const [pagination, setPagination] = useState({ current: 1, pageSize: DEFAULT_PAGE_SIZE })
  const [modalOpen, setModalOpen] = useState(false)
  const [editingRecord, setEditingRecord] = useState<AdminRecommendMerchantItem | null>(null)
  const [merchantOptions, setMerchantOptions] = useState<MerchantSelectOption[]>([])

  const loadData = async (page = pagination.current, size = pagination.pageSize) => {
    try {
      setLoading(true)
      const response = await apiAdminRecommendMerchantPage(
        normalizeSearchValues({
          ...form.getFieldsValue(),
          page,
          size,
        })
      )
      setList(response.data.list)
      setTotal(response.data.total)
      setPagination({ current: page, pageSize: size })
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '首页推荐商家列表加载失败')
    } finally {
      setLoading(false)
    }
  }

  const loadMerchantOptions = async (keyword?: string) => {
    try {
      setMerchantLoading(true)
      const response = await apiAdminMerchantPage({
        keyword: keyword?.trim() || undefined,
        page: 1,
        size: 20,
      })
      const nextOptions = response.data.list.map(item => buildMerchantOption(item))
      setMerchantOptions(current => mergeMerchantOptions(current, nextOptions))
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '商家选项加载失败')
    } finally {
      setMerchantLoading(false)
    }
  }

  useEffect(() => {
    form.setFieldsValue({
      page: 1,
      size: DEFAULT_PAGE_SIZE,
    })
    void loadData(1, DEFAULT_PAGE_SIZE)
  }, [])

  const resetModal = () => {
    setModalOpen(false)
    setEditingRecord(null)
    modalForm.resetFields()
  }

  const openCreateModal = () => {
    setEditingRecord(null)
    modalForm.setFieldsValue({
      positionCode: DEFAULT_POSITION_CODE,
      rankScore: 0,
      sort: 0,
      status: DEFAULT_STATUS,
      startTime: null,
      endTime: null,
    })
    setModalOpen(true)
    if (!merchantOptions.length) {
      void loadMerchantOptions()
    }
  }

  const openEditModal = (record: AdminRecommendMerchantItem) => {
    setEditingRecord(record)
    setMerchantOptions(current =>
      mergeMerchantOptions(current, [
        {
          value: record.merchantId,
          label: compactText(record.merchantName),
        },
      ])
    )
    modalForm.setFieldsValue({
      positionCode: record.positionCode,
      merchantId: record.merchantId,
      mainCategoryName: record.mainCategoryName || '',
      recommendReason: record.recommendReason || '',
      rankScore: Number(record.rankScore ?? 0),
      sort: record.sort ?? 0,
      status: record.configStatus,
      startTime: record.startTime ? dayjs.unix(record.startTime) : null,
      endTime: record.endTime ? dayjs.unix(record.endTime) : null,
    })
    setModalOpen(true)
  }

  const handleDelete = async (record: AdminRecommendMerchantItem) => {
    try {
      await apiAdminRecommendMerchantDelete({ id: record.id })
      toast.success('首页推荐商家已删除')
      await loadData()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '首页推荐商家删除失败')
    }
  }

  const handleSave = async () => {
    try {
      const values = await modalForm.validateFields()
      setSaving(true)
      const payload: AdminRecommendMerchantSaveParams = {
        id: editingRecord?.id,
        positionCode: values.positionCode,
        merchantId: values.merchantId || '',
        mainCategoryName: values.mainCategoryName?.trim() || undefined,
        recommendReason: values.recommendReason?.trim() || undefined,
        rankScore: values.rankScore ?? 0,
        sort: values.sort ?? 0,
        status: values.status,
        startTime: values.startTime?.unix(),
        endTime: values.endTime?.unix(),
      }
      await apiAdminRecommendMerchantSave(payload)
      toast.success(editingRecord ? '首页推荐商家已更新' : '首页推荐商家已新增')
      resetModal()
      await loadData()
    } catch (error) {
      if (error instanceof Error && error.message) {
        toast.error(error.message)
      }
    } finally {
      setSaving(false)
    }
  }

  const handleTableChange = (next: TablePaginationConfig) => {
    void loadData(next.current || 1, next.pageSize || DEFAULT_PAGE_SIZE)
  }

  const columns: ColumnsType<AdminRecommendMerchantItem> = [
    {
      title: '配置 ID',
      dataIndex: 'id',
      width: 92,
    },
    {
      title: '位置编码',
      dataIndex: 'positionCode',
      width: 140,
      render: value => getRecommendStorePositionLabel(value),
    },
    {
      title: '商家 ID',
      dataIndex: 'merchantId',
      width: 92,
    },
    {
      title: '商家名称',
      dataIndex: 'merchantName',
      width: 200,
      render: value => compactText(value),
    },
    {
      title: '商家 Logo',
      dataIndex: 'logo',
      width: 100,
      render: (_, record) => (
        <Avatar shape="square" size={48} src={record.logo || undefined}>
          {record.merchantName?.slice(0, 1)}
        </Avatar>
      ),
    },
    {
      title: '商家公告',
      dataIndex: 'notice',
      width: 220,
      render: value => (
        <Typography.Text title={compactText(value)}>
          {compactText(value)}
        </Typography.Text>
      ),
    },
    {
      title: '商家状态',
      dataIndex: 'merchantStatus',
      width: 96,
      render: value => <StatusTag value={value} />,
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatus',
      width: 96,
      render: value => <StatusTag value={value} />,
    },
    {
      title: '主推类目',
      dataIndex: 'mainCategoryName',
      width: 160,
      render: value => compactText(value),
    },
    {
      title: '推荐理由',
      dataIndex: 'recommendReason',
      width: 220,
      render: value => (
        <Typography.Text title={compactText(value)}>
          {compactText(value)}
        </Typography.Text>
      ),
    },
    {
      title: '排行分值',
      dataIndex: 'rankScore',
      width: 96,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 76,
    },
    {
      title: '配置状态',
      dataIndex: 'configStatus',
      width: 96,
      render: value => <StatusTag value={value} />,
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      width: 170,
      render: value => formatTimestamp(value),
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      width: 170,
      render: value => formatTimestamp(value),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      width: 170,
      render: value => formatTimestamp(value),
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 144,
      render: (_, record) => (
        <Space size={4}>
          <Button type="link" onClick={() => openEditModal(record)}>
            编辑
          </Button>
          <Popconfirm
            title="确认删除该推荐商家配置吗？"
            okText="删除"
            cancelText="取消"
            onConfirm={() => void handleDelete(record)}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <Space direction="vertical" size={16} style={{ display: 'flex' }}>
      <div className="page-toolbar">
        <Typography.Title level={3} style={{ margin: 0 }}>
          首页推荐商家
        </Typography.Title>
        <Button type="primary" onClick={openCreateModal}>
          新增推荐商家
        </Button>
      </div>

      <Card>
        <Form className="search-form" form={form} layout="inline" onFinish={() => void loadData(1, pagination.pageSize)}>
          <Form.Item name="merchantId" label="商家筛选">
            <Select
              showSearch
              allowClear
              filterOption={false}
              loading={merchantLoading}
              options={merchantOptions}
              style={{ width: 220 }}
              placeholder="请输入商家名称搜索"
              onFocus={() => {
                if (!merchantOptions.length) {
                  void loadMerchantOptions()
                }
              }}
              onSearch={value => {
                void loadMerchantOptions(value)
              }}
            />
          </Form.Item>
          <Form.Item name="keyword" label="关键词">
            <Input allowClear placeholder="商家名称" style={{ width: 220 }} />
          </Form.Item>
          <Form.Item name="positionCode" label="投放位置">
            <Select
              allowClear
              options={withAllOption(recommendStorePositionOptions)}
              style={{ width: 180 }}
            />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select allowClear options={withAllOption(enabledStatusOptions)} style={{ width: 160 }} />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button
                onClick={() => {
                  form.resetFields()
                  void loadData(1, DEFAULT_PAGE_SIZE)
                }}
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      <Card>
        <Table<AdminRecommendMerchantItem>
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={list}
          className="table-top-align"
          scroll={{ x: 2200 }}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total,
            showSizeChanger: true,
            showTotal: count => `共 ${count} 条`,
          }}
          onChange={handleTableChange}
        />
      </Card>

      <Modal
        destroyOnHidden
        open={modalOpen}
        title={editingRecord ? '编辑首页推荐商家' : '新增首页推荐商家'}
        width={640}
        confirmLoading={saving}
        okText="保存"
        cancelText="取消"
        onCancel={resetModal}
        onOk={() => void handleSave()}
      >
        <Form form={modalForm} layout="vertical">
          <Form.Item
            name="positionCode"
            label="投放位置"
            rules={[{ required: true, message: '请选择投放位置' }]}
          >
            <Select options={recommendStorePositionOptions} placeholder="请选择投放位置" />
          </Form.Item>
          <Form.Item
            name="merchantId"
            label="推荐商家"
            rules={[{ required: true, message: '请选择商家' }]}
            extra="当前推荐位直接选择商家。"
          >
            <Select
              showSearch
              filterOption={false}
              loading={merchantLoading}
              options={merchantOptions}
              placeholder="请输入商家名称搜索"
              onFocus={() => {
                if (!merchantOptions.length) {
                  void loadMerchantOptions()
                }
              }}
              onSearch={value => {
                void loadMerchantOptions(value)
              }}
            />
          </Form.Item>
          <Form.Item name="mainCategoryName" label="主推类目">
            <Input maxLength={50} placeholder="首页展示用，如：精品水果 / 五金工具" />
          </Form.Item>
          <Form.Item name="recommendReason" label="推荐理由">
            <TextArea rows={3} maxLength={200} placeholder="请输入首页展示文案" />
          </Form.Item>
          <Space size={12} style={{ display: 'flex' }}>
            <Form.Item name="rankScore" label="排行分值" style={{ flex: 1 }}>
              <InputNumber min={0} precision={2} style={{ width: '100%' }} placeholder="默认 0" />
            </Form.Item>
            <Form.Item name="sort" label="排序" style={{ flex: 1 }}>
              <InputNumber min={0} precision={0} style={{ width: '100%' }} placeholder="默认 0" />
            </Form.Item>
          </Space>
          <Form.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
            <Select options={enabledStatusOptions} placeholder="请选择状态" />
          </Form.Item>
          <Space size={12} style={{ display: 'flex' }}>
            <Form.Item name="startTime" label="开始时间" style={{ flex: 1 }}>
              <DatePicker showTime style={{ width: '100%' }} placeholder="请选择开始时间" />
            </Form.Item>
            <Form.Item
              name="endTime"
              label="结束时间"
              style={{ flex: 1 }}
              dependencies={['startTime']}
              rules={[
                ({ getFieldValue }) => ({
                  validator(_, value?: Dayjs | null) {
                    const startTime = getFieldValue('startTime') as Dayjs | null | undefined
                    if (!startTime || !value || value.valueOf() >= startTime.valueOf()) {
                      return Promise.resolve()
                    }
                    return Promise.reject(new Error('结束时间不能早于开始时间'))
                  },
                }),
              ]}
            >
              <DatePicker showTime style={{ width: '100%' }} placeholder="请选择结束时间" />
            </Form.Item>
          </Space>
        </Form>
      </Modal>
    </Space>
  )
}