import { useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { UserCircleIcon } from '@heroicons/react/24/outline';
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',
  gap: 12,
  padding: '9px 0',
  fontSize: 13.5,
  color: 'var(--text-2)',
};

/** رنگ چیپِ «وضعیت پرداخت» بر اساس نسبت پرداخت به جمع کل. */
const STATE_TONE: Record<string, { fg: string; bg: string }> = {
  'بدون پرداخت': { fg: 'var(--text-2)', bg: 'var(--surface-3)' },
  'پرداخت جزئی': { fg: 'var(--warning)', bg: 'var(--warning-bg)' },
  'تسویه کامل': { fg: 'var(--success)', bg: 'var(--success-bg)' },
};

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

  // وقتی صفحه‌ی میزبان نوبت را ندارد (مثل ردیف لیست) خودمان جزئیات را می‌گیریم:
  // مبلغ ویزیت و قیمت سرویس‌ها فقط در 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;

  // جمع کل تا لحظه‌ای که کاربر مبلغ را دستی تغییر ندهد پیش‌فرضِ «پرداخت کامل» است؛
  // نوبت هنوز session ندارد، پس باقی‌مانده‌اش برابر کل هزینه است.
  useEffect(() => {
    if (!open || touched || total <= 0) return;
    setAmountToman(rialToToman(total));
  }, [open, touched, total]);

  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');
    setTouched(false);
  }

  /** تغییر دستی مبلغ: از این به بعد پیش‌فرضِ خودکار دیگر روی فیلد ننشیند. */
  function changeAmount(next: number) {
    setTouched(true);
    setAmountToman(next);
  }

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

  const loading = detailQuery.isLoading && !appointment;

  return (
    <Modal
      open={open}
      title="قطعی کردن نوبت"
      size="md"
      onClose={handleClose}
      footer={
        <>
          <button type="button" className="btn ghost" 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 && (
            <div
              style={{
                display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16,
                padding: '10px 14px', borderRadius: 'var(--r-sm)',
                background: 'var(--primary-soft)',
              }}
            >
              <UserCircleIcon style={{ width: 20, height: 20, color: 'var(--primary-700)', flexShrink: 0 }} />
              <span style={{ fontSize: 13.5, color: 'var(--text-2)' }}>بیمار</span>
              <strong style={{ fontSize: 14, color: 'var(--primary-700)' }}>{appt.patient_name}</strong>
            </div>
          )}

          {/* هزینه‌ها */}
          <div
            style={{
              border: '1px solid var(--border)', borderRadius: 'var(--r)',
              padding: '4px 14px 10px', marginBottom: 20,
            }}
          >
            <div style={rowStyle}>
              <span>ویزیت</span>
              <strong style={{ color: 'var(--text)' }}>{formatRial(visitPrice)}</strong>
            </div>
            {services.map((s) => (
              <div key={s.uuid} style={{ ...rowStyle, borderTop: '1px solid var(--border)' }}>
                <span>{s.name}</span>
                <strong style={{ color: 'var(--text)' }}>{formatRial(Number(s.price_rials ?? 0))}</strong>
              </div>
            ))}
            <div
              style={{
                ...rowStyle, borderTop: '1px solid var(--border)', marginTop: 2,
                paddingTop: 12, fontSize: 14, fontWeight: 700, color: 'var(--text)',
              }}
            >
              <span>جمع کل</span>
              <strong style={{ fontSize: 16, color: 'var(--primary)' }}>{formatRial(total)}</strong>
            </div>
          </div>

          {/* پرداخت */}
          <div
            style={{
              display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
              gap: 14, marginBottom: 10,
            }}
          >
            <div className="field-block">
              <label>روش پرداخت</label>
              <SearchableSelect
                value={method}
                onChange={(v) => setMethod(String(v ?? 'cash'))}
                options={METHOD_OPTIONS}
                placeholder="روش پرداخت"
                height={40}
              />
            </div>

            <div className="field-block">
              <label>مبلغ پرداختی (تومان)</label>
              <div className="field" style={overpaid ? { borderColor: 'var(--danger)' } : undefined}>
                <PriceInput value={amountToman} onChange={changeAmount} suffix="تومان" max={rialToToman(total)} />
              </div>
              <span className="field-hint">باقی‌مانده پس از این پرداخت: {formatRial(remaining)}</span>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
            <button
              type="button"
              className="btn soft sm"
              onClick={() => changeAmount(rialToToman(total))}
            >
              پرداخت کامل
            </button>
            {amountToman > 0 && (
              <button type="button" className="btn ghost sm" onClick={() => changeAmount(0)}>
                بدون پرداخت
              </button>
            )}
          </div>

          {overpaid && (
            <p className="field-err" style={{ marginBottom: 14 }}>
              مبلغ پرداخت از جمع کل بیشتر است.
            </p>
          )}

          {/* خلاصه */}
          <div
            style={{
              background: 'var(--surface-2)', border: '1px solid var(--border)',
              borderRadius: 'var(--r)', padding: '4px 14px 10px',
            }}
          >
            <div style={rowStyle}>
              <span>پرداخت‌شده</span>
              <strong style={{ color: 'var(--text)' }}>{formatRial(Math.min(amountRials, total))}</strong>
            </div>
            <div style={{ ...rowStyle, borderTop: '1px solid var(--border)' }}>
              <span>باقی‌مانده</span>
              <strong style={{ color: remaining > 0 ? 'var(--danger)' : 'var(--success)' }}>
                {formatRial(remaining)}
              </strong>
            </div>
            <div style={{ ...rowStyle, borderTop: '1px solid var(--border)' }}>
              <span>وضعیت پرداخت</span>
              <span
                style={{
                  padding: '4px 12px', borderRadius: 'var(--r-pill)',
                  fontSize: 12.5, fontWeight: 700,
                  color: STATE_TONE[paymentState].fg,
                  background: STATE_TONE[paymentState].bg,
                }}
              >
                {paymentState}
              </span>
            </div>
          </div>
        </>
      )}
    </Modal>
  );
}