clinicpro/assets/admin/components/session/DetailsStep.tsx

import { toast } from 'sonner';
import { formatRial, formatDateTime } from '../../lib/utils';
import type { SessionCardData } from '../SessionServiceCard';
import { METHOD_LABELS } from './PaymentStep';
import { useIssueInvoice } from '../../hooks/useIssueInvoice';

const primaryBtn: React.CSSProperties = { background: '#5559CE', color: '#fff', border: 'none', borderRadius: 4, height: 46, fontSize: 14, fontWeight: 500, cursor: 'pointer' };
const ghostBtn: React.CSSProperties = { background: 'transparent', color: '#5559CE', border: '1px solid #5559CE', borderRadius: 4, height: 46, fontSize: 14, fontWeight: 500, cursor: 'pointer' };

interface Props {
  session: SessionCardData;
  /** برای invalidate شدن لیست sessions بعد از صدور فاکتور. */
  recordUuid?: string;
  onBack: () => void;
  onFinish: () => void;
}

/**
 * گام «جزییات» — پورت tauri Step3Final با دیتای واقعی:
 * خلاصه‌ی سرویس/هزینه/تخفیف + لیست پرداخت‌شده‌ها + مانده. مشترک بین
 * NewSessionPage (ویزارد سه‌گامه) و SessionPaymentPage (دوگامه).
 * «صدور فاکتور» فاکتور را واقعاً صادر می‌کند (create + finalize) و بعد onFinish.
 */
export default function DetailsStep({ session, recordUuid, onBack, onFinish }: Props) {
  const issueMut = useIssueInvoice(recordUuid);
  const issue = () => {
    if (session.invoice_uuid) { onFinish(); return; }
    issueMut.mutate(session.uuid, {
      onSuccess: () => onFinish(),
      onError: () => toast.error('صدور فاکتور ناموفق بود'),
    });
  };
  const finalPrice = session.final_price_rials ?? 0;
  const discountRials = session.discount_rials ?? 0;
  const debt = session.patient_debt_rials ?? 0;
  const payments = session.payments ?? [];
  const visitPrice = session.visit_price_rials ?? 0;
  const serviceNames = (session.services ?? []).map((s) => s.service_name || s.name).filter(Boolean) as string[];
  if (visitPrice > 0) serviceNames.unshift('ویزیت');

  // زمان مراجعه: زمان واقعی نوبت؛ در نبود آن، زمان ثبت پرونده.
  const visitAt = session.session_at ?? session.created_at ?? null;

  // آیتم‌های هزینه‌ی تفکیک‌شده: ویزیت + هر سرویس، با جمع کل.
  const costItems: Array<{ label: string; rials: number }> = [];
  if (visitPrice > 0) costItems.push({ label: 'ویزیت', rials: visitPrice });
  (session.services ?? []).forEach((s) => {
    costItems.push({
      label: (s.service_name || s.name) ?? 'سرویس',
      rials: s.line_total_rials ?? (s.price_rials ?? 0) * (s.quantity ?? 1),
    });
  });

  return (
    <>
      {/* گام جزییات — پورت tauri Step3Final با دیتای واقعی */}
      <div dir="rtl" className="dark:border-[#404040] dark:bg-[#222433]" style={{ padding: 16, border: '1px dashed #A7A7E0' }}>
        {visitAt && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 16 }}>
            <span className="dark:text-[#A1A1A1]" style={{ fontSize: 13, color: '#616161' }}>تاریخ و ساعت مراجعه:</span>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#2f2f2f' }}>{formatDateTime(visitAt)}</span>
          </div>
        )}

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 32, marginBottom: 16 }}>
          <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#2f2f2f' }}>
            {serviceNames.length ? serviceNames.join(' - ') : 'ویزیت'}
          </span>
          <span className="dark:bg-[#404040]" style={{ width: 1, height: 38, background: '#E0E0E0' }} />
          <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>{session.doctor_name || '—'}</span>
        </div>

        {costItems.length > 0 && (
          <div className="dark:border-[#404040]" style={{ marginBottom: 16, borderTop: '1px solid #EEE', borderBottom: '1px solid #EEE', padding: '4px 0' }}>
            {costItems.map((it, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0' }}>
                <span className="dark:text-[#A1A1A1]" style={{ fontSize: 13, color: '#616161' }}>{it.label}</span>
                <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>{formatRial(it.rials)}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0 4px', borderTop: '1px dashed #E0E0E0' }}>
              <span className="dark:text-[#D7D8ED]" style={{ fontSize: 13, fontWeight: 700, color: '#2f2f2f' }}>جمع کل</span>
              <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 700, color: '#2f2f2f' }}>{formatRial(finalPrice)}</span>
            </div>
          </div>
        )}

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 72, marginBottom: 16 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>هزینه سرویس:</span>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>{formatRial(finalPrice)}</span>
          </span>
          <span className="dark:bg-[#404040]" style={{ width: 1, height: 38, background: '#E0E0E0' }} />
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>تخفیف:</span>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 500, color: '#525252' }}>{formatRial(discountRials)}</span>
          </span>
        </div>

        <span className="dark:text-[#6A6AD9]" style={{ fontSize: 13, fontWeight: 600, color: '#5559CE', display: 'block', marginBottom: 12 }}>پرداخت شده ها:</span>
        {payments.length === 0 ? (
          <span className="dark:text-[#A1A1A1]" style={{ fontSize: 13, color: '#6B7280' }}>پرداختی ثبت نشده است</span>
        ) : payments.map((p) => (
          <div key={p.uuid} className="dark:border-[#404040]" style={{ display: 'flex', alignItems: 'center', gap: 56, padding: '8px 0', borderBottom: '1px solid #EEE' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className="dark:bg-[#6A6AD9]" style={{ width: 6, height: 6, borderRadius: '50%', background: '#5559CE', flexShrink: 0 }} />
              <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#525252' }}>{METHOD_LABELS[p.method] ?? p.method}</span>
            </span>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#111827' }}>مبلغ: {formatRial(p.amount_rials)}</span>
          </div>
        ))}

        <div style={{ display: 'flex', width: '100%', justifyContent: 'flex-end', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16 }}>
            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#525252' }}>مبلغ باقی مانده:</span>
            <span className="dark:text-[#FF5252]" style={{ fontSize: 14, fontWeight: 600, color: '#d32f2f' }}>{formatRial(debt)}</span>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 16, width: '100%', maxWidth: 320, margin: '16px auto 0' }}>
        <button type="button" style={{ ...ghostBtn, flex: 1 }} onClick={onBack}>انصراف</button>
        <button type="button" disabled={issueMut.isPending} style={{ ...primaryBtn, flex: 1 }} onClick={issue}>
          {issueMut.isPending ? 'در حال صدور…' : 'صدور فاکتور'}
        </button>
      </div>
    </>
  );
}