import React from 'react'

function EntityCard({ item, sectionKey }) {
  return (
    <a href={item.url} data-world-event="world_entity_clicked" data-world-section-key={sectionKey} data-world-entity-type={item.entity_type || ''} data-world-entity-id={item.id} data-world-entity-title={item.title || ''} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/15 hover:bg-white/[0.06]">
      <div className="flex items-center gap-3">
        {item.avatar ? <img src={item.avatar} alt="" className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : item.image ? <img src={item.image} alt="" className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500"><i className="fa-solid fa-user-group" /></div>}
        <div className="min-w-0 flex-1">
          {item.context_label ? <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.context_label}</div> : null}
          <div className="truncate text-sm font-semibold text-white">{item.title}</div>
          {item.subtitle ? <div className="truncate text-xs uppercase tracking-[0.14em] text-slate-500">{item.subtitle}</div> : null}
        </div>
      </div>
      {item.description ? <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p> : null}
    </a>
  )
}

function RewardedCard({ item }) {
  const creator = item?.creator || null

  if (!creator) {
    return null
  }

  return (
    <a href={creator.profile_url || '#'} data-world-event="world_entity_clicked" data-world-section-key="recap_rewarded" data-world-entity-type="creator" data-world-entity-id={creator.id || 0} data-world-entity-title={creator.name || creator.username || 'Creator'} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/15 hover:bg-white/[0.06]">
      <div className="flex items-center gap-3">
        {creator.avatar_url ? <img src={creator.avatar_url} alt={creator.username || creator.name} className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500"><i className="fa-solid fa-user" /></div>}
        <div className="min-w-0 flex-1">
          <div className="truncate text-sm font-semibold text-white">{creator.name || creator.username || 'Creator'}</div>
          <div className="truncate text-xs uppercase tracking-[0.14em] text-slate-500">{item.badge_label}</div>
        </div>
      </div>
      {item.artwork?.title ? <div className="mt-3 text-sm text-slate-300">{item.artwork.title}</div> : null}
    </a>
  )
}

export default function WorldRecapCreatorsPanel({ section }) {
  const items = Array.isArray(section?.items) ? section.items : []
  const rewarded = Array.isArray(section?.rewarded) ? section.rewarded.filter(Boolean) : []

  if (items.length === 0 && rewarded.length === 0) {
    return null
  }

  return (
    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
      <div className="mb-5">
        <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{section.title || 'Creators and groups'}</h2>
        {section.description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{section.description}</p> : null}
      </div>
      {items.length > 0 ? <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">{items.map((item) => <EntityCard key={`${item.entity_type}-${item.id}`} item={item} sectionKey="recap_creators" />)}</div> : null}
      {rewarded.length > 0 ? (
        <div className="mt-6">
          <div className="mb-4 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rewarded contributors</div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{rewarded.map((item) => <RewardedCard key={item.id} item={item} />)}</div>
        </div>
      ) : null}
    </section>
  )
}