import React from 'react';
import { formatDate, formatRial } from '../lib/utils';
import { useAppointmentInvoice } from '../hooks/useAppointmentInvoice';

interface Props {
  appointmentUuid: string;
}

/**
 * فاکتور تفکیک‌شدهٔ نوبت.
 *
 * اعدادش snapshot لحظهٔ ثبت‌اند، نه محاسبهٔ امروز: تغییر تعرفه هرگز فاکتور صادرشده را
 * عوض نمی‌کند (قانون پنجم مستند). همین جمله زیر کارت هم نوشته می‌شود، چون کاربری که
 * قیمت را دیروز عوض کرده و امروز عدد قدیمی می‌بیند وگرنه فکر می‌کند سیستم خراب است.
 */
export default function AppointmentInvoiceCard({ appointmentUuid }: Props) {
  const { invoice, loading, missing } = useAppointmentInvoice(appointmentUuid);

  if (loading) {
    return (
      <div className="card" style={{ fontSize: 13, color: 'var(--text-3)' }}>
        در حال بارگذاری فاکتور…
      </div>
    );
  }

  // نبودِ فاکتور خطا نیست: نوبتی که هنوز ثبت نهایی نشده، فاکتوری هم ندارد.
  if (missing || !invoice) {
    return (
      <div className="card" style={{ fontSize: 13, color: 'var(--text-3)' }}>
        برای این نوبت فاکتوری ثبت نشده است.
      </div>
    );
  }

  const rows: { label: string; value: number; muted?: boolean }[] = [
    { label: 'قیمت پایه', value: invoice.base_rials },
    { label: 'آیتم‌های اضافه', value: invoice.items_rials },
    { label: 'تخفیف', value: -invoice.discount_rials },
    { label: 'سهم بیمهٔ پایه', value: -invoice.insurance_base_rials },
    { label: 'سهم بیمهٔ تکمیلی', value: -invoice.insurance_supplementary_rials },
    { label: 'مالیات', value: invoice.tax_rials },
  ];

  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <h3 style={{ fontSize: 15, margin: 0 }}>فاکتور</h3>
        {invoice.created_at !== undefined && (
          <span style={{ fontSize: 12, color: 'var(--text-3)' }}>
            ثبت‌شده در {formatDate(invoice.created_at)}
          </span>
        )}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {rows
          .filter((row) => row.value !== 0)
          .map((row) => (
            <div
              key={row.label}
              style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}
            >
              <span style={{ color: 'var(--text-2)' }}>{row.label}</span>
              <span style={{ color: row.value < 0 ? 'var(--success)' : undefined }}>
                {formatRial(Math.abs(row.value))}
                {row.value < 0 ? ' −' : ''}
              </span>
            </div>
          ))}

        {/* فاکتور قدیمی ممکن است ریز تخفیف نداشته باشد؛ نبودنش نباید کل صفحه را ببندد. */}
        {(invoice.breakdown?.discounts ?? []).map((line, index) => (
          <div
            key={index}
            style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-3)' }}
          >
            <span>{line.label}</span>
            <span>{formatRial(Math.abs(line.rials))}</span>
          </div>
        ))}
      </div>

      <div
        style={{
          borderTop: '1px solid var(--border)',
          paddingTop: 10,
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: 15,
          fontWeight: 600,
        }}
      >
        <span>مبلغ نهایی</span>
        <span>{formatRial(invoice.final_rials)}</span>
      </div>

      {invoice.deposit_rials > 0 && (
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span style={{ color: 'var(--text-2)' }}>بیعانه</span>
          <span>{formatRial(invoice.deposit_rials)}</span>
        </div>
      )}

      <span style={{ fontSize: 12, color: 'var(--text-3)' }}>
        قیمت‌ها بر اساس تاریخ همین نوبت محاسبه و ثبت شده‌اند؛ تغییر بعدی تعرفه این فاکتور
        را عوض نمی‌کند.
      </span>
    </div>
  );
}