import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
import { DashboardTabs } from "@/components/dashboard-tabs"
import { DASHBOARD_METRICS, DASHBOARD_INSIGHT } from "@/lib/mock/dashboard"
import { useProduct } from "@/contexts/product-context"
import { brandForProduct } from "@/lib/product-brand"

/**
 * `/<product>/dashboard` — the dogfood dashboard.
 *
 * Uses the shared DS dashboard composition (`DashboardTabs` →
 * `KeyMetrics` + `charts-overview`), the same pattern the reference app
 * ships at `apps/web/src/views/dashboard.tsx`. Product data (`metrics`,
 * `insight`) stays in the consumer (`lib/mock/dashboard.ts`); the charts,
 * KPI strip, tabs, and keyboard selection all live in `@exxatdesignux/ui`.
 */
export default function DashboardPage() {
  const { product, customProductBrand, productBrandColors } = useProduct()
  const brand = brandForProduct(product, customProductBrand, productBrandColors)
  const productLabel = brand.label ?? `${brand.prefix ?? "Exxat"} ${brand.suffix}`

  return (
    <PrimaryPageTemplate siteHeader={{ title: "Dashboard" }}>
      <DashboardTabs
        title="Dashboard"
        subtitle={`${productLabel} · sample metrics and charts`}
        metrics={DASHBOARD_METRICS}
        insight={DASHBOARD_INSIGHT}
      />
    </PrimaryPageTemplate>
  )
}
