"use client"

/**
 * KeyMetricsAskLeoBridge — adapter that connects the design-system
 * `KeyMetrics` injection points (`KeyMetricsProvider`) to this app's
 * Ask Leo runtime (`useAskLeo` + `AskLeoShortcutKbds`).
 *
 * Lives in `apps/web` because the bridge is app-specific: it ties
 * the design-system primitive to a concrete assistant + keyboard
 * shortcut. Other consumers of `@exxatdesignux/ui` can ship a
 * different bridge (Copilot, ChatGPT, no-AI) without touching the
 * package itself.
 *
 * Mount this just inside `<AskLeoProvider>` in `(app)/layout.tsx` so
 * every `<KeyMetrics />` descendant transparently picks up the
 * "Ask Leo about these metrics" CTA and the `⌘⌥K` tooltip chord.
 */

import * as React from "react"

import { AskLeoShortcutKbds, useAskLeo } from "@/components/ask-leo-context"
// From `key-metrics-context`, not `key-metrics`. The provider is re-exported by
// both, but `key-metrics` also draws the sparklines, so it imports recharts.
// This bridge mounts at the app root, so importing it there put a charting
// library in the entry chunk for every route, including ones with no charts.
import { KeyMetricsProvider } from "@exxatdesignux/ui/components/key-metrics-context"

export function KeyMetricsAskLeoBridge({
  children,
}: {
  children: React.ReactNode
}) {
  const { setOpen } = useAskLeo()
  const openAskLeo = React.useCallback(() => setOpen(true), [setOpen])
  const shortcutHint = React.useMemo(() => <AskLeoShortcutKbds />, [])
  const value = React.useMemo(
    () => ({
      defaultInsightAction: openAskLeo,
      shortcutHint,
      defaultActionLabel: "Ask Leo",
    }),
    [openAskLeo, shortcutHint],
  )
  return <KeyMetricsProvider value={value}>{children}</KeyMetricsProvider>
}
