import { usePage } from '@inertiajs/react'

import { formatAbsolute, formatSmart } from '@/lib/format'
import { t } from '@/lib/i18n'
import { cn } from '@/lib/utils'

interface Props {
  /** Instante en ISO 8601, tal como lo emite el servidor. */
  value: string | null | undefined
  /** Texto para cuando no hay fecha. Nunca se inventa una. */
  emptyLabel?: string
  className?: string
}

/**
 * Toda fecha del producto pasa por acá (RT-01).
 *
 * Muestra el valor relativo cuando es reciente, pero el absoluto **siempre**
 * queda disponible en el `title` y como texto accesible. Un dato de cobertura
 * jamás se muestra sólo como «hace un rato»: la fecha de obtención es lo que
 * sostiene que el estado sea una afirmación honesta y no una impresión.
 */
export function DataTimestamp({ value, emptyLabel, className }: Props) {
  const { app } = usePage().props
  const timeZone = app.display_timezone

  if (!value) {
    return (
      <span className={cn('text-muted-foreground whitespace-nowrap', className)} data-empty="true">
        {emptyLabel ?? t('time.noDate')}
      </span>
    )
  }

  const absolute = formatAbsolute(value, timeZone)

  return (
    // La zona va en el texto accesible y no sólo en el `title`: es lo que hace
    // que la fecha no sea ambigua (FR-065), y las vistas que no rinden el pie de
    // zona dependen de que cada fecha la traiga puesta.
    <time dateTime={value} title={`${absolute} (${timeZone})`} className={className}>
      {formatSmart(value, timeZone)}
      <span className="sr-only">{` — ${absolute} (${timeZone})`}</span>
    </time>
  )
}

/**
 * Pie de las vistas con datos fechados.
 *
 * Declarar la zona no es un detalle de formato: una fecha sin zona es una fecha
 * ambigua, y sobre estas fechas se apoya lo que el producto afirma (FR-065).
 */
export function TimezoneFootnote({ className }: { className?: string }) {
  const { app } = usePage().props
  return (
    <p className={cn('text-muted-foreground text-xs', className)}>
      {t('time.timezone', { zone: app.display_timezone.replace('_', ' ') })}
    </p>
  )
}