import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'

import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { t } from '@/lib/i18n'
import { cn } from '@/lib/utils'

export interface Delta {
  /** Positivo es mejora: en Google, un puesto más bajo es mejor. */
  value: number
  /** Los dos extremos de la comparación, para que el tooltip pueda mostrarlos. */
  current: number
  previous: number
}

interface Props {
  delta: Delta | null
  /** Días de la ventana. Sólo se usa para redactar la explicación. */
  window: number
  minImpressions: number
}

/**
 * La variación de posición de una consulta, o el motivo de que no haya ninguna.
 *
 * **Nulo no es cero.** Cuando la ventana no junta impresiones suficientes no hay
 * comparación honesta que hacer, y la celda tiene que decirlo: la posición de
 * Search Console es un promedio, y con dos o tres impresiones ese promedio
 * describe a quien buscó y no la posición del sitio.
 *
 * El motivo va en un tooltip sobre un guion y **no en una insignia**: en una
 * tabla de doscientas consultas puede haber ciento cincuenta celdas así, y
 * doscientas insignias pesan más de lo que informan. El guion ya es la
 * convención de «no hay dato» y el tooltip explica cuál de los dos «no hay» es.
 */
export function DeltaCell({ delta, window, minImpressions }: Props) {
  if (delta === null) {
    return (
      <Tooltip>
        <TooltipTrigger
          className="text-muted-foreground tabular-nums"
          aria-label={t('seo.delta.insufficient.short')}
        >
          —
        </TooltipTrigger>
        <TooltipContent>
          {t('seo.delta.insufficient', { minimum: minImpressions, days: window })}
        </TooltipContent>
      </Tooltip>
    )
  }

  // El cero se dibuja sin flecha y en gris: no mejoró ni empeoró, y ponerle una
  // de las dos flechas insinuaría un movimiento que no hubo.
  const still = delta.value === 0
  const improved = delta.value > 0
  const Icon = still ? MinusIcon : improved ? TrendingUpIcon : TrendingDownIcon

  return (
    <Tooltip>
      <TooltipTrigger
        className={cn(
          'inline-flex items-center gap-1 tabular-nums',
          still && 'text-muted-foreground',
          !still && improved && 'text-emerald-600 dark:text-emerald-400',
          !still && !improved && 'text-destructive'
        )}
      >
        <Icon aria-hidden className="size-3.5" />
        {/* El signo se escribe siempre: un «4» sin signo no dice de qué lado. */}
        {still ? '0' : `${improved ? '+' : ''}${delta.value.toFixed(1)}`}
      </TooltipTrigger>
      <TooltipContent>
        {t('seo.delta.explained', {
          previous: delta.previous.toFixed(1),
          current: delta.current.toFixed(1),
          days: window,
        })}
      </TooltipContent>
    </Tooltip>
  )
}