/**
 * Las piezas cuyas props no viajan en JSON, armadas acá.
 *
 * `DataTable` recibe columnas, que son funciones, así que no se la puede pedir
 * desde Python con `render(...)`. Lo que se arma en este archivo es lo mínimo
 * para poder mirar lo que sale: dos listas en una misma página —el caso que
 * `paramPrefix` existe para resolver— y una columna de cifras.
 *
 * No es código del producto y no lo importa nadie más: es el andamio que
 * permite defender dos reglas mirando el marcado en vez de leer el archivo.
 */

import { DataTable, createDataTableColumns } from '@/components/DataTable'
import type { TablePage } from '@/components/DataTable'
import { KeyFileField } from '@/components/KeyFileField'

interface KeyRow {
  id: string
  name: string
  uses: number
}

const columnHelper = createDataTableColumns<KeyRow>()

const COLUMNS = [
  columnHelper.accessor('name', {
    id: 'name',
    header: 'Nombre',
    cell: (info) => info.getValue(),
  }),
  columnHelper.numeric('uses', {
    id: 'uses',
    header: 'Usos',
    cell: (info) => info.getValue(),
  }),
]

const ROWS: KeyRow[] = [
  { id: 'k1', name: 'CI de producción', uses: 1240 },
  { id: 'k2', name: 'Tablero interno', uses: 8 },
]

const EMPTY = {
  title: 'Todavía no hay claves',
  description: 'Cuando crees la primera, acá vas a ver cuándo se usó.',
}

/**
 * Una página de resultados como la devuelve el servidor.
 *
 * La querystring es la de la pantalla entera —la lista activa en su página 2, la
 * revocada ordenada por nombre al revés—, que es lo que `table_props()` deja en
 * `query` cuando hay dos listas.
 */
function pageOf(pageNumber: number, sort: string): TablePage<KeyRow> {
  return {
    rows: ROWS,
    count: 120,
    page: pageNumber,
    pages: 3,
    per_page: 50,
    sort,
    sortable: ['name', 'uses'],
    filters: {},
    path: '/api-keys',
    query: { active_page: 2, revoked_sort: '-name' },
  }
}

/** Dos listas del mismo objeto en una página, cada una con su prefijo. */
export function TwoTables() {
  return (
    <>
      <DataTable
        data={pageOf(2, '')}
        columns={COLUMNS}
        paramPrefix="active_"
        unit="claves"
        caption="Claves activas"
        empty={EMPTY}
        rowId={(row) => row.id}
      />
      <DataTable
        data={pageOf(1, '-name')}
        columns={COLUMNS}
        paramPrefix="revoked_"
        unit="claves"
        caption="Claves revocadas"
        empty={EMPTY}
        rowId={(row) => row.id}
      />
    </>
  )
}

/**
 * Un archivo de clave ya elegido, con material secreto adentro.
 *
 * `File` tampoco viaja en JSON, así que se arma acá. El archivo lleva a
 * propósito un bloque de clave privada reconocible: lo que se defiende es que
 * el **único** componente del producto que toca el archivo de clave muestre su
 * nombre y su tamaño y nada más (RT-06).
 */
export function ChosenKeyFile() {
  // Del tamaño de una clave real —unos dos kilobytes—, que es lo que hace útil
  // mostrar el tamaño: con otro archivo, la cifra no se parece.
  const contents = JSON.stringify({
    type: 'service_account',
    project_id: 'mi-proyecto-123456',
    private_key: `-----BEGIN PRIVATE KEY-----\n${'MIIsinValorReal'.repeat(120)}\n-----END PRIVATE KEY-----\n`,
    client_email: 'tools-patiospools@mi-proyecto-123456.iam.gserviceaccount.com',
  })

  return (
    <KeyFileField
      name="key_file"
      label="Archivo de clave (.json)"
      file={new File([contents], 'mi-proyecto-123456-a1b2c3d4e5f6.json')}
      onChange={() => {}}
    />
  )
}

/** Una lista sin prefijo: es lo que hacen las seis tablas de hoy. */
export function PlainTable() {
  return (
    <DataTable
      data={{ ...pageOf(2, ''), query: { page: 2 } }}
      columns={COLUMNS}
      unit="claves"
      caption="Claves activas"
      empty={EMPTY}
      rowId={(row) => row.id}
    />
  )
}