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

import { ClientDataTable, createClientDataTableColumns } from '@/components/ClientDataTable'
import type { ClientDataTableColumn } from '@/components/ClientDataTable'
import { AppLayout } from '@/layouts/AppLayout'
import { formatNumber } from '@/lib/format'
import { t } from '@/lib/i18n'
import { route } from '@/lib/routes'
import { ModuleStatusBadge } from '@/pages/Seo/status'
import type { ModuleStatus, PageRow, SiteProps } from '@/pages/Seo/types'

interface Props {
  domain: SiteProps
  rows: PageRow[]
  status: ModuleStatus
  last_closed_date: string | null
  window_days: number
}

const columnHelper = createClientDataTableColumns<PageRow>()

/**
 * Qué páginas del sitio traen tráfico.
 *
 * Sale de la tabla de consulta por página, que es la que sabe de URLs. Sus
 * cifras describen **el reparto entre páginas** y no los totales del sitio: una
 * búsqueda en la que aparecieron dos páginas dejó dos filas acá y una sola
 * impresión en la realidad.
 */
export default function Pages({
  domain,
  rows,
  status,
  last_closed_date,
  window_days,
}: Props) {
  const columns = useMemo<ClientDataTableColumn<PageRow>[]>(
    () => [
      columnHelper.accessor('page', {
        id: 'page',
        header: t('seo.column.page'),
        // Sin ella la fila queda sin sujeto: seis cifras y ninguna dirección.
        enableHiding: false,
        cell: (info) => (
          <Link
            href={`${route('seo.page')}?url=${encodeURIComponent(
              info.getValue()
            )}`}
            className="block max-w-xl truncate font-medium hover:underline"
            translate="no"
          >
            {info.getValue()}
          </Link>
        ),
      }),
      // `label` es lo que hace que la columna se pueda esconder desde el menú:
      // `hideableColumns()` descarta la que no lo declara, porque lo único que
      // quedaría para nombrarla es su `id`, que es un identificador en inglés.
      columnHelper.accessor('position', {
        id: 'position',
        header: t('seo.column.position'),
        meta: { label: t('seo.column.position') },
        cell: (info) => <span className="tabular-nums">{info.getValue().toFixed(1)}</span>,
      }),
      columnHelper.accessor('impressions', {
        id: 'impressions',
        header: t('seo.column.impressions'),
        meta: { label: t('seo.column.impressions') },
        cell: (info) => <span className="tabular-nums">{formatNumber(info.getValue())}</span>,
      }),
      columnHelper.accessor('clicks', {
        id: 'clicks',
        header: t('seo.column.clicks'),
        meta: { label: t('seo.column.clicks') },
        cell: (info) => <span className="tabular-nums">{formatNumber(info.getValue())}</span>,
      }),
      columnHelper.accessor('ctr', {
        id: 'ctr',
        header: t('seo.column.ctr'),
        meta: { label: t('seo.column.ctr') },
        cell: (info) => (
          <span className="tabular-nums">{(info.getValue() * 100).toFixed(1)}%</span>
        ),
      }),
      columnHelper.accessor('queries', {
        id: 'queries',
        header: t('seo.column.queries'),
        meta: { label: t('seo.column.queries') },
        cell: (info) => <span className="tabular-nums">{formatNumber(info.getValue())}</span>,
      }),
    ],
    [domain.id]
  )

  return (
    <AppLayout
      title={t('seo.pages.title')}
      description={t('seo.pages.description', { days: window_days })}
      // Arriba a la derecha, igual que en la tabla de consultas: es donde se
      // buscan el estado y las acciones de una pantalla.
      actions={
        <div className="flex flex-wrap items-center gap-3 text-sm">
          {last_closed_date ? (
            <span className="text-muted-foreground">
              {t('seo.upTo', { date: last_closed_date })}
            </span>
          ) : null}
          <ModuleStatusBadge status={status} />
        </div>
      }
    >
      <ClientDataTable
        data={rows}
        columns={columns}
        rowId={(row) => row.page}
        unit={t('seo.pages.unit')}
        unitSingular={t('seo.pages.unitSingular')}
        caption={t('seo.pages.caption')}
        sort={{ column: 'impressions', descending: true }}
        pageSize={50}
        search={{
          label: t('seo.pages.searchLabel'),
          placeholder: t('seo.pages.searchPlaceholder'),
        }}
        empty={{
          icon: FileTextIcon,
          title: t('seo.pages.empty.title'),
          description: t('seo.pages.empty.description'),
        }}
      />
    </AppLayout>
  )
}