import React 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';

const { Title, Text } = Typography;

/**
 * 通知管理（user_id=0 为全员广播）
 */
const NoticePage: React.FC = () => {
  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: 'user_id',
      valueType: 'digit',
      hideInTable: false,
      hideInSearch: true,
      fieldProps: {
        min: 0,
        precision: 0,
        placeholder: '留空或 0 = 全员广播',
      },
      align: 'center',
      render: (_, record) =>
        record.user_id === 0 ? (
          <Tag color="gold">全员广播</Tag>
        ) : (
          <Tag>{`用户 #${record.user_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">
          向小程序用户发送消息；接收对象留空或填 0 为全员广播，价格调整通知由批量调价自动生成。
        </Text>
      </div>
      <XinTable<INotice> {...tableProps} />
    </>
  );
};

export default NoticePage;