medreport_mrb2b/app/doctor/_components/analysis-feedback.tsx

import React, { useState } from 'react';

import { giveFeedbackAction } from '@/packages/features/doctor/src/lib/server/actions/doctor-server-actions';
import {
  DoctorFeedback,
  Order,
  Patient,
} from '@/packages/features/doctor/src/lib/server/schema/doctor-analysis-detail-view.schema';
import {
  DoctorAnalysisFeedbackForm,
  doctorAnalysisFeedbackFormSchema,
} from '@/packages/features/doctor/src/lib/server/schema/doctor-analysis.schema';
import ConfirmationModal from '@/packages/shared/src/components/confirmation-modal';
import { useUser } from '@/packages/supabase/src/hooks/use-user';
import { zodResolver } from '@hookform/resolvers/zod';
import { useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';

import { Spinner } from '@kit/ui/makerkit/spinner';
import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@kit/ui/shadcn/form';
import { toast } from '@kit/ui/shadcn/sonner';
import { Textarea } from '@kit/ui/shadcn/textarea';

const AnalysisFeedback = ({
  feedback,
  patient,
  order,
  aiDoctorFeedback,
  timestamp,
  recommendations,
  isRecommendationsEdited,
}: {
  feedback?: DoctorFeedback;
  patient: Patient;
  order: Order;
  aiDoctorFeedback?: string;
  timestamp?: string;
  recommendations: string[];
  isRecommendationsEdited: boolean;
}) => {
  const [isDraftSubmitting, setIsDraftSubmitting] = useState(false);
  const [isSubmittingFeedback, setIsSubmittingFeedback] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const { data: user } = useUser();
  const queryClient = useQueryClient();

  const form = useForm({
    resolver: zodResolver(doctorAnalysisFeedbackFormSchema),
    reValidateMode: 'onChange',
    defaultValues: {
      feedbackValue: feedback?.value ?? aiDoctorFeedback ?? '',
      userId: patient.userId,
    },
  });

  const isReadOnly =
    !!feedback?.doctor_user_id && feedback?.doctor_user_id !== user?.id;

  const handleDraftSubmit = async (e: React.FormEvent) => {
    setIsDraftSubmitting(true);
    e.preventDefault();

    form.formState.errors.feedbackValue = undefined;
    const formData = form.getValues();
    await onSubmit(formData, 'DRAFT');
    setIsDraftSubmitting(false);
  };
  const handleCompleteSubmit = form.handleSubmit(async () => {
    setIsConfirmOpen(true);
  });

  const onSubmit = async (
    data: DoctorAnalysisFeedbackForm,
    status: 'DRAFT' | 'COMPLETED',
  ) => {
    setIsConfirmOpen(false);
    setIsSubmittingFeedback(true);

    const result = await giveFeedbackAction({
      ...data,
      analysisOrderId: order.analysisOrderId,
      status,
      patientId: patient.userId,
      timestamp,
      recommendations,
      isRecommendationsEdited,
    });

    if (!result.success) {
      return toast.error(<Trans i18nKey="common:genericServerError" />);
    }

    setIsSubmittingFeedback(false);

    queryClient.invalidateQueries({
      predicate: (query) => query.queryKey.includes('doctor-jobs'),
    });

    return toast.success(<Trans i18nKey={'doctor:updateFeedbackSuccess'} />);
  };

  const confirmComplete = form.handleSubmit(async (data) => {
    await onSubmit(data, 'COMPLETED');
  });

  return (
    <>
      {!isReadOnly && (
        <Form {...form}>
          <form className="space-y-4 lg:w-1/2">
            <FormField
              control={form.control}
              name="feedbackValue"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Textarea
                      className="min-h-[200px]"
                      {...field}
                      disabled={isDraftSubmitting || isSubmittingFeedback}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="xs:flex block justify-end gap-2 space-y-2">
              <Button
                type="button"
                variant="outline"
                onClick={handleDraftSubmit}
                disabled={
                  isReadOnly || isDraftSubmitting || form.formState.isSubmitting
                }
                className="xs:w-auto w-full text-xs"
              >
                <Trans i18nKey="common:saveAsDraft" />
              </Button>
              <Button
                type="button"
                onClick={handleCompleteSubmit}
                disabled={
                  isReadOnly || isDraftSubmitting || form.formState.isSubmitting
                }
                className="xs:w-1/4 w-full"
              >
                {isDraftSubmitting || form.formState.isSubmitting ? (
                  <Spinner />
                ) : (
                  <Trans i18nKey="common:save" />
                )}
              </Button>
            </div>
          </form>
        </Form>
      )}
      <ConfirmationModal
        isOpen={isConfirmOpen}
        onClose={() => setIsConfirmOpen(false)}
        onConfirm={confirmComplete}
        titleKey="doctor:confirmFeedbackModal.title"
        descriptionKey="doctor:confirmFeedbackModal.description"
      />
    </>
  );
};

export default AnalysisFeedback;