import Link from "next/link";

type MemberCardData = {
  id: string;
  profile:
    | {
        username: string;
        fullName: string;
        city: string | null;
        age: number | null;
        avatarPhoto: { thumbUrl: string; altText: string | null } | null;
      }
    | null;
  photos: { thumbUrl: string; altText: string | null }[];
  _count: { likesReceived: number };
};

function initials(fullName: string) {
  return fullName
    .split(" ")
    .map((part) => part[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

export function MemberCard({ member, featured = false }: { member: MemberCardData; featured?: boolean }) {
  const profile = member.profile;
  if (!profile) return null;

  const cover = profile.avatarPhoto ?? member.photos[0];
  const meta = [profile.city, profile.age ? `${profile.age}` : null].filter(Boolean).join(" · ");

  return (
    <Link
      href={`/profil/${profile.username}`}
      className={`card-lift group relative flex flex-col justify-end overflow-hidden rounded-2xl shadow-[0_1px_2px_rgba(30,15,8,.06),0_8px_20px_rgba(30,15,8,.08)] ${
        featured ? "h-full min-h-[280px]" : "aspect-[3/4]"
      }`}
    >
      {cover ? (
        <>
          {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
          <img
            src={cover.thumbUrl}
            alt={cover.altText ?? profile.fullName}
            className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" />
        </>
      ) : (
        <div className="absolute inset-0 bg-gradient-to-br from-accent via-accent-dark to-accent-2">
          <div className="pattern-diagonal absolute inset-0" />
          <div
            aria-hidden="true"
            className={`absolute inset-0 flex items-center justify-center font-heading text-white/20 ${
              featured ? "text-[64px]" : "text-[38px]"
            }`}
          >
            {initials(profile.fullName)}
          </div>
          <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-transparent to-transparent" />
        </div>
      )}

      {member._count.likesReceived > 0 && (
        <span className="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/35 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-sm">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 20s-7-4.35-9.5-8.5C.5 8 2 4 6 4c2 0 3.5 1.2 4 2.5C10.5 5.2 12 4 14 4c4 0 5.5 4 3.5 7.5C19 15.65 12 20 12 20z" />
          </svg>
          {member._count.likesReceived}
        </span>
      )}

      <div className={featured ? "relative p-6" : "relative p-4"}>
        <div className={`font-bold text-white ${featured ? "text-[22px]" : "text-[14.5px]"}`}>{profile.fullName}</div>
        {meta && <div className={`text-white/75 ${featured ? "text-[14px]" : "text-[12px]"}`}>{meta}</div>}
      </div>
    </Link>
  );
}