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

const NUMBER_FORMATTER = new Intl.NumberFormat('en-US')

export default function GroupSummaryPanel({ group, artwork }) {
  if (!group) return null

  return (
    <section className="overflow-hidden rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
      <div className="flex items-start gap-4">
        <a href={group.urls?.public || '/groups'} className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
          {group.avatar_url ? <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
        </a>
        <div className="min-w-0 flex-1">
          <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Published as a group</div>
          <a href={group.urls?.public || '/groups'} className="mt-2 block text-xl font-semibold tracking-[-0.02em] text-white transition hover:text-sky-300">{group.name}</a>
          <p className="mt-2 text-sm leading-6 text-white/65">{group.headline || group.bio_excerpt || `${artwork?.title || 'This artwork'} is credited to a collaborative group identity on Skinbase.`}</p>
        </div>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        {(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, 3).map((signal) => (
          <GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
        ))}
        {group.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
      </div>

      <div className="mt-5 grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-black/20 p-3 text-center">
        <div>
          <div className="text-lg font-semibold text-white">{NUMBER_FORMATTER.format(Number(group.counts?.artworks || 0))}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Artworks</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-white">{NUMBER_FORMATTER.format(Number(group.counts?.members || 0))}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Members</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-white">{NUMBER_FORMATTER.format(Number(group.counts?.followers || 0))}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Followers</div>
        </div>
      </div>

      <div className="mt-5 flex flex-wrap gap-2">
        <a href={group.urls?.public || '/groups'} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">Open group page</a>
        {group.urls?.releases ? <a href={group.urls.releases} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Browse releases</a> : null}
      </div>
    </section>
  )
}