src/features/tasks/reminder.tsx

'use client';
import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { App, Button, Card, InputNumber, Space } from 'antd';
import dayjs from 'dayjs';
import { useTRPC } from '@/trpc/client';
import { useTeam } from '@/features/teams/team-workspace';
export function ReminderSettings({
  id,
  version,
  dueAt,
  inactive,
}: {
  id: string;
  version: number;
  dueAt: string | null;
  inactive: boolean;
}) {
  const team = useTeam();
  const trpc = useTRPC();
  const cache = useQueryClient();
  const { message } = App.useApp();
  const [minutes, setMinutes] = useState<number | null>(60);
  const schedule = useMutation(
    trpc.task.schedule.mutationOptions({
      async onSuccess() {
        await Promise.all([
          cache.invalidateQueries({ queryKey: trpc.ticket.detail.queryKey() }),
          cache.invalidateQueries({ queryKey: trpc.ticket.events.queryKey() }),
          cache.invalidateQueries({ queryKey: trpc.task.list.queryKey() }),
        ]);
        void message.success('提醒设置已更新');
      },
      onError(error) {
        void message.error(error.message);
        void cache.invalidateQueries({
          queryKey: trpc.ticket.detail.queryKey(),
        });
      },
    }),
  );
  return (
    <Card title="超时提醒">
      <div className="space-y-3">
        <p>
          {inactive
            ? '工单已解决或关闭，提醒已失效。'
            : dueAt
              ? `到期：${dayjs(dueAt).format('YYYY-MM-DD HH:mm')}`
              : '尚未设置提醒'}
        </p>
        {!inactive && (
          <>
            <Space>
              <InputNumber
                aria-label="提醒分钟数"
                min={1}
                max={10080}
                value={minutes}
                onChange={setMinutes}
                disabled={schedule.isPending}
              />
              <span>分钟后提醒</span>
            </Space>
            <Space>
              <Button
                type="primary"
                disabled={!minutes}
                loading={schedule.isPending}
                onClick={() => {
                  if (minutes)
                    schedule.mutate({ teamId: team.id, id, version, minutes });
                }}
              >
                设置提醒
              </Button>
              <Button
                disabled={!dueAt || schedule.isPending}
                onClick={() =>
                  schedule.mutate({
                    teamId: team.id,
                    id,
                    version,
                    minutes: null,
                  })
                }
              >
                取消提醒
              </Button>
            </Space>
          </>
        )}
        <p className="text-xs text-slate-500">
          到期后站内提醒负责人；未分配时提醒团队管理员。新工单默认按优先级计时。
        </p>
      </div>
    </Card>
  );
}