import { Badge, KeyValue, Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { getI18n } from '@/lib/i18n/server'
import { formatNumber } from '@/lib/i18n/translate'
import type { PreventionWindow as Window, UncertaintyRange } from '@/lib/engine/orchestrator'

/**
 * Prevention window (§23) and the uncertainty range around it (§24).
 *
 * The two belong together: the window is computed from a point estimate, and showing it
 * without the band around that estimate would present a margin as firmer than it is.
 */
export async function PreventionWindowPanel({
  window: preventionWindow,
  uncertainty,
  className,
}: {
  window: Window
  uncertainty: UncertaintyRange
  className?: string
}) {
  const { t, locale } = await getI18n()
  const minutes = (value: number | null) =>
    value === null
      ? t('common.notAvailable')
      : `${formatNumber(locale, value, { maximumFractionDigits: 0 })} ${t('common.minutes')}`

  return (
    <Panel className={className}>
      <PanelHeader
        title={t('preventionWindow.title')}
        subtitle={t('uncertainty.hint')}
        action={<Badge tone="accent">{t('preventionWindow.estimated')}</Badge>}
      />
      <PanelBody className="pt-0">
        {preventionWindow.etaMinutes === null ? (
          <p className="py-4 text-xs leading-relaxed text-text-muted">{t('preventionWindow.none')}</p>
        ) : (
          <>
            <div className="grid gap-3 sm:grid-cols-3">
              <div className="rounded-lg border border-border bg-surface-2/50 p-3">
                <p className="text-[10px] uppercase tracking-wide text-text-faint">
                  {t('preventionWindow.eventIn')}
                </p>
                <p className="tnum mt-1 text-xl font-semibold text-text">
                  {minutes(preventionWindow.etaMinutes)}
                </p>
              </div>
              <div className="rounded-lg border border-border bg-surface-2/50 p-3">
                <p className="text-[10px] uppercase tracking-wide text-text-faint">
                  {t('preventionWindow.actBefore')}
                </p>
                <p className="tnum mt-1 text-xl font-semibold text-watch">
                  {minutes(preventionWindow.latestActionInMin)}
                </p>
              </div>
              <div className="rounded-lg border border-border bg-surface-2/50 p-3">
                <p className="text-[10px] uppercase tracking-wide text-text-faint">
                  {t('preventionWindow.safeWindow')}
                </p>
                <p className="tnum mt-1 text-xl font-semibold text-normal">
                  {minutes(preventionWindow.safeWindowMin)}
                </p>
              </div>
            </div>

            {preventionWindow.expired ? (
              <p className="mt-3 rounded-lg border border-critical/30 bg-critical/8 px-3 py-2 text-[11px] text-critical">
                {t('preventionWindow.expired')}
              </p>
            ) : null}

            <div className="mt-4 grid gap-x-6 gap-y-1 border-t border-border/70 pt-3 sm:grid-cols-2">
              <KeyValue label={t('preventionWindow.execution')} value={minutes(preventionWindow.executionMin)} />
              <KeyValue label={t('preventionWindow.buffer')} value={minutes(preventionWindow.bufferMin)} />
              <KeyValue label={t('uncertainty.best')} value={minutes(uncertainty.bestCaseMinutes)} />
              <KeyValue label={t('uncertainty.worst')} value={minutes(uncertainty.worstCaseMinutes)} />
            </div>
          </>
        )}

        <div className="mt-4 border-t border-border/70 pt-3">
          <p className="text-[10px] uppercase tracking-wide text-text-faint">{t('uncertainty.title')}</p>
          <div className="mt-2 flex items-baseline justify-between gap-3 text-xs">
            <span className="tnum text-normal">
              {formatNumber(locale, uncertainty.bestCaseRisk, { maximumFractionDigits: 0 })}%
            </span>
            <span className="tnum text-base font-semibold text-text">
              {formatNumber(locale, uncertainty.expectedRisk, { maximumFractionDigits: 0 })}%
            </span>
            <span className="tnum text-critical">
              {formatNumber(locale, uncertainty.worstCaseRisk, { maximumFractionDigits: 0 })}%
            </span>
          </div>
          <div className="mt-1.5 flex items-center gap-2 text-[10px] text-text-faint">
            <span>{t('uncertainty.best')}</span>
            <span className="h-px flex-1 bg-border" />
            <span>{t('uncertainty.worst')}</span>
          </div>
        </div>
      </PanelBody>
    </Panel>
  )
}