'use client';

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import { reviewTrainingRecordMutation } from '../api/review-mutations';
import type { TrainingRecord } from '../api/types';

interface TrainingRecordReviewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  record: TrainingRecord;
  status: 'approved' | 'needs_revision';
}

const titleMap = {
  approved: 'อนุมัติรายการอบรม',
  needs_revision: 'ตีกลับรายการอบรม'
} as const;

export function TrainingRecordReviewDialog({
  open,
  onOpenChange,
  record,
  status
}: TrainingRecordReviewDialogProps) {
  const [reviewerNote, setReviewerNote] = useState(record.reviewer_note ?? '');

  const reviewMutation = useMutation({
    ...reviewTrainingRecordMutation,
    onSuccess: () => {
      toast.success('อัปเดตผลการตรวจสอบเรียบร้อยแล้ว');
      onOpenChange(false);
    },
    onError: () => {
      toast.error('ไม่สามารถอัปเดตผลการตรวจสอบได้');
    }
  });

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{titleMap[status]}</DialogTitle>
          <DialogDescription>
            ตรวจสอบรายการอบรมของ {record.user_name} - {record.course_name}
          </DialogDescription>
        </DialogHeader>
        <div className='space-y-2'>
          <label htmlFor='reviewer-note' className='text-sm font-medium'>
            หมายเหตุจากผู้ตรวจ
          </label>
          <textarea
            id='reviewer-note'
            aria-label='หมายเหตุจากผู้ตรวจ'
            className='border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-28 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
            placeholder='ระบุหมายเหตุเพิ่มเติม'
            value={reviewerNote}
            onChange={(event) => setReviewerNote(event.target.value)}
          />
        </div>
        <DialogFooter>
          <Button variant='outline' onClick={() => onOpenChange(false)} className='w-full sm:w-auto'>
            ยกเลิก
          </Button>
          <Button
            className='w-full sm:w-auto'
            onClick={() =>
              reviewMutation.mutate({
                id: record.id,
                values: {
                  status,
                  reviewerNote,
                  ...(status === 'needs_revision'
                    ? { rejectReason: reviewerNote || 'ขอให้แก้ไขข้อมูลเพิ่มเติม' }
                    : {})
                }
              })
            }
            isLoading={reviewMutation.isPending}
          >
            ยืนยัน
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
