import Image from 'next/image'
import Link from 'next/link'
import { Button } from './ui'
import type { Series } from '@/types/nostr'
import { t } from '@/lib/i18n'

interface SeriesCardProps {
  series: Series
  onSelect: (seriesId: string | undefined) => void
  selected?: boolean
}

function SeriesCardContent({ series, onSelect }: { series: Series; onSelect: (seriesId: string | undefined) => void }): React.ReactElement {
  return (
    <>
      {series.coverUrl && (
        <div className="relative w-full h-40 mb-3 rounded-lg overflow-hidden border border-neon-cyan/20">
          <Image
            src={series.coverUrl}
            alt={series.title}
            className="object-cover"
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
          />
        </div>
      )}
      <h3 className="text-lg font-semibold text-neon-cyan mb-2">{series.title}</h3>
      <p className="text-sm text-cyber-accent line-clamp-3 mb-3">{series.description}</p>
      <div className="mt-3 flex items-center justify-between text-sm text-cyber-accent/70">
        <span>{series.category === 'science-fiction' ? t('category.science-fiction') : t('category.scientific-research')}</span>
        <Button
          type="button"
          variant="primary"
          size="small"
          onClick={() => onSelect(series.id)}
        >
          {t('common.open')}
        </Button>
      </div>
      <div className="mt-2 text-xs text-neon-cyan/70">
        <Link href={`/series/${series.id}`} className="hover:text-neon-cyan transition-colors underline">
          {t('series.view')}
        </Link>
      </div>
    </>
  )
}

export function SeriesCard({ series, onSelect, selected }: SeriesCardProps): React.ReactElement {
  const cardClasses = selected
    ? 'border-neon-cyan ring-1 ring-neon-cyan/50 shadow-glow-cyan'
    : 'border-neon-cyan/30 hover:border-neon-cyan/50 hover:shadow-glow-cyan'
  return (
    <div className={`border rounded-lg p-4 bg-cyber-dark transition-all ${cardClasses}`}>
      <SeriesCardContent series={series} onSelect={onSelect} />
    </div>
  )
}