import React from 'react'
import GroupBadgePill from './GroupBadgePill'

export default function GroupProfileSummary({ contributions = [], href = null }) {
  if (!Array.isArray(contributions) || contributions.length === 0) return null

  const featured = contributions.slice(0, 3)

  return (
    <section className="mx-auto mt-8 max-w-6xl px-4 sm:px-6 lg:px-8">
      <div className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_18px_55px_rgba(2,6,23,0.28)] backdrop-blur-xl sm:p-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Group footprint</div>
            <h2 className="mt-2 text-2xl font-semibold text-white">Collaborative work across public groups</h2>
            <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">See the groups this creator contributes to through releases, credited artworks, and shared publishing activity.</p>
          </div>
          {href ? <a href={href} className="text-sm font-semibold text-sky-200 transition hover:text-white">View full contribution history</a> : null}
        </div>

        <div className="mt-5 grid gap-4 lg:grid-cols-3">
          {featured.map((entry) => (
            <a key={entry.group?.slug || entry.group?.id} href={entry.group?.profile_url || '/groups'} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20 hover:bg-black/30">
              <div className="flex items-start gap-4">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
                  {entry.group?.avatar_url ? <img src={entry.group.avatar_url} alt={entry.group?.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="truncate text-base font-semibold text-white">{entry.group?.name}</div>
                  {entry.role?.label ? <div className="mt-1 text-sm text-slate-400">{entry.role.label}</div> : null}
                  {entry.summary ? <div className="mt-2 text-sm text-slate-300">{entry.summary}</div> : null}
                </div>
              </div>

              <div className="mt-4 flex flex-wrap gap-2">
                {entry.trusted ? <GroupBadgePill label="Trusted contributor" tone="sky" /> : null}
                {entry.recent_release_titles?.length ? <GroupBadgePill label="Recent releases" tone="amber" /> : null}
              </div>

              <div className="mt-4 flex flex-wrap gap-4 text-xs text-slate-400">
                <span>{Number(entry.counts?.artworks || 0).toLocaleString()} artworks</span>
                <span>{Number(entry.counts?.releases || 0).toLocaleString()} releases</span>
                <span>{Number(entry.counts?.projects || 0).toLocaleString()} projects</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  )
}