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

import { SectionCard } from '@/components/SectionCard'
import { Button } from '@/components/ui/button'
import { AppLayout } from '@/layouts/AppLayout'
import { formatNumber } from '@/lib/format'
import { t } from '@/lib/i18n'
import { route } from '@/lib/routes'
import { MetricsTable } from '@/pages/Seo/MetricsTable'
import type { PageDetail } from '@/pages/Seo/types'

interface Props {
  page: PageDetail
  window_days: number
}

/**
 * Por qué búsquedas aparece una URL.
 *
 * Es la pregunta inversa de la ficha de consulta, y sale de la misma tabla leída
 * al revés. Sirve para lo que ninguna de las dos vistas por separado contesta:
 * si dos páginas del sitio compiten por la misma búsqueda, acá se ve desde el
 * lado de la página.
 */
export default function Page({ page, window_days }: Props) {
  return (
    <AppLayout
      title={t('seo.page.title')}
      description={t('seo.page.description', { days: window_days })}
      actions={
        <Button asChild variant="outline">
          {/*
            `rel` completo: es una dirección del sitio de la persona, pero la
            pestaña nueva hereda `window.opener` igual y no hay motivo para
            dárselo.
          */}
          <a href={page.page} target="_blank" rel="noopener noreferrer">
            {t('seo.page.open')}
            <ExternalLinkIcon aria-hidden />
          </a>
        </Button>
      }
    >
      <SectionCard title={{ text: t('seo.page.address') }}>
        <p className="text-sm break-all" translate="no">
          {page.page}
        </p>

        <dl className="grid gap-4 pt-2 sm:grid-cols-4">
          <Figure label={t('seo.column.position')} value={page.position.toFixed(1)} />
          <Figure label={t('seo.column.impressions')} value={formatNumber(page.impressions)} />
          <Figure label={t('seo.column.clicks')} value={formatNumber(page.clicks)} />
          <Figure label={t('seo.column.ctr')} value={`${(page.ctr * 100).toFixed(1)}%`} />
        </dl>
      </SectionCard>

      <SectionCard
        title={{ text: t('seo.page.keywords') }}
        description={t('seo.page.keywordsHelp')}
      >
        <MetricsTable
          caption={t('seo.page.keywords')}
          rows={page.keywords}
          rowKey={(keyword) => keyword.query}
          columns={[
            {
              header: t('seo.column.keyword'),
              cell: (keyword) => (
                <Link
                  href={`${route('seo.keyword')}?q=${encodeURIComponent(keyword.query)}`}
                  className="hover:underline"
                  translate="no"
                >
                  {keyword.query}
                </Link>
              ),
            },
            {
              header: t('seo.column.position'),
              numeric: true,
              cell: (keyword) => keyword.position.toFixed(1),
            },
            {
              header: t('seo.column.impressions'),
              numeric: true,
              cell: (keyword) => formatNumber(keyword.impressions),
            },
            {
              header: t('seo.column.clicks'),
              numeric: true,
              cell: (keyword) => formatNumber(keyword.clicks),
            },
          ]}
        />
      </SectionCard>
    </AppLayout>
  )
}

function Figure({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1">
      <dt className="text-muted-foreground text-xs">{label}</dt>
      <dd className="text-2xl font-semibold tabular-nums">{value}</dd>
    </div>
  )
}