clinicpro/assets/admin/components/appointments/ConfirmAppointmentModal.tsx

import { useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { api } from '../../lib/api';
import type { ApiResponse } from '../../lib/api';
import { formatRial, rialToToman, tomanToRial } from '../../lib/utils';
import Modal from '../ui/Modal';
import PriceInput from '../ui/PriceInput';
import SearchableSelect from '../ui/SearchableSelect';

/** همان چهار روشِ SessionPayment::METHODS در بک‌اند. */
const METHOD_OPTIONS = [
  { value: 'cash', label: 'پرداخت نقدی' },
  { value: 'pos', label: 'پرداخت از طریق کارت خوان' },
  { value: 'card', label: 'کارت به کارت' },
  { value: 'wallet', label: 'پرداخت از طریق کیف پول' },
];

interface ServiceItem {
  uuid: string;
  name: string;
  price_rials?: number | null;
}

interface AppointmentLike {
  uuid: string;
  version?: number;
  visit_price_rials?: number | null;
  service_items?: ServiceItem[] | null;
  patient_name?: string | null;
}

interface Props {
  open: boolean;
  appointmentUuid: string;
  /** اگر صفحه از قبل نوبت را دارد، پاس بده تا درخواست اضافه نرود. */
  appointment?: AppointmentLike | null;
  onClose: () => void;
  /** کلید کوئریِ لیستی که بعد از قطعی‌شدن باید invalidate شود. */
  queryKey?: unknown[];
}

const rowStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '10px 0',
  borderBottom: '1px solid var(--border)',
};

/**
 * «قطعی کردن نوبت» — هزینه‌های نوبت را نشان می‌دهد، پرداخت کامل یا جزئی می‌گیرد و
 * نوبت را از «ثبت شده» به «قطعی شده» می‌برد.
 *
 * سرور همین یک درخواست را اتمیک انجام می‌دهد: وضعیت + پرونده/مراجعه + پرداخت‌ها.
 */
export default function ConfirmAppointmentModal({
  open,
  appointmentUuid,
  appointment,
  onClose,
  queryKey,
}: Props) {
  const qc = useQueryClient();
  const [method, setMethod] = useState('cash');
  const [amountToman, setAmountToman] = useState(0);

  // وقتی صفحه‌ی میزبان نوبت را ندارد (مثل ردیف لیست) خودمان جزئیات را می‌گیریم:
  // مبلغ ویزیت و قیمت سرویس‌ها فقط در detail هستند.
  const detailQuery = useQuery({
    queryKey: ['appointment', appointmentUuid],
    queryFn: () => api.get<ApiResponse<AppointmentLike>>(`/api/v1/appointment/${appointmentUuid}`),
    enabled: open && !appointment,
  });

  const appt: AppointmentLike | null = appointment
    ?? ((detailQuery.data?.data as any)?.data ?? detailQuery.data?.data ?? null);

  const visitPrice = Number(appt?.visit_price_rials ?? 0);
  const services = appt?.service_items ?? [];
  const servicesTotal = useMemo(
    () => services.reduce((sum, s) => sum + Number(s.price_rials ?? 0), 0),
    [services],
  );
  const total = visitPrice + servicesTotal;

  const amountRials = tomanToRial(amountToman);
  const remaining = Math.max(0, total - amountRials);
  const overpaid = amountRials > total;

  const paymentState = amountRials === 0
    ? 'بدون پرداخت'
    : remaining === 0
      ? 'تسویه کامل'
      : 'پرداخت جزئی';

  const confirmMut = useMutation({
    mutationFn: () =>
      api.post<ApiResponse<unknown>>(`/api/v1/appointment/${appointmentUuid}/confirm`, {
        version: appt?.version,
        payments: amountRials > 0 ? [{ method, amount_rials: amountRials }] : [],
      }),
    onSuccess: () => {
      toast.success('نوبت قطعی شد');
      if (queryKey) qc.invalidateQueries({ queryKey });
      qc.invalidateQueries({ queryKey: ['appointment', appointmentUuid] });
      qc.invalidateQueries({ queryKey: ['appointment-events', appointmentUuid] });
      reset();
      onClose();
    },
    onError: (e: any) => toast.error(e?.message || 'قطعی کردن نوبت ناموفق بود'),
  });

  function reset() {
    setAmountToman(0);
    setMethod('cash');
  }

  function handleClose() {
    reset();
    onClose();
  }

  const loading = detailQuery.isLoading && !appointment;

  return (
    <Modal
      open={open}
      title="قطعی کردن نوبت"
      size="md"
      onClose={handleClose}
      footer={
        <>
          <button type="button" className="btn" onClick={handleClose}>
            انصراف
          </button>
          <button
            type="button"
            className="btn primary"
            disabled={loading || overpaid || confirmMut.isPending}
            onClick={() => confirmMut.mutate()}
          >
            {confirmMut.isPending ? 'در حال ثبت…' : 'تأیید و قطعی کردن'}
          </button>
        </>
      }
    >
      {loading ? (
        <p style={{ color: 'var(--text-2)' }}>در حال دریافت اطلاعات نوبت…</p>
      ) : (
        <>
          {appt?.patient_name && (
            <p style={{ marginBottom: 12, color: 'var(--text-2)' }}>بیمار: {appt.patient_name}</p>
          )}

          <div style={{ marginBottom: 18 }}>
            <div style={rowStyle}>
              <span>ویزیت</span>
              <strong>{formatRial(visitPrice)}</strong>
            </div>
            {services.map((s) => (
              <div key={s.uuid} style={rowStyle}>
                <span>{s.name}</span>
                <strong>{formatRial(Number(s.price_rials ?? 0))}</strong>
              </div>
            ))}
            <div style={{ ...rowStyle, borderBottom: 'none', fontSize: 16 }}>
              <span>جمع کل</span>
              <strong>{formatRial(total)}</strong>
            </div>
          </div>

          <div className="field" style={{ marginBottom: 12 }}>
            <label>روش پرداخت</label>
            <SearchableSelect
              value={method}
              onChange={(v) => setMethod(String(v ?? 'cash'))}
              options={METHOD_OPTIONS}
              placeholder="روش پرداخت"
            />
          </div>

          <div className="field" style={{ marginBottom: 12 }}>
            <label>مبلغ پرداختی (تومان)</label>
            <PriceInput value={amountToman} onChange={setAmountToman} suffix="تومان" />
            <button
              type="button"
              className="btn sm"
              style={{ marginTop: 8 }}
              onClick={() => setAmountToman(rialToToman(total))}
            >
              پرداخت کامل
            </button>
          </div>

          {overpaid && (
            <p style={{ color: 'var(--danger)', marginBottom: 12 }}>
              مبلغ پرداخت از جمع کل بیشتر است.
            </p>
          )}

          <div style={{ background: 'var(--surface-2)', borderRadius: 'var(--r-sm)', padding: 12 }}>
            <div style={rowStyle}>
              <span>پرداخت‌شده</span>
              <strong>{formatRial(Math.min(amountRials, total))}</strong>
            </div>
            <div style={rowStyle}>
              <span>باقی‌مانده</span>
              <strong>{formatRial(remaining)}</strong>
            </div>
            <div style={{ ...rowStyle, borderBottom: 'none' }}>
              <span>وضعیت پرداخت</span>
              <strong>{paymentState}</strong>
            </div>
          </div>
        </>
      )}
    </Modal>
  );
}