import { Badge, Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { getI18n } from '@/lib/i18n/server'
import { formatNumber } from '@/lib/i18n/translate'
import { cn } from '@/lib/cn'
import type { FutureBranch } from '@/lib/engine/orchestrator'

/**
 * Future branches (§8).
 *
 * Three columns, same instant, different decisions. Every figure is a simulation result
 * — the branches are each a full re-run of the twin — and the panel says so, because a
 * comparison this favourable to the platform has to be legible as an estimate (§57).
 */
const TONE: Record<FutureBranch['key'], string> = {
  no_action: 'border-critical/35',
  operator_action: 'border-watch/35',
  nabdh_strategy: 'border-normal/40',
}

const RISK_TEXT: Record<FutureBranch['key'], string> = {
  no_action: 'text-critical',
  operator_action: 'text-watch',
  nabdh_strategy: 'text-normal',
}

export async function FutureBranches({
  branches,
  horizonMin,
  className,
}: {
  branches: FutureBranch[]
  /** The window the risk figure is a peak over. Stating it prevents a real confusion:
   *  a strategy can hold at the predicted event and still be overtaken later. */
  horizonMin?: number
  className?: string
}) {
  const { t, locale } = await getI18n()
  const ar = locale === 'ar'

  return (
    <Panel className={className}>
      <PanelHeader
        title={t('futures.title')}
        subtitle={t('futures.subtitle')}
        action={<Badge tone="accent">{t('futures.estimate')}</Badge>}
      />
      <PanelBody className="pt-0">
        {horizonMin ? (
          <p className="mb-3 text-[11px] leading-relaxed text-text-faint">
            {t('futures.horizonNote', { minutes: formatNumber(locale, horizonMin) })}
          </p>
        ) : null}
        <div className="grid gap-3 md:grid-cols-3">
          {branches.map((branch) => (
            <div
              key={branch.key}
              className={cn('rounded-[--radius-panel] border bg-surface-2/40 p-4', TONE[branch.key])}
            >
              <p className="text-[10px] uppercase tracking-wide text-text-faint">
                {t(`futures.${branch.key}`)}
              </p>
              <p className="mt-1 text-xs font-medium text-text">{ar ? branch.labelAr : branch.label}</p>

              <p className={cn('tnum mt-3 text-3xl font-semibold tracking-tight', RISK_TEXT[branch.key])}>
                {formatNumber(locale, branch.risk, { maximumFractionDigits: 0 })}
                <span className="text-base">%</span>
              </p>
              <p className="text-[10px] text-text-faint">{t('futures.risk')}</p>

              <dl className="mt-3 space-y-1.5 border-t border-border/70 pt-3 text-[11px]">
                <div className="flex items-baseline justify-between gap-2">
                  <dt className="text-text-muted">{t('futures.assets')}</dt>
                  <dd className="tnum font-medium text-text">{formatNumber(locale, branch.assetsAffected)}</dd>
                </div>
                <div className="flex items-baseline justify-between gap-2">
                  <dt className="text-text-muted">{t('futures.customers')}</dt>
                  <dd className="tnum font-medium text-text">
                    {formatNumber(locale, branch.customersAffected)}
                  </dd>
                </div>
                <div className="flex items-baseline justify-between gap-2">
                  <dt className="text-text-muted">{t('futures.downtime')}</dt>
                  <dd className="tnum font-medium text-text">
                    {formatNumber(locale, branch.potentialDowntimeMin)} {t('common.minutes')}
                  </dd>
                </div>
                <div className="flex items-baseline justify-between gap-2">
                  <dt className="text-text-muted">{t('futures.actions')}</dt>
                  <dd className="tnum font-medium text-text">{formatNumber(locale, branch.actionCount)}</dd>
                </div>
              </dl>

              <p
                className={cn(
                  'mt-3 text-[10px] font-medium',
                  branch.breaches ? 'text-critical' : 'text-normal',
                )}
              >
                {branch.breaches ? t('futures.breaches') : t('futures.noBreach')}
              </p>
            </div>
          ))}
        </div>
      </PanelBody>
    </Panel>
  )
}