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

interface AuthorsListProps {
  authors: Article[]
  allAuthors: Article[]
  loading: boolean
  error: string | null
}

function AuthorCardSkeleton(): React.ReactElement {
  return (
    <div className="border border-neon-cyan/30 rounded-lg p-6 bg-cyber-dark space-y-4">
      <div className="flex items-center gap-4">
        <Skeleton variant="circular" width={64} height={64} />
        <div className="flex-1 space-y-2">
          <Skeleton variant="rectangular" height={20} className="w-2/3" />
          <Skeleton variant="rectangular" height={16} className="w-1/2" />
        </div>
      </div>
      <Skeleton variant="rectangular" height={60} className="w-full" />
    </div>
  )
}

function LoadingState(): React.ReactElement {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {Array.from({ length: 4 }, (_, index) => (
        <AuthorCardSkeleton key={`author-skeleton-${index}`} />
      ))}
    </div>
  )
}

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

function AuthorsErrorState({ 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'))
        }
      }}
    />
  )
}

export function AuthorsList({ authors, allAuthors, loading, error }: AuthorsListProps): React.ReactElement {
  const containerRef = useRef<HTMLDivElement>(null)
  useArrowNavigation({ itemCount: authors.length, containerRef, enabled: !loading && authors.length > 0 })

  if (loading) {
    return <LoadingState />
  }
  if (error) {
    return <AuthorsErrorState error={error} />
  }
  if (authors.length === 0) {
    return <AuthorsEmptyState hasAny={allAuthors.length > 0} />
  }

  return (
    <section id="articles-section" aria-label={t('navigation.authorsSection')} tabIndex={-1}>
      <div className="mb-4 text-sm text-cyber-accent/70">
        Showing {authors.length} of {allAuthors.length} author{allAuthors.length !== 1 ? 's' : ''}
      </div>
      <div ref={containerRef} className="grid grid-cols-1 md:grid-cols-2 gap-6" role="list">
        {authors.map((author) => (
          <div key={author.pubkey} role="listitem">
            <AuthorCard presentation={author} />
          </div>
        ))}
      </div>
    </section>
  )
}