// Overview — URL `/`. A glance at the account: the current plan (live from
// `billing.subscription`), renewal date, and quick links into the deeper pages.
import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { useSubscription } from '@voltro/client'
import { T, useT } from '@voltro/i18n'
import { getCatalog } from '../../locales'
import type { SubscriptionState } from '../../lib/api'

export const renderMode = 'ssr' as const

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

export default function Overview(): ReactNode {
  const { data } = useSubscription<SubscriptionState>('app', 'billing.subscription')
  const sub = data?.subscription ?? null
  const freeLabel = useT('billing.plan.free')

  return (
    <section>
      <h1><T id="overview.heading" /></h1>
      <dl className="facts">
        <dt><T id="billing.plan.label" /></dt>
        <dd>{sub?.plan ?? freeLabel}</dd>
        <dt><T id="billing.status.label" /></dt>
        <dd>{sub?.status ?? '—'}</dd>
        <dt><T id="overview.renews" /></dt>
        <dd>{sub?.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : '—'}</dd>
      </dl>
      <ul className="cards" style={{ marginTop: '1.5rem' }}>
        <li className="card"><a href="/billing"><T id="nav.billing" /></a><div className="label"><T id="overview.link.billing" /></div></li>
        <li className="card"><a href="/invoices"><T id="nav.invoices" /></a><div className="label"><T id="overview.link.invoices" /></div></li>
        <li className="card"><a href="/api-keys"><T id="nav.apiKeys" /></a><div className="label"><T id="overview.link.apiKeys" /></div></li>
      </ul>
    </section>
  )
}