import type { ReactNode } from 'react'

import { CodeChip } from '@/components/CodeChip'
import { DataTimestamp } from '@/components/DataTimestamp'
import { DescriptionList } from '@/components/LabelValue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { t } from '@/lib/i18n'

/**
 * Los cinco estados en los que puede estar la conexión.
 *
 * Vive acá, junto a la ficha que los tres estados de la pantalla comparten,
 * porque es el vocabulario que la vista y esta pieza usan para entenderse.
 *
 * `NEEDS_AUTHORIZATION` sale del grupo de los errores a propósito: la clave
 * funciona y lo que falta se hace en Search Console. Tratarlo como falla manda a
 * cambiar una clave que está perfecta (SC-002).
 */
export type ConnectionState = 'EMPTY' | 'UNCHECKED' | 'NEEDS_AUTHORIZATION' | 'VERIFIED' | 'ERROR'

/** La huella, en grupos de cuatro, para que un lector de pantalla la pueda dictar. */
export function spellOut(value: string): string {
  return value.replace(/(.{4})/g, '$1 ').trim()
}

export interface CredentialIdentity {
  client_email: string
  project_id: string
  key_fingerprint: string
  private_key_id: string
  created_at: string
}

interface Props {
  state: ConnectionState
  credential: CredentialIdentity
  /** El módulo que consulta con esta credencial. Hoy hay uno; la fila ya es la de dos. */
  moduleName: string
  /** El bloque que destraba el estado, cuando el estado tiene uno que destrabar. */
  children?: ReactNode
}

/**
 * Cuál es esta credencial: la ficha que sirve para **identificarla**, no para
 * decidir nada.
 *
 * Absorbe dos bloques y una tarjeta entera. El `<details>` «Datos de la
 * credencial» plegaba cinco pares —que es esconder la única forma de reconocer
 * la clave—, y la tarjeta «Módulos» era una `Card` completa, con título y
 * descripción, para decir un par etiqueta/valor que ya estaba dicho tres bloques
 * más arriba. Una tabla de una fila no es una tabla; el día que haya dos
 * módulos, es una `Section` con `DataTable`.
 *
 * **Sacar la huella del acordeón es lo contrario de exponer un secreto** (RT-06):
 * la huella existe justamente para reconocer la clave sin verla, y esconderla
 * obliga a buscar la identificación en otro lado. Lo que se muestra sigue siendo
 * exactamente huella, dirección, proyecto, identificador de la clave y fecha.
 * Nada del material de la clave, ni recortado, ni ofuscado.
 */
export function ConnectionSummary({ state, credential, moduleName, children }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle asChild>
          <h2>{t('connection.title')}</h2>
        </CardTitle>
        <CardDescription className="text-pretty">
          {state === 'VERIFIED'
            ? t('connection.description.verified')
            : t('connection.description.broken')}
        </CardDescription>
      </CardHeader>

      <CardContent className="flex flex-col gap-4">
        <DescriptionList
          columns={2}
          items={[
            {
              term: t('connection.field.clientEmail'),
              value: <CodeChip value={credential.client_email} copy />,
            },
            { term: t('connection.field.project'), value: <CodeChip value={credential.project_id} /> },
            {
              term: t('connection.field.fingerprint'),
              value: (
                <span
                  aria-label={t('connection.field.fingerprint.spelled', {
                    value: spellOut(credential.key_fingerprint),
                  })}
                >
                  <CodeChip value={credential.key_fingerprint} />
                </span>
              ),
              hint: t('connection.field.fingerprint.hint'),
            },
            {
              term: t('connection.field.keyId'),
              value: <CodeChip value={credential.private_key_id} />,
            },
            {
              term: t('connection.field.uploaded'),
              value: <DataTimestamp value={credential.created_at} />,
            },
            { term: t('connection.field.usedIn'), value: moduleName },
          ]}
        />

        {children}

        <p className="text-muted-foreground text-xs text-pretty">{t('connection.neverShown')}</p>
      </CardContent>
    </Card>
  )
}