// Billing — one honest home for the three surfaces that were previously three
// separate "Coming soon" nav items (Plan, Entitlements, Apps). None of them
// has a live endpoint yet, so none earns its own nav weight; they collapse to
// this single page until Phase 5 wires them. When Plan and Entitlements go
// live they become their own items under the Billing group and this becomes
// the group overview.

import { CreditCard, Gauge, LayoutGrid } from "lucide-react"

import { AppShell } from "~/components/layout/app-shell"
import { PageHeader } from "~/components/layout/page-header"
import { pageTitle } from "~/lib/page-meta"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

export const meta = () => pageTitle("Billing")

const upcoming = [
  {
    icon: CreditCard,
    title: "Plan",
    description:
      "The tenant's subscription, renewal date, payment method, and invoice history.",
  },
  {
    icon: Gauge,
    title: "Entitlements",
    description:
      "Metered allowances — included units and usage to date per meter (AI tokens, storage, and so on).",
  },
  {
    icon: LayoutGrid,
    title: "Apps",
    description:
      "Apps this tenant publishes, and the users who've granted them access to their personal clouds.",
  },
]

export default function BillingRoute() {
  return (
    <AppShell>
      <PageHeader
        title="Billing"
        description="Subscription, metered usage, and published apps for this tenant."
      />

      <Card>
        <CardHeader>
          <CardTitle>Not yet available on this deployment</CardTitle>
          <CardDescription>
            Billing isn't wired to a payment provider here. These are the
            surfaces that will land under Billing — each becomes its own screen
            once its endpoint exists.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ul className="flex flex-col divide-y">
            {upcoming.map(({ icon: Icon, title, description }) => (
              <li key={title} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                  <Icon className="size-4" />
                </div>
                <div className="min-w-0">
                  <p className="font-medium">{title}</p>
                  <p className="text-sm text-muted-foreground">{description}</p>
                </div>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </AppShell>
  )
}

export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"