import XinTable from '@/components/XinTable';
import { Badge, Button, Tooltip, Typography } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
import type { ICategory } from '@/domain/iCategory';
import type { XinTableColumn } from '@/components/XinTable/typings';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
import dayjs from 'dayjs';

const { Title, Text } = Typography;

/** 首页分类管理 */
export default function CategoryPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const columns: XinTableColumn<ICategory>[] = [
    {
      title: t('system.category.id'),
      dataIndex: 'id',
      hideInForm: true,
      width: 80,
      sorter: true,
      align: 'center',
    },
    {
      title: t('system.category.name'),
      dataIndex: 'name',
      valueType: 'text',
      colProps: { span: 12 },
      rules: [{ required: true, message: t('system.category.name.required') }],
    },
    {
      title: t('system.category.status'),
      dataIndex: 'status',
      valueType: 'select',
      filters: [
        { text: t('system.category.status.normal'), value: 0 },
        { text: t('system.category.status.disabled'), value: 1 },
      ],
      colProps: { span: 12 },
      rules: [{ required: true, message: t('system.category.status.required') }],
      fieldProps: {
        options: [
          { label: t('system.category.status.normal'), value: 0 },
          { label: t('system.category.status.disabled'), value: 1 },
        ],
      },
      render: (value: number) => {
        return value === 0
          ? <Badge status="success" text={t('system.category.status.normal')} />
          : <Badge status="error" text={t('system.category.status.disabled')} />;
      },
    },
    {
      title: t('system.category.sort'),
      dataIndex: 'sort',
      valueType: 'digit',
      colProps: { span: 12 },
      hideInSearch: true,
      initialValue: 0,
      fieldProps: {
        min: 0,
        style: { width: '100%' },
      },
    },
    {
      title: t('system.category.createdAt'),
      dataIndex: 'created_at',
      render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
      hideInForm: true,
      hideInSearch: true,
      width: 160,
    },
  ];

  // 跳转到分类项管理页面
  const handleGoToItems = (record: ICategory) => {
    navigate(`/system/category/item?categoryId=${record.id}&categoryName=${encodeURIComponent(record.name || '')}`);
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>{t('system.category.page.title')}</Title>
        <Text type="secondary">{t('system.category.page.description')}</Text>
      </div>
      <XinTable<ICategory>
        api="/system/category"
        columns={columns}
        rowKey="id"
        accessName="system.category"
        formProps={{
          grid: true,
          colProps: { span: 12 },
          rowProps: { gutter: [30, 0] },
          layout: 'vertical',
        }}
        modalProps={{ width: 600 }}
        searchProps={false}
        operateProps={{
          fixed: 'right',
          width: 180,
        }}
        scroll={{ x: 1000 }}
        operateRender={(record, dom) => [
          <Tooltip title={t('system.category.manageItems')} key="items">
            <Button
              type="default"
              icon={<UnorderedListOutlined />}
              size="small"
              onClick={() => handleGoToItems(record)}
            />
          </Tooltip>,
          dom.edit,
          dom.del,
        ]}
      />
    </>
  );
}