'use client'

import Link from 'next/link'
import { FiChevronRight, FiUser, FiUsers } from 'react-icons/fi'
import { MdVerified } from 'react-icons/md'
import { hasValidImageSrc } from '@/lib/media/mediaGuards'
import { resolveMediaUrl } from '@/lib/media/resolveMediaUrl'
import { formatViews } from '@/utils/format'

const surfaceCardClass =
    'flex items-center gap-4 rounded-[12px] border border-gray-200 bg-white/90 px-4 py-3 dark:border-white/20 dark:bg-black/20 sm:gap-4 sm:px-4 sm:py-3.5'

export interface FamilyListItem {
    id: string
    name: string
    avatar?: string | null
    isVerified?: boolean
    artistsCount: number
    membersCount: number
}

function FamilyAvatar({ avatar, name }: { avatar: string | null; name: string }) {
    const src = resolveMediaUrl(avatar)
    const showImg = hasValidImageSrc(src)

    return (
        <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-gray-200 bg-gray-100 dark:border-white/10 dark:bg-neutral-800 sm:h-16 sm:w-16">
            {showImg ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                    src={src}
                    alt={name}
                    width={64}
                    height={64}
                    className="h-full w-full object-cover"
                    loading="lazy"
                    decoding="async"
                    referrerPolicy="no-referrer"
                />
            ) : (
                <span className="flex h-full w-full items-center justify-center text-gray-400 dark:text-white/50">
                    <FiUsers className="h-6 w-6 sm:h-7 sm:w-7" strokeWidth={1.75} aria-hidden />
                </span>
            )}
        </div>
    )
}

export default function FamilyListCard({
    family,
    membersLabel,
    artistsLabel,
    verifiedTitle,
}: {
    family: FamilyListItem
    membersLabel: (value: string) => string
    artistsLabel: (value: string) => string
    verifiedTitle: string
}) {
    return (
        <Link href={`/groups/${encodeURIComponent(family.id)}`} className={surfaceCardClass}>
            <FamilyAvatar avatar={family.avatar ?? null} name={family.name} />
            <div className="min-w-0 flex-1">
                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
                    <span className="min-w-0 truncate text-base font-semibold text-gray-900 dark:text-gray-100 sm:text-lg">
                        {family.name}
                    </span>
                    {family.isVerified ? (
                        <MdVerified
                            className="h-5 w-5 shrink-0 text-cyan-400"
                            title={verifiedTitle}
                            aria-label={verifiedTitle}
                        />
                    ) : null}
                </div>
                <p className="mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400">@{family.id}</p>
                <div className="mt-1.5 flex flex-wrap items-center gap-2">
                    <span className="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-neutral-800 dark:text-gray-200 sm:px-3 sm:py-1.5 sm:text-sm">
                        <FiUsers className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden />
                        {membersLabel(formatViews(family.membersCount))}
                    </span>
                    <span className="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-neutral-800 dark:text-gray-200 sm:px-3 sm:py-1.5 sm:text-sm">
                        <FiUser className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden />
                        {artistsLabel(formatViews(family.artistsCount))}
                    </span>
                </div>
            </div>
            <FiChevronRight
                className="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400"
                strokeWidth={2}
                aria-hidden
            />
        </Link>
    )
}

export function FamilyListCardSkeleton() {
    return (
        <div
            className="flex animate-pulse items-center gap-4 rounded-[12px] border border-gray-200 bg-white/90 px-4 py-3 dark:border-white/20 dark:bg-black/20 sm:px-4 sm:py-3.5"
            aria-hidden
        >
            <div className="h-14 w-14 shrink-0 rounded-xl bg-gray-200 dark:bg-neutral-800 sm:h-16 sm:w-16" />
            <div className="min-w-0 flex-1 space-y-2.5">
                <div className="h-5 w-40 rounded bg-gray-200 dark:bg-neutral-800 sm:h-6" />
                <div className="h-4 w-24 rounded bg-gray-200 dark:bg-neutral-800" />
                <div className="flex gap-2">
                    <div className="h-6 w-24 rounded-full bg-gray-200 dark:bg-neutral-800 sm:h-8 sm:w-28" />
                    <div className="h-6 w-24 rounded-full bg-gray-200 dark:bg-neutral-800 sm:h-8 sm:w-28" />
                </div>
            </div>
        </div>
    )
}