import { formatRial } from '../../lib/utils';
import type { SessionCardData } from '../SessionServiceCard';
import { METHOD_LABELS } from './PaymentStep';

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;
  onBack: () => void;
  onFinish: () => void;
}

/**
 * گام «جزییات» — پورت tauri Step3Final با دیتای واقعی:
 * خلاصه‌ی سرویس/هزینه/تخفیف + لیست پرداخت‌شده‌ها + مانده. مشترک بین
 * NewSessionPage (ویزارد سه‌گامه) و SessionPaymentPage (دوگامه).
 */
export default function DetailsStep({ session, onBack, onFinish }: Props) {
  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 serviceNames = (session.services ?? []).map((s) => s.service_name || s.name).filter(Boolean) as string[];
  if ((session.visit_price_rials ?? 0) > 0) serviceNames.unshift('ویزیت');

  return (
    <>
      {/* گام جزییات — پورت tauri Step3Final با دیتای واقعی */}
      <div dir="rtl" className="dark:border-[#404040] dark:bg-[#222433]" style={{ padding: 16, border: '1px dashed #A7A7E0' }}>
        <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>

        <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" style={{ ...primaryBtn, flex: 1 }} onClick={onFinish}>صدور فاکتور</button>
      </div>
    </>
  );
}