'use client'

import { useI18n } from '@/components/providers/i18n-provider'
import { useAppMode } from '@/components/providers/app-mode-provider'
import { cn } from '@/lib/cn'

/**
 * The live/simulation separator (§6).
 *
 * Deliberately not subtle. When the console is showing anything other than live
 * telemetry, a full-width band says so above everything else on the page, in both the
 * band's colour and its words, and it is announced to assistive technology. The one
 * failure mode this product cannot have is an operator acting on a simulated number
 * believing it came from the grid.
 *
 * In live mode it renders nothing at all — a permanent "everything is normal" banner
 * teaches people to stop reading banners.
 */
const MODE_STYLE: Record<string, { bar: string; dot: string }> = {
  simulation: {
    bar: 'border-simulation/45 bg-simulation/12 text-simulation',
    dot: 'bg-simulation',
  },
  sandbox: {
    bar: 'border-simulation/45 bg-simulation/12 text-simulation',
    dot: 'bg-simulation',
  },
  demo: {
    bar: 'border-accent/45 bg-accent/12 text-accent',
    dot: 'bg-accent',
  },
}

export function ModeBanner({ className }: { className?: string }) {
  const { t } = useI18n()
  const { mode, isSimulated } = useAppMode()

  if (!isSimulated) return null
  const style = MODE_STYLE[mode] ?? MODE_STYLE.simulation

  return (
    <div
      role="status"
      aria-live="polite"
      className={cn(
        'flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-b px-4 py-1.5 text-center',
        style.bar,
        className,
      )}
    >
      <span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.16em]">
        <span aria-hidden className={cn('size-1.5 rounded-full nabdh-pulse', style.dot)} />
        {t(`mode.${mode}.label`)}
      </span>
      <span className="text-[11px] leading-relaxed opacity-90">{t(`mode.${mode}.body`)}</span>
    </div>
  )
}

/**
 * The compact form, for the command bar.
 *
 * Always rendered, including in live mode: here the point is the *contrast* between the
 * two states, and a chip that is sometimes absent cannot carry that.
 */
export function ModeChip({ className }: { className?: string }) {
  const { t } = useI18n()
  const { mode, isSimulated } = useAppMode()

  return (
    <span
      title={t(`mode.${mode}.body`)}
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] whitespace-nowrap',
        isSimulated
          ? (MODE_STYLE[mode] ?? MODE_STYLE.simulation).bar
          : 'border-brand/40 bg-brand/10 text-brand',
        className,
      )}
    >
      <span
        aria-hidden
        className={cn(
          'size-1.5 rounded-full',
          isSimulated ? (MODE_STYLE[mode] ?? MODE_STYLE.simulation).dot : 'bg-brand nabdh-pulse',
        )}
      />
      {t(`mode.${mode}.short`)}
    </span>
  )
}