import {
  AlertTriangleIcon,
  CheckCircle2Icon,
  CircleDashedIcon,
  LoaderIcon,
  TriangleAlertIcon,
} from 'lucide-react'

import { StatusBadge } from '@/components/StatusBadge'
import type { StatusTone } from '@/components/StatusBadge'
import { t } from '@/lib/i18n'
import type { TranslationKey } from '@/lib/i18n'
import type { ModuleStatus } from '@/pages/Seo/types'

const TONES: Record<ModuleStatus, { tone: StatusTone; icon: typeof CheckCircle2Icon }> = {
  READY: { tone: 'positive', icon: CheckCircle2Icon },
  SYNCING: { tone: 'neutral', icon: LoaderIcon },
  ACTION_REQUIRED: { tone: 'attention', icon: AlertTriangleIcon },
  // Ni positivo ni negativo: la integración funciona y Google no tiene nada que
  // decir de este período. Teñirlo de ámbar lo agruparía con lo que sí está mal
  // y mandaría a revisar permisos que están perfectos.
  NO_DATA: { tone: 'unknown', icon: CircleDashedIcon },
  ERROR: { tone: 'critical', icon: TriangleAlertIcon },
}

interface Props {
  status: ModuleStatus
  /** El `GoogleErrorCode` que explica el estado, cuando lo hay. */
  code?: string | null
}

/**
 * El estado del módulo, con su motivo cuando existe.
 *
 * El código viaja como código y la oración la arma el catálogo: el servidor no
 * manda prosa. Por eso el detalle es una ayuda sobre la insignia y no un texto
 * incrustado en ella —un estado es una palabra, y una insignia con una oración
 * adentro rompe la fila donde se la ponga.
 */
export function ModuleStatusBadge({ status, code }: Props) {
  const { tone, icon } = TONES[status]
  const help = code ? t(`seo.error.${code}` as TranslationKey) : undefined

  return (
    <StatusBadge tone={tone} icon={icon} help={help}>
      {t(`seo.status.${status}` as TranslationKey)}
    </StatusBadge>
  )
}