'use client'

import { useI18n } from '@/components/providers/i18n-provider'
import { Badge, Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { cn } from '@/lib/cn'

/**
 * Ghost future (§22).
 *
 * The asset as it is, drawn solid, with where it is heading drawn through it. Two
 * numbers side by side would say the same thing and be read half as often — the overlay
 * is what makes the gap between present and future something you *see* rather than
 * something you compute.
 */
export interface GhostState {
  code: string
  loadPct: number
  tempC: number
  riskScore: number
  healthScore: number
  thermalStress: number
  state: string
}

function bar(value: number, max: number): number {
  return Math.max(0, Math.min(100, (value / max) * 100))
}

export function GhostFuture({
  present,
  future,
  offsetMin,
  etaMinutes,
  className,
}: {
  present: GhostState
  future: GhostState
  offsetMin: number
  etaMinutes: number | null
  className?: string
}) {
  const { t, n } = useI18n()

  const channels = [
    { key: 'load', label: t('assets.columns.load'), now: present.loadPct, then: future.loadPct, max: 130, unit: '%' },
    { key: 'temp', label: t('assets.columns.temperature'), now: present.tempC, then: future.tempC, max: 130, unit: '°C' },
    { key: 'risk', label: t('common.riskScore'), now: present.riskScore, then: future.riskScore, max: 100, unit: '%' },
  ]

  return (
    <Panel className={className}>
      <PanelHeader
        title={t('twin.ghost')}
        subtitle={t('twin.ghostHint')}
        action={
          <Badge tone="accent">
            {t('twin.ghostFuture', { minutes: String(offsetMin) })}
          </Badge>
        }
      />
      <PanelBody className="space-y-4 pt-0">
        {channels.map((channel) => {
          const worse = channel.then > channel.now
          return (
            <div key={channel.key}>
              <div className="flex items-baseline justify-between gap-3 text-[11px]">
                <span className="text-text-muted">{channel.label}</span>
                <span className="tnum">
                  <span className="text-text">{n(channel.now, { maximumFractionDigits: 1 })}</span>
                  <span className="mx-1 text-text-faint">→</span>
                  <span className={cn('font-semibold', worse ? 'text-critical' : 'text-normal')}>
                    {n(channel.then, { maximumFractionDigits: 1 })}
                    {channel.unit}
                  </span>
                </span>
              </div>
              {/* The ghost: the future value drawn as a translucent extension of the
                  present one, so the growth is the visual, not the numbers. */}
              <div className="relative mt-1.5 h-2.5 w-full overflow-hidden rounded-full bg-surface-3">
                <div
                  className={cn('absolute inset-y-0 rounded-full opacity-35', worse ? 'bg-critical' : 'bg-normal')}
                  style={{ width: `${bar(channel.then, channel.max)}%` }}
                />
                <div
                  className="absolute inset-y-0 rounded-full bg-brand"
                  style={{ width: `${bar(channel.now, channel.max)}%` }}
                />
              </div>
            </div>
          )
        })}

        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/70 pt-3 text-[11px]">
          <span className="flex items-center gap-2 text-text-muted">
            <span aria-hidden className="size-2 rounded-full bg-brand" />
            {t('twin.ghostNow')}
          </span>
          <span className="flex items-center gap-2 text-text-muted">
            <span aria-hidden className="size-2 rounded-full bg-critical/40" />
            {t('twin.ghostFuture', { minutes: String(offsetMin) })}
          </span>
          {etaMinutes !== null ? (
            <span className="tnum text-critical">
              {t('preventionWindow.eventIn')} {n(etaMinutes)} {t('common.minutes')}
            </span>
          ) : null}
        </div>
      </PanelBody>
    </Panel>
  )
}