import React, { useState } from 'react';
import ConfirmDialog from './ui/ConfirmDialog';
import { useCancelAppointment } from '../hooks/useCancellation';

interface Props {
  open: boolean;
  appointmentUuid: string;
  /** چه کسی لغو می‌کند — وضعیت نهایی نوبت از همین می‌آید. */
  by?: 'user' | 'doctor';
  onClose: () => void;
  onCancelled?: () => void;
}

/** لغو نوبت با تأیید و دلیل اختیاری. */
export default function CancelAppointmentDialog({
  open,
  appointmentUuid,
  by = 'doctor',
  onClose,
  onCancelled,
}: Props) {
  const [reason, setReason] = useState('');
  const cancel = useCancelAppointment();

  const close = () => {
    setReason('');
    onClose();
  };

  return (
    <ConfirmDialog
      open={open}
      title="لغو نوبت"
      message="آیا از لغو این نوبت اطمینان دارید؟"
      confirmLabel="لغو نوبت"
      danger
      loading={cancel.isPending}
      onConfirm={() =>
        cancel.mutate(
          { uuid: appointmentUuid, by, reason },
          {
            onSuccess: () => {
              close();
              onCancelled?.();
            },
          },
        )
      }
      onCancel={close}
    >
      <div style={{ marginTop: 14 }}>
        <label className="cp-label mb-2" htmlFor="cancel-reason">
          دلیل لغو (اختیاری)
        </label>
        <textarea
          id="cancel-reason"
          className="cp-input"
          rows={2}
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          placeholder="دلیل لغو نوبت را وارد کنید..."
          style={{ width: '100%', resize: 'vertical' }}
        />
      </div>
    </ConfirmDialog>
  );
}