// Invoices — URL `/invoices`. Lists the tenant's invoice history live from
// `billing.invoices`. Each row's amount/status is shown; "View" / "PDF" link OUT
// to the provider's own hosted pages (`hostedUrl` / `pdfUrl`) — the portal never
// renders an invoice document itself.
import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { useSubscription } from '@voltro/client'
import { T, useLocale } from '@voltro/i18n'
import { getCatalog } from '../../../locales/index'
import { formatMoney, type Invoice } from '../../../lib/api'

export const renderMode = 'ssr' as const

export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
  title: getCatalog(locale)['meta.invoices.title'],
})

export default function Invoices(): ReactNode {
  const locale = useLocale()
  const { data } = useSubscription<{ invoices: ReadonlyArray<Invoice> }>('app', 'billing.invoices')
  const invoices = data?.invoices ?? []

  return (
    <section>
      <h1><T id="invoices.heading" /></h1>
      {invoices.length === 0 ? (
        <p className="empty"><T id="invoices.empty" /></p>
      ) : (
        <ul className="rows" style={{ marginTop: '1.25rem' }}>
          {invoices.map((inv) => (
            <li key={inv.providerInvoiceId}>
              <span className="grow">
                {inv.createdAt ? new Date(inv.createdAt).toLocaleDateString() : '—'}
              </span>
              <span>{formatMoney(inv.amountMinor, inv.currency, locale)}</span>
              <span className="tag">{inv.status}</span>
              {inv.hostedUrl ? <a href={inv.hostedUrl} target="_blank" rel="noopener noreferrer"><T id="invoices.view" /></a> : null}
              {inv.pdfUrl ? <a href={inv.pdfUrl} target="_blank" rel="noopener noreferrer"><T id="invoices.pdf" /></a> : null}
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}