import React from 'react'
import GroupBadgePill from './GroupBadgePill'
import { formatProfileNumber } from '../../lib/profileFormatters'

export function normalizeGroupContribution(entry = {}) {
  const counts = entry?.counts || {}
  const role = entry?.role

  return {
    ...entry,
    roleLabel: typeof role === 'string' ? role : role?.label || null,
    trusted: entry?.trusted_indicator ?? entry?.trusted ?? false,
    counts: {
      ...counts,
      credited_artworks: counts.credited_artworks ?? counts.artworks ?? 0,
      releases: counts.releases ?? 0,
      projects: counts.projects ?? 0,
      review_actions: counts.review_actions ?? 0,
    },
    role_labels: Array.isArray(entry?.role_labels) ? entry.role_labels : [],
    recent_release_titles: Array.isArray(entry?.recent_release_titles) ? entry.recent_release_titles : [],
  }
}

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

  const featured = contributions.slice(0, 3).map(normalizeGroupContribution)

  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.roleLabel ? <div className="mt-1 text-sm text-slate-400">{entry.roleLabel}</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}
                {entry.role_labels.map((label, index) => <GroupBadgePill key={`${label}-${index}`} label={label} tone="slate" />)}
              </div>

              {entry.recent_release_titles.length ? (
                <div className="mt-3 text-xs text-slate-400">
                  <span className="font-semibold text-slate-300">Recent releases:</span>{' '}
                  {entry.recent_release_titles.join(', ')}
                </div>
              ) : null}

              <div className="mt-4 flex flex-wrap gap-4 text-xs text-slate-400">
                <span>{formatProfileNumber(entry.counts.credited_artworks)} artworks</span>
                <span>{formatProfileNumber(entry.counts.releases)} releases</span>
                <span>{formatProfileNumber(entry.counts.projects)} projects</span>
                <span>{formatProfileNumber(entry.counts.review_actions)} reviews</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  )
}