// src/pages/DashboardPage/BillingPage/PrintableInvoice.tsx
// The formal, print-only rendering of one invoice (letterhead + meta + bill-to + line table + totals),
// assembled by invoicePrintModel and revealed only under @media print (see index.css.printable-invoice).
// Kept plain semantic HTML (a real <table> for the lines) so the browser's print output is clean and
// black-on-white. The org logo resolves through usePhotoUrl (org thumbnails are base64, so synchronous).
import { createPortal } from 'react-dom';
import type { Invoice } from 'fhir/r4';
import { useAuthServiceContext } from '../../../services';
import { usePhotoUrl } from '../../../hooks/usePhotoUrl';
import { buildInvoicePrintModel, type InvoiceLedger } from './invoicePrintModel';

/** `ledger` is the payment ledger read for THIS invoice; without one the bill says payments are not shown. */
const PrintableInvoice = ({ invoice, ledger }: { invoice: Invoice; ledger?: InvoiceLedger }) => {
    const { currentOrganization } = useAuthServiceContext();
    const model = buildInvoicePrintModel(invoice, currentOrganization, ledger);
    const { url: logoUrl } = usePhotoUrl(model.logo, 'organization');
    const showLogo = Boolean(model.logo);

    // Portal to <body> so the absolute-positioned print block isn't anchored inside the Radix dialog's
    // transformed container (which would offset it on the printed page). The print CSS is intentionally
    // unscoped (.printable-invoice), so it applies here just the same.
    return createPortal(
        <div className="printable-invoice" aria-hidden="true">
            <header className="pi-header">
                {showLogo && <img className="pi-logo" src={logoUrl} alt="" />}
                <div className="pi-org">
                    {model.orgName && <div className="pi-org-name">{model.orgName}</div>}
                    {model.orgAddress && <div>{model.orgAddress}</div>}
                    {model.orgPhone && <div>{model.orgPhone}</div>}
                </div>
            </header>

            <div className="pi-meta">
                <div>
                    <div className="pi-title">Invoice {model.invoiceNumber}</div>
                    <div>Invoice date: {model.dateText}</div>
                    <div>Status: {model.statusLabel}</div>
                </div>
                <div className="pi-billto">
                    <div className="pi-label">Bill to</div>
                    <div>{model.patientName}</div>
                </div>
            </div>

            <table className="pi-lines">
                <thead>
                    <tr><th>Description</th><th>Qty</th><th>Unit</th><th>Amount</th></tr>
                </thead>
                <tbody>
                    {model.lines.map((line, i) => (
                        <tr key={i}>
                            <td>{line.description}</td>
                            <td>{line.quantity}</td>
                            <td>{line.unitPrice}</td>
                            <td>{line.amount}</td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <div className="pi-totals">
                {model.tax !== undefined && (
                    <>
                        <div><span>Subtotal</span><span>{model.subtotal}</span></div>
                        <div><span>Tax</span><span>{model.tax}</span></div>
                    </>
                )}
                <div className="pi-total"><span>Total</span><span>{model.total}</span></div>
            </div>

            {/* What was paid, from the ledger, never from the status; an unread ledger says so. */}
            <section className="pi-payments">
                <div className="pi-label">Payments</div>
                {model.ledger.kind === 'unread' ? (
                    <p>{model.ledger.note}</p>
                ) : (
                    <>
                        {model.ledger.rows.length ? (
                            <table className="pi-lines">
                                <thead>
                                    <tr><th>Paid on</th><th>Amount</th></tr>
                                </thead>
                                <tbody>
                                    {model.ledger.rows.map((row, i) => (
                                        <tr key={i}><td>{row.date}</td><td>{row.amount}</td></tr>
                                    ))}
                                </tbody>
                            </table>
                        ) : (
                            <p>No payments recorded.</p>
                        )}
                        <div className="pi-totals">
                            <div><span>Total paid</span><span>{model.ledger.paid}</span></div>
                            <div className="pi-total"><span>Balance due</span><span>{model.ledger.balance}</span></div>
                        </div>
                    </>
                )}
            </section>
        </div>,
        document.body,
    );
};

export default PrintableInvoice;