import { CodeChip } from '@/components/CodeChip'
import { CopyButton } from '@/components/CopyButton'
import { RichText } from '@/components/RichText'
import { Item, ItemActions, ItemContent, ItemDescription } from '@/components/ui/item'
import { t } from '@/lib/i18n'

interface Props {
  clientEmail: string
  /** El título del bloque. Cambia según desde dónde se llega, no qué dice adentro. */
  heading?: string
}

/**
 * La dirección de la cuenta de servicio, lista para pegar en Search Console.
 *
 * Es lo único que destraba `NO_PROPERTIES`, que es el estado **esperado** justo
 * después de subir la clave: Google no rechazó nada, simplemente todavía no sabe
 * que esa cuenta puede leer el sitio. Estaba escrito dos veces —el mismo
 * `<section aria-labelledby="authorize" className="space-y-3 rounded-lg border
 * p-4">` en Configuración y en el recorrido—, y en Configuración vivía al fondo
 * de un acordeón, después de cuatro pasos que ya no hacían falta.
 *
 * El permiso va dicho en palabras y no como un detalle: con uno menor —lector o
 * usuario completo— los sitemaps funcionan igual pero la inspección de URLs
 * devuelve error y Google no avisa por qué, así que es la parte del paso que más
 * se equivoca. Por eso va en negrita, y por eso la negrita la pone el catálogo:
 * la ruta y el permiso no caen en el mismo lugar de la oración en los dos
 * idiomas.
 */
export function ServiceAccountAddress({ clientEmail, heading }: Props) {
  return (
    <Item variant="muted" className="items-start">
      <ItemContent className="gap-2">
        <h3 className="text-sm font-medium text-pretty">
          {heading ?? t('serviceAccount.heading')}
        </h3>

        <ItemDescription className="line-clamp-none text-pretty">
          {t('serviceAccount.intro')}
        </ItemDescription>

        <CodeChip value={clientEmail} />

        <ItemDescription className="line-clamp-none text-pretty">
          <RichText text={t('serviceAccount.where')} />
        </ItemDescription>
      </ItemContent>

      <ItemActions>
        <CopyButton value={clientEmail} label={t('serviceAccount.copy')} />
      </ItemActions>
    </Item>
  )
}