kycnotme/web/src/components/ServicesSearchResults.astro

---
import { Icon } from 'astro-icon/components'

import { cn } from '../lib/cn'
import { pluralize } from '../lib/pluralize'
import { createPageUrl } from '../lib/urls'

import Button from './Button.astro'
import ServiceCard from './ServiceCard.astro'

import type { ServicesFiltersObject } from '../pages/index.astro'
import type { ComponentProps, HTMLAttributes } from 'astro/types'

type Props = HTMLAttributes<'div'> & {
  hasDefaultFilters?: boolean
  services: ComponentProps<typeof ServiceCard>['service'][] | undefined
  currentPage?: number
  total: number
  pageSize: number
  sortSeed?: string
  filters: ServicesFiltersObject
  includeScams: boolean
}

const {
  services,
  hasDefaultFilters = false,
  currentPage = 1,
  total,
  pageSize,
  sortSeed,
  class: className,
  filters,
  includeScams,
  ...divProps
} = Astro.props

const hasScams =
  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  filters.verification.includes('VERIFICATION_FAILED') || includeScams

const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')

const totalPages = Math.ceil(total / pageSize) || 1
---

<div {...divProps} class={cn('flex-1', className)}>
  <div class="mb-6 flex items-center justify-between">
    <span class="text-day-500 text-sm">
      {total.toLocaleString()}
      {pluralize('result', total)}

      <span
        id="search-indicator"
        class="htmx-request:opacity-100 text-white opacity-0 transition-opacity duration-500"
      >
        <Icon name="ri:loader-4-line" class="inline-block size-4 animate-spin" />
        Loading...
      </span>
    </span>
    <Button as="a" href="/service-suggestion/new" label="Add service" icon="ri:add-line" />
  </div>

  {
    hasScams && hasCommunityContributed && (
      <div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
        <Icon name="ri:alert-fill" class="-mr-1 inline-block size-4 text-red-500" />
        <Icon name="ri:question-line" class="mr-2 inline-block size-4 text-yellow-500" />
        Showing SCAM and unverified community-contributed services.
        {includeScams && 'Because there is a text query.'}
      </div>
    )
  }

  {
    hasScams && !hasCommunityContributed && (
      <div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
        <Icon name="ri:alert-fill" class="mr-2 inline-block size-4 text-red-500" />
        {includeScams ? 'Showing SCAM services because there is a text query.' : 'Showing SCAM services!'}
      </div>
    )
  }

  {
    !hasScams && hasCommunityContributed && (
      <div class="font-title mb-6 rounded-lg border border-yellow-500/30 bg-yellow-950 p-4 text-sm text-yellow-500">
        <Icon name="ri:question-line" class="mr-2 inline-block size-4" />
        Showing unverified community-contributed services, some might be scams.
      </div>
    )
  }

  {
    !services || services.length === 0 ? (
      <div class="sticky top-20 flex flex-col items-center justify-center rounded-lg border border-green-500/30 bg-black/40 p-12 text-center">
        <Icon name="ri:emotion-sad-line" class="mb-4 size-16 text-green-500/50" />
        <h3 class="font-title mb-3 text-xl text-green-500">No services found</h3>
        <p class="text-day-400">Try adjusting your filters to find more services</p>
        <a
          href={Astro.url.pathname}
          class={cn(
            'bg-night-800 font-title mt-4 rounded-md px-4 py-2 text-sm tracking-wider text-white uppercase',
            hasDefaultFilters && 'hidden'
          )}
        >
          Clear filters
        </a>
      </div>
    ) : (
      <>
        <div class="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*80),1fr))]">
          {services.map((service, i) => (
            <ServiceCard
              inlineIcons
              service={service}
              data-hx-search-results-card
              {...(i === services.length - 1 && currentPage < totalPages
                ? {
                    'hx-get': createPageUrl(currentPage + 1, Astro.url, { 'sort-seed': sortSeed }),
                    'hx-trigger': 'revealed',
                    'hx-swap': 'afterend',
                    'hx-select': '[data-hx-search-results-card]',
                    'hx-indicator': '#infinite-scroll-indicator',
                  }
                : {})}
            />
          ))}
        </div>

        <div class="no-js:hidden mt-8 flex justify-center" id="infinite-scroll-indicator">
          <div class="htmx-request:opacity-100 flex items-center gap-2 opacity-0 transition-opacity duration-500">
            <Icon name="ri:loader-4-line" class="size-8 animate-spin text-green-500" />
            Loading more services...
          </div>
        </div>
      </>
    )
  }
</div>