import React from 'react'

const FALLBACK        = 'https://files.skinbase.org/default/missing_md.webp'
const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'

function ArtCard({ item }) {
  const username = item.author_username ? `@${item.author_username}` : null
  return (
    <article>
      <a
        href={item.url}
        className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
      >
        <div className="relative aspect-video overflow-hidden bg-neutral-900">
          <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
          <img
            src={item.thumb || FALLBACK}
            alt={item.title}
            className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
            loading="lazy"
            decoding="async"
            onError={(e) => { e.currentTarget.src = FALLBACK }}
          />
          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100">
            <div className="truncate text-sm font-semibold text-white">{item.title}</div>
            <div className="mt-1 flex items-center gap-2 text-xs text-white/80">
              <img
                src={item.author_avatar || AVATAR_FALLBACK}
                alt={item.author}
                className="w-5 h-5 rounded-full object-cover shrink-0"
                onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
              />
              <span className="truncate">{item.author}</span>
              {username && <span className="text-white/50 shrink-0">{username}</span>}
            </div>
          </div>
        </div>
        <span className="sr-only">{item.title} by {item.author}</span>
      </a>
    </article>
  )
}

export default function HomeFromFollowing({ items }) {
  // Empty state: user follows nobody
  if (!Array.isArray(items) || items.length === 0) {
    return (
      <section className="mt-14 px-4 sm:px-6 lg:px-8">
        <div className="mb-5 flex items-center justify-between">
          <h2 className="text-xl font-bold text-white">👥 From Creators You Follow</h2>
        </div>
        <div className="rounded-2xl border border-white/5 bg-nova-800/40 px-6 py-10 text-center">
          <p className="text-sm text-soft">You're not following anyone yet.</p>
          <p className="mt-1 text-xs text-nova-400">
            Follow creators you love to see their latest uploads here.
          </p>
          <a
            href="/creators/top"
            className="mt-4 inline-flex items-center rounded-xl bg-nova-700 px-4 py-2 text-sm font-medium text-white hover:bg-nova-600 transition"
          >
            Discover creators →
          </a>
        </div>
      </section>
    )
  }

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-center justify-between">
        <h2 className="text-xl font-bold text-white">👥 From Creators You Follow</h2>
        <a href="/discover/following" className="text-sm text-nova-300 hover:text-white transition">
          See all →
        </a>
      </div>
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
        {items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
          <ArtCard key={item.id} item={item} />
        ))}
      </div>
    </section>
  )
}