import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import type { ListData } from '@/types'

interface ListPreviewProps {
  list: ListData
  isSubscribed?: boolean
}

const PURPOSE_LABEL: Record<string, string> = {
  'app.bsky.graph.defs#modlist': 'Moderation List',
  'app.bsky.graph.defs#curatelist': 'Curation List',
  'app.bsky.graph.defs#referencelist': 'Reference List',
}

export function ListPreview({ list, isSubscribed }: ListPreviewProps) {
  const purposeLabel = PURPOSE_LABEL[list.purpose] ?? 'List'

  return (
    <div className="bg-card border border-border rounded-lg p-4 flex flex-col gap-3">
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
          <Avatar className="h-10 w-10 shrink-0">
            <AvatarImage
              src={list.creator.avatar}
              alt={list.creator.displayName ?? list.creator.handle}
            />
            <AvatarFallback>
              {(list.creator.displayName ?? list.creator.handle).charAt(0).toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div className="min-w-0">
            <p className="font-semibold text-sm truncate">{list.name}</p>
            <p className="text-xs text-muted-foreground">
              by @{list.creator.handle}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          <Badge variant="outline" className="text-xs">
            {purposeLabel}
          </Badge>
          {isSubscribed && (
            <Badge variant="outline" className="text-xs border-green-500/60 bg-green-500/10 text-green-400">
              Subscribed
            </Badge>
          )}
        </div>
      </div>

      {list.description && (
        <p className="text-sm text-foreground/80 leading-relaxed line-clamp-2">
          {list.description}
        </p>
      )}

      <div className="flex items-center justify-between text-xs text-muted-foreground">
        {list.memberCount != null && (
          <span>{list.memberCount.toLocaleString()} member{list.memberCount !== 1 ? 's' : ''}</span>
        )}
        <a
          href={list.url}
          target="_blank"
          rel="noopener noreferrer"
          className="hover:text-foreground transition-colors ml-auto"
        >
          View on Bluesky ↗
        </a>
      </div>
    </div>
  )
}