import PatientInvoiceList from '../BillingPage/PatientInvoiceList.tsx';

// My Invoices - the patient's own billing surface, as a STANDALONE page.
//
// It used to be a child route of PatientPage, whose patient branch prints a fixed
// "My Records / View and manage your personal records" header for every child route. So opening
// My Invoices announced itself as My Records. Invoices are billing, not a clinical record, and
// "My Invoices" is its own top-level sidebar item - it gets its own page and its own heading.
//
// Mounted OUTSIDE the shared renderPatientRoutes() helper, for the same reason MyHistoryPage is:
// that helper is reused by the STAFF patient view (/dashboard/patients/:id/*), where the invoices
// route legitimately does belong under the patient-record shell. Only the patient-self mount moves.
// PatientInvoiceList resolves its patient from usePatientServiceContext - an app-level context, not
// PatientPage's outlet - so it needs no wrapper to work here.
//
// canManage={false} keeps it read-only (no New Invoice / status actions); patientPay enables the
// portal-only "Pay now" button and the return-from-redirect poll. That pairing is deliberate and
// belongs ONLY to this mount - the staff view of the same list must never get Pay now.
const MyInvoicesPage = () => (
    <div>
        <div className="ahr-bills-head">
            <h1 className="ak-page-title ahr-bills-title">Bills &amp; payments</h1>
            <p className="ak-page-title__sub ahr-bills-sub">Bills from the practices involved in your care.</p>
        </div>

        <PatientInvoiceList canManage={false} patientPay={true} />
    </div>
);

export default MyInvoicesPage;