import { usePage } from '@inertiajs/react'
import { Loader } from 'lucide-react'

import { DataTimestamp } from '@/components/DataTimestamp'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { t } from '@/lib/i18n'
import { batchKindLabel } from '@/lib/batch'
import type { ActiveWork } from '@/types/inertia'

/**
 * Que hay trabajo corriendo: un icono en la barra, y el detalle en su globo.
 *
 * Es D10 aplicado: la señal tiene que estar siempre a la mano, y por eso está en
 * todas las pantallas y en el mismo lugar; pero no tiene por qué estar en primer
 * plano, y por eso es un icono y no un bloque. Antes era un badge con texto
 * dentro del encabezado del tablero, donde competía con el título de la página
 * por algo que casi nunca hay que hacer.
 *
 * **No se afirma cuando no puede ser cierto** (D9). Con `can_operate` en falso
 * ningún lote avanza, así que un lote sin terminar no es trabajo en curso sino
 * trabajo trabado, y por qué está trabado ya lo dice el indicador de la cuenta,
 * al lado. Repetirlo acá sería el mismo hecho dos veces y afirmando lo
 * contrario de lo que pasa.
 *
 * **El globo dice qué y desde cuándo**, no que hay algo. Un lote encolado hace
 * dos días que ya no avanza se lee igual que uno que arrancó recién si lo único
 * que se dice es «hay trabajo».
 *
 * El disparador es un `<button>` y no un `<span>`: un globo que sólo aparece al
 * pasar el puntero no existe con teclado ni en una pantalla táctil, así que lo
 * que cuenta tiene que poder alcanzarse tabulando (RT-02). Y el texto entero
 * vive además en la región viva, que es lo que anuncia el cambio a quien usa
 * lector de pantalla.
 */
export function WorkInProgress() {
  const { account, active_work } = usePage().props

  const work = active_work ?? []
  const running = (account?.can_operate ?? false) && work.length > 0
  const since = oldest(work)

  return (
    <span role="status" aria-live="polite">
      {running ? (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger
              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring flex size-8 items-center justify-center rounded-md focus-visible:ring-2"
              aria-label={label(work)}
            >
              {/* `motion-safe`: quien pidió menos movimiento en el sistema
                  operativo ve el icono quieto, y el estado lo sigue diciendo el
                  globo y la región viva. */}
              <Loader aria-hidden className="size-4 motion-safe:animate-spin" />
            </TooltipTrigger>

            <TooltipContent side="bottom">
              {label(work)}
              {since ? (
                <>
                  {` · ${t('work.since')} `}
                  <DataTimestamp value={since} />
                </>
              ) : null}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ) : null}
    </span>
  )
}

/** Qué se está haciendo, no que se está haciendo algo. */
function label(work: ActiveWork[]): string {
  const kinds = new Set(work.map((item) => item.kind))
  if (kinds.size === 1) return batchKindLabel(work[0].kind)
  return t('work.several', { count: work.length })
}

/** Desde cuándo, contando desde lo más viejo que sigue sin terminar. */
function oldest(work: ActiveWork[]): string | null {
  const dates = work.map((item) => item.started_at).filter((date) => date !== null)
  return dates.length > 0 ? dates.reduce((a, b) => (a < b ? a : b)) : null
}