import { Link } from '@inertiajs/react'
import type { ReactNode } from 'react'

import { Section } from '@/components/Section'
import { Button } from '@/components/ui/button'
import { t } from '@/lib/i18n'

interface Props {
  /** Los ejes: `FilterToggleGroup`, `FilterChips`, `FilterPopover`, la búsqueda. */
  children: ReactNode
  /**
   * Qué recorte está puesto, dicho con palabras.
   *
   * Es la línea de auditoría: la tabla dice «1.240 URLs» y esta línea dice de
   * cuáles. Sin ella, un filtro heredado de un enlace guardado se lee como el
   * total del sitio.
   */
  appliedSummary?: string
  /** La dirección sin ningún filtro. Ausente cuando no hay nada puesto. */
  clearHref?: string
}

/**
 * `C-1B-6` · La región de filtros de una lista.
 *
 * Los ejes van **en una línea** y se apilan solos cuando no entran; debajo, la
 * línea de auditoría y la salida. El título existe pero no se ve: una región de
 * filtros no necesita encabezado a la vista, pero sí necesita existir en el
 * árbol, o la vista queda sin forma de saltar de sección en sección.
 *
 * «Limpiar todo» es un enlace de verdad y no un botón que borra estado: el
 * recorte vive en la dirección, así que quitarlo es ir a otra dirección.
 */
export function FilterBar({ children, appliedSummary, clearHref }: Props) {
  return (
    <Section title={{ text: t('table.filters'), isHidden: true }}>
      <div className="flex flex-wrap items-end gap-x-6 gap-y-3">{children}</div>

      {appliedSummary || clearHref ? (
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          {appliedSummary ? (
            <p className="text-muted-foreground text-xs text-pretty">{appliedSummary}</p>
          ) : null}
          {clearHref ? (
            <Button asChild variant="ghost" size="sm">
              <Link href={clearHref} preserveScroll preserveState>
                {t('table.clearFilters')}
              </Link>
            </Button>
          ) : null}
        </div>
      ) : null}
    </Section>
  )
}