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

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 { preview, loading } = useCancellationPreview(open ? appointmentUuid : undefined, by);
  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,
          padding: 12,
          borderRadius: 'var(--r-sm)',
          background: 'var(--surface-2)',
          fontSize: 13,
          lineHeight: 1.9,
        }}
      >
        {loading ? (
          <span style={{ color: 'var(--text-3)' }}>در حال محاسبهٔ پیامد لغو…</span>
        ) : !preview ? (
          <span style={{ color: 'var(--text-3)' }}>
            پیامد مالی لغو در دسترس نیست؛ لغو انجام می‌شود ولی مبلغ را دستی بررسی کنید.
          </span>
        ) : (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: 'var(--text-2)' }}>جریمهٔ لغو</span>
              <strong style={{ color: preview.penalty_rials > 0 ? 'var(--danger)' : 'var(--success)' }}>
                {preview.penalty_rials > 0 ? formatRial(preview.penalty_rials) : 'بدون جریمه'}
              </strong>
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: 'var(--text-2)' }}>مبلغ پرداخت‌شده</span>
              <span>{formatRial(preview.paid_rials)}</span>
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: 'var(--text-2)' }}>بازگشت اعتبار پکیج</span>
              <span>{preview.credit_refundable ? 'بله' : 'خیر'}</span>
            </div>

            {preview.within_free_window && (
              <div style={{ color: 'var(--success)' }}>در بازهٔ لغو رایگان است.</div>
            )}

            {preview.notes.map((note, i) => (
              <div key={i} style={{ color: 'var(--text-3)', fontSize: 12 }}>
                {note}
              </div>
            ))}
          </>
        )}
      </div>

      <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>
  );
}