story-research-zapwall/components/ArticlesList.tsx

import { useRef } from 'react'
import type { Article } from '@/types/nostr'
import { ArticleCard } from './ArticleCard'
import { ErrorState, EmptyState, Skeleton, Button } from './ui'
import { t } from '@/lib/i18n'
import { useArrowNavigation } from '@/hooks/useArrowNavigation'
import { usePagination } from '@/hooks/usePagination'

interface ArticlesListProps {
  articles: Article[]
  allArticles: Article[]
  loading: boolean
  error: string | null
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}

const ITEMS_PER_PAGE = 10

function ArticleCardSkeleton(): React.ReactElement {
  return (
    <div className="border border-neon-cyan/30 rounded-lg p-6 bg-cyber-dark space-y-4">
      <div className="space-y-2">
        <Skeleton variant="rectangular" height={24} className="w-3/4" />
        <Skeleton variant="rectangular" height={16} className="w-1/2" />
      </div>
      <Skeleton variant="rectangular" height={100} className="w-full" />
      <div className="flex items-center justify-between">
        <Skeleton variant="circular" width={32} height={32} />
        <Skeleton variant="rectangular" height={36} className="w-32" />
      </div>
    </div>
  )
}

function LoadingState(): React.ReactElement {
  return (
    <div className="space-y-6">
      {Array.from({ length: 3 }, (_, index) => (
        <ArticleCardSkeleton key={`article-skeleton-${index}`} />
      ))}
    </div>
  )
}

function ArticlesEmptyState({ hasAny }: { hasAny: boolean }): React.ReactElement {
  return (
    <EmptyState
      title={hasAny ? t('common.empty.articles.filtered') : t('common.empty.articles')}
    />
  )
}

function ArticlesErrorState({ error }: { error: string }): React.ReactElement {
  const errorObj = new Error(error)
  return (
    <ErrorState
      message={error}
      error={errorObj}
      onRetry={() => {
        window.location.reload()
      }}
      onCheckConnection={() => {
        if (navigator.onLine) {
          window.location.reload()
        } else {
          // eslint-disable-next-line no-alert
          alert(t('errors.network.offline'))
        }
      }}
    />
  )
}

function PaginationInfo({ currentPage, totalPages }: { currentPage: number; totalPages: number }): React.ReactElement {
  const stepText = t('pagination.page', { current: currentPage, total: totalPages })
  return (
    <div className="text-sm text-cyber-accent/70">
      {stepText}
    </div>
  )
}

function PaginationButtons({
  onNext,
  onPrevious,
  hasNext,
  hasPrevious,
}: {
  onNext: () => void
  onPrevious: () => void
  hasNext: boolean
  hasPrevious: boolean
}): React.ReactElement {
  return (
    <div className="flex gap-2">
      <Button
        type="button"
        variant="secondary"
        size="small"
        onClick={onPrevious}
        disabled={!hasPrevious}
      >
        {t('pagination.previous')}
      </Button>
      <Button
        type="button"
        variant="secondary"
        size="small"
        onClick={onNext}
        disabled={!hasNext}
      >
        {t('pagination.next')}
      </Button>
    </div>
  )
}

function PaginationControls({
  currentPage,
  totalPages,
  onNext,
  onPrevious,
  hasNext,
  hasPrevious,
}: {
  currentPage: number
  totalPages: number
  onNext: () => void
  onPrevious: () => void
  hasNext: boolean
  hasPrevious: boolean
}): React.ReactElement {
  return (
    <div className="flex items-center justify-between mt-6 pt-4 border-t border-neon-cyan/30">
      <PaginationInfo currentPage={currentPage} totalPages={totalPages} />
      <PaginationButtons
        onNext={onNext}
        onPrevious={onPrevious}
        hasNext={hasNext}
        hasPrevious={hasPrevious}
      />
    </div>
  )
}

function ArticlesListItems({
  articles,
  allArticles,
  onUnlock,
  unlockedArticles,
}: {
  articles: Article[]
  allArticles: Article[]
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}): React.ReactElement {
  return (
    <div className="space-y-6" role="list">
      {articles.map((article) => (
        <div key={article.id} role="listitem">
          <ArticleCard
            article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
            onUnlock={onUnlock}
            allArticles={allArticles}
            unlockedArticles={unlockedArticles}
          />
        </div>
      ))}
    </div>
  )
}

function ArticlesListContent({
  articles,
  allArticles,
  onUnlock,
  unlockedArticles,
  containerRef,
}: {
  articles: Article[]
  allArticles: Article[]
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
  containerRef: React.RefObject<HTMLDivElement | null>
}): React.ReactElement {
  const pagination = usePagination({ items: articles, itemsPerPage: ITEMS_PER_PAGE })
  const showingText = t('pagination.showing', {
    current: pagination.paginatedItems.length,
    total: articles.length,
    all: allArticles.length,
  })

  return (
    <section id="articles-section" aria-label={t('navigation.articlesSection')} tabIndex={-1}>
      <div className="mb-4 text-sm text-cyber-accent/70">
        {showingText}
      </div>
      <div ref={containerRef}>
        <ArticlesListItems
          articles={pagination.paginatedItems}
          allArticles={allArticles}
          onUnlock={onUnlock}
          unlockedArticles={unlockedArticles}
        />
      </div>
      {pagination.totalPages > 1 && (
        <PaginationControls
          currentPage={pagination.currentPage}
          totalPages={pagination.totalPages}
          onNext={pagination.nextPage}
          onPrevious={pagination.previousPage}
          hasNext={pagination.hasNextPage}
          hasPrevious={pagination.hasPreviousPage}
        />
      )}
    </section>
  )
}

export function ArticlesList({
  articles,
  allArticles,
  loading,
  error,
  onUnlock,
  unlockedArticles,
}: ArticlesListProps): React.ReactElement {
  const containerRef = useRef<HTMLDivElement>(null)
  useArrowNavigation({ itemCount: articles.length, containerRef, enabled: !loading && articles.length > 0 })

  if (loading) {
    return <LoadingState />
  }
  if (error) {
    return <ArticlesErrorState error={error} />
  }
  if (articles.length === 0) {
    return <ArticlesEmptyState hasAny={allArticles.length > 0} />
  }

  return (
    <ArticlesListContent
      articles={articles}
      allArticles={allArticles}
      onUnlock={onUnlock}
      unlockedArticles={unlockedArticles}
      containerRef={containerRef}
    />
  )
}