import { Link } from '@inertiajs/react'
import { ArrowRightIcon } from 'lucide-react'

import { AppLayout } from '@/layouts/AppLayout'
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { t } from '@/lib/i18n'
import type { TranslationKey } from '@/lib/i18n'
import { route } from '@/lib/routes'
import type { RouteName } from '@/lib/routes'

interface Tool {
  /**
   * El identificador estable de la herramienta.
   *
   * No se muestra: con él se busca en el catálogo cómo se llama y qué hace. El
   * servidor decide **cuáles** hay; el catálogo, cómo se dicen.
   */
  code: string
  /** El **nombre** de la ruta. La dirección la arma `route()`, como en toda la aplicación. */
  route: RouteName
}

interface Props {
  tools: Tool[]
}

/**
 * La raíz: con qué herramienta se va a trabajar.
 *
 * Hasta acá la raíz era el tablero, porque había una sola herramienta. Ahora la
 * plataforma ofrece varias y esta pantalla es donde se elige; el tablero se
 * mudó adentro de Search Console, que es de quien es.
 *
 * **Hoy hay una sola herramienta y por lo tanto una sola tarjeta.** Es el costo
 * asumido de que la raíz sea una elección: se prefirió una pantalla honesta con
 * un elemento antes que una raíz que finge ser el tablero de una herramienta que
 * mañana va a ser una entre varias. La alternativa —saltear la pantalla cuando
 * hay una sola— se descartó porque esconde dónde está el resto justo cuando el
 * resto aparece.
 *
 * No lleva encabezado de bienvenida ni saludo: quien entra ya sabe que entró, y
 * el título de la página lo dice.
 */
export default function Tools({ tools }: Props) {
  return (
    <AppLayout title={t('tools.title')} description={t('tools.description')}>
      {/*
        Una columna en pantalla angosta y dos desde `sm`. Con una sola tarjeta
        la grilla no se nota, y cuando haya tres tampoco va a haber que tocar
        nada.
      */}
      <div className="grid gap-4 sm:grid-cols-2">
        {/*
          `relative` en la tarjeta es requisito y no adorno: trae `ring` y no
          `border`, y sin posicionarla el `after:inset-0` del enlace se
          estiraría sobre otro ancestro.
        */}
        {tools.map((tool) => (
          <Card
            key={tool.code}
            className="relative transition-shadow hover:ring-ring"
          >
            <CardHeader>
              <CardTitle asChild>
                {/*
                  El enlace envuelve el título y se estira sobre toda la tarjeta
                  con `after:absolute`: así el área de clic es la tarjeta entera
                  sin que el nombre accesible del enlace se lleve también la
                  descripción.
                */}
                <h2>
                  <Link
                    href={route(tool.route)}
                    className="after:absolute after:inset-0"
                  >
                    {t(`tools.${tool.code}.name` as TranslationKey)}
                  </Link>
                </h2>
              </CardTitle>
              <CardDescription className="text-pretty">
                {t(`tools.${tool.code}.description` as TranslationKey)}
              </CardDescription>
            </CardHeader>
            <ArrowRightIcon
              aria-hidden
              className="text-muted-foreground absolute top-6 right-6 size-4"
            />
          </Card>
        ))}
      </div>
    </AppLayout>
  )
}