'use client'

import Link from 'next/link'
import { FiChevronRight, FiUsers } from 'react-icons/fi'
import FamilyRoleBadge from '@/components/groups/FamilyRoleBadge'
import { hasValidImageSrc } from '@/lib/media/mediaGuards'
import { resolveMediaUrl } from '@/lib/media/resolveMediaUrl'
import { resolveGroupRoleBadge } from '@/lib/groups/groupRoleBadge'
import type { UserGroupListItem } from '@/server/groups/fetchUserGroups'

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

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

    return (
        <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-[10px] border border-gray-200 bg-gray-100 dark:border-white/10 dark:bg-neutral-800 sm:h-12 sm:w-12">
            {showImg ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                    src={src}
                    alt={name}
                    width={48}
                    height={48}
                    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-5 w-5" strokeWidth={1.75} aria-hidden />
                </span>
            )}
        </div>
    )
}

export default function UserFamilyCard({
    group,
    leaderLabel,
    deputyLabel,
    membersLabel,
}: {
    group: UserGroupListItem
    leaderLabel: string
    deputyLabel: string
    membersLabel: (count: number) => string
}) {
    const badge = resolveGroupRoleBadge(group.role)
    const isLeader = badge === 'leader'

    return (
        <Link href={`/groups/${encodeURIComponent(group.id)}`} className={surfaceCardClass}>
            <FamilyAvatar avatar={group.avatar} name={group.name} />
            <div className="min-w-0 flex-1">
                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
                    <span className="min-w-0 truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {group.name}
                    </span>
                    {badge ? (
                        <FamilyRoleBadge
                            variant={isLeader ? 'leader' : 'deputy'}
                            label={isLeader ? leaderLabel : deputyLabel}
                        />
                    ) : null}
                </div>
                <p
                    className="mt-0.5 flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400"
                    aria-label={membersLabel(group.membersCount)}
                >
                    <FiUsers className="h-3.5 w-3.5 shrink-0" strokeWidth={2} aria-hidden />
                    <span className="tabular-nums">{group.membersCount}</span>
                </p>
            </div>
            <FiChevronRight
                className="h-4 w-4 shrink-0 text-gray-500 dark:text-gray-400"
                strokeWidth={2}
                aria-hidden
            />
        </Link>
    )
}