import React, { useEffect, useState } from 'react';
import { Tag, Typography } from 'antd';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
import type INotice from '@/domain/iNotice.ts';
import { NOTICE_READ_MAP, NOTICE_TYPE_MAP } from '@/domain/iNotice.ts';
import type IStore from '@/domain/iStore.ts';
import { getStoreOptions } from '@/api/customer/store.ts';

const { Title, Text } = Typography;

/**
 * 通知管理（store_id=0 为全员广播）
 */
const NoticePage: React.FC = () => {
  const [stores, setStores] = useState<IStore[]>([]);

  useEffect(() => {
    getStoreOptions().then((res) => setStores(res.data.data ?? []));
  }, []);

  const storeNameMap = new Map(stores.map((s) => [s.id, s.name]));
  const storeOptions = [
    { label: '全员广播', value: 0 },
    ...stores.map((s) => ({ label: s.name ?? '', value: s.id ?? 0 })),
  ];

  const columns: XinTableColumn<INotice>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInForm: true,
      hideInSearch: true,
      width: 70,
      align: 'center',
    },
    {
      title: '标题',
      dataIndex: 'title',
      valueType: 'text',
      required: true,
      rules: [{ required: true, message: '请输入通知标题' }],
    },
    {
      title: '类型',
      dataIndex: 'type',
      valueType: 'select',
      initialValue: 'system',
      required: true,
      rules: [{ required: true, message: '请选择通知类型' }],
      fieldProps: {
        options: [
          { value: 'system', label: '系统' },
          { value: 'order', label: '订单' },
          { value: 'price', label: '价格' },
        ],
      },
      render: (_, record) => {
        const item = NOTICE_TYPE_MAP[record.type ?? 'system'];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
    },
    {
      title: '接收对象',
      dataIndex: 'store_id',
      valueType: 'select',
      hideInSearch: true,
      initialValue: 0,
      fieldProps: {
        options: storeOptions,
        showSearch: true,
        optionFilterProp: 'label',
        placeholder: '默认全员广播',
      },
      align: 'center',
      render: (_, record) =>
        record.store_id === 0 ? (
          <Tag color="gold">全员广播</Tag>
        ) : (
          <Tag>{storeNameMap.get(record.store_id) ?? `门店 #${record.store_id}`}</Tag>
        ),
    },
    {
      title: '内容',
      dataIndex: 'content',
      valueType: 'textarea',
      hideInSearch: true,
      hideInTable: true,
      fieldProps: { rows: 3 },
    },
    {
      title: '阅读状态',
      dataIndex: 'is_read',
      valueType: 'select',
      hideInForm: true,
      fieldProps: {
        options: [
          { value: 0, label: '未读' },
          { value: 1, label: '已读' },
        ],
      },
      render: (_, record) => {
        const item = NOTICE_READ_MAP[record.is_read ?? 0];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
    },
  ];

  const tableProps: XinTableProps<INotice> = {
    api: '/customer/notice',
    columns,
    rowKey: 'id',
    accessName: 'customer.notice',
    // 通知只有新增与删除，无编辑
    editShow: () => false,
    formProps: {
      grid: true,
      colProps: { span: 12 },
      layout: 'vertical',
    },
    modalProps: { width: 640 },
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>通知管理</Title>
        <Text type="secondary">
          向门店端小程序发送消息；接收对象默认全员广播，价格调整通知由批量调价自动生成。
        </Text>
      </div>
      <XinTable<INotice> {...tableProps} />
    </>
  );
};

export default NoticePage;