import React, { useState } from 'react'
import { router, usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import useWebShare from '../../hooks/useWebShare'

function normalizeText(value) {
  return String(value || '').trim().toLowerCase()
}

function formatCompactNumber(value) {
  return Number(value ?? 0).toLocaleString()
}

function formatDateLabel(value) {
  if (!value) return null

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return null

  return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
}

function websiteLabel(url) {
  if (!url) return null

  try {
    const parsed = new URL(url.startsWith('http') ? url : `https://${url}`)
    return parsed.hostname
  } catch {
    return String(url).replace(/^https?:\/\//, '')
  }
}

const SECTION_TABS = [
  { id: 'overview', label: 'Overview', icon: 'fa-compass' },
  { id: 'artworks', label: 'Artworks', icon: 'fa-images' },
  { id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
  { id: 'posts', label: 'Posts', icon: 'fa-newspaper' },
  { id: 'projects', label: 'Projects', icon: 'fa-diagram-project' },
  { id: 'releases', label: 'Releases', icon: 'fa-rocket' },
  { id: 'challenges', label: 'Challenges', icon: 'fa-trophy' },
  { id: 'events', label: 'Events', icon: 'fa-calendar-days' },
  { id: 'activity', label: 'Activity', icon: 'fa-bolt' },
  { id: 'members', label: 'Members', icon: 'fa-users' },
  { id: 'about', label: 'About', icon: 'fa-id-card' },
]

function sectionHref(baseUrl, tab) {
  return tab === 'overview' ? baseUrl : `${baseUrl}/${tab}`
}

function GroupTabs({ baseUrl, activeSection }) {
  return (
    <div className="sticky top-0 z-30 border-b border-white/10 bg-[#08111f]/80 backdrop-blur-2xl">
      <nav className="overflow-x-auto scrollbar-hide" aria-label="Group sections">
        <div className="mx-auto flex w-max min-w-full gap-2 px-3 py-3 justify-center xl:items-stretch">
          {SECTION_TABS.map((tab) => {
            const isActive = activeSection === tab.id

            return (
              <a
                key={tab.id}
                href={sectionHref(baseUrl, tab.id)}
                className={`group relative flex items-center gap-2.5 rounded-2xl border px-3.5 py-3 text-sm font-medium whitespace-nowrap outline-none transition-all duration-150 ${isActive
                  ? 'border-sky-300/25 bg-gradient-to-br from-sky-400/18 via-white/[0.06] to-cyan-400/10 text-white shadow-[0_16px_32px_rgba(14,165,233,0.12)]'
                  : 'border-white/8 bg-white/[0.03] text-slate-400 hover:border-white/15 hover:bg-white/[0.05] hover:text-slate-100'
                }`}
              >
                <span className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border text-sm ${isActive ? 'border-sky-300/20 bg-sky-400/10 text-sky-200' : 'border-white/10 bg-white/[0.04] text-slate-500 group-hover:text-slate-300'}`}>
                  <i className={`fa-solid ${tab.icon} fa-fw`} />
                </span>
                {tab.label}
                {isActive ? <span className="absolute inset-x-4 bottom-0 h-0.5 rounded-full bg-sky-300 shadow-[0_0_10px_rgba(125,211,252,0.8)]" aria-hidden="true" /> : null}
              </a>
            )
          })}
        </div>
      </nav>
    </div>
  )
}

function GroupHero({
  group,
  recruitment,
  trustSignals,
  following,
  followersCount,
  currentJoinRequest,
  shareLabel,
  onToggleFollow,
  onJoinRequest,
  onWithdrawJoinRequest,
  onShare,
  onReport,
  reportEndpoint,
}) {
  const activeSignals = Array.isArray(trustSignals) ? trustSignals.slice(0, 3) : []
  const joinDate = formatDateLabel(group.founded_at || group.created_at)
  const heroStats = [
    { label: 'Followers', value: formatCompactNumber(followersCount) },
    { label: 'Members', value: formatCompactNumber(group.counts?.members) },
    { label: 'Artworks', value: formatCompactNumber(group.counts?.artworks) },
    { label: 'Collections', value: formatCompactNumber(group.counts?.collections) },
  ]

  return (
    <div className="relative mx-auto max-w-7xl px-4 pt-4 md:pt-6">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-10 top-8 -z-10 h-44 rounded-full blur-3xl"
        style={{
          background: 'linear-gradient(90deg, rgba(56,189,248,0.18), rgba(16,185,129,0.14), rgba(59,130,246,0.12))',
        }}
      />

      <div className="relative overflow-hidden rounded-[32px] border border-white/10 bg-[#09111f]/80 shadow-[0_24px_80px_rgba(2,6,23,0.55)]">
        <div
          className="w-full h-[208px] md:h-[248px] xl:h-[288px]"
          style={{
            background: group.banner_url
              ? `url('${group.banner_url}') center center / cover no-repeat`
              : 'linear-gradient(140deg, #07101d 0%, #0b1726 42%, #07111e 100%)',
            position: 'relative',
          }}
        >
          <div className="absolute left-4 top-4 z-20 flex flex-wrap items-center gap-2 md:left-6 md:top-6">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-black/30 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-200 backdrop-blur-md">
              <span className="h-2 w-2 rounded-full bg-sky-400 shadow-[0_0_12px_rgba(56,189,248,0.9)]" />
              Group profile
            </span>
            {group.is_verified ? (
              <span className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100 backdrop-blur-md">
                <i className="fa-solid fa-badge-check text-[10px]" />
                Verified
              </span>
            ) : null}
            {recruitment?.is_recruiting ? (
              <span className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100 backdrop-blur-md">
                <i className="fa-solid fa-user-plus text-[10px]" />
                Recruiting
              </span>
            ) : null}
          </div>

          <div
            className="absolute inset-0"
            style={{
              background: group.banner_url
                ? 'linear-gradient(180deg, rgba(2,6,23,0.16) 0%, rgba(2,6,23,0.28) 38%, rgba(2,6,23,0.9) 100%)'
                : 'radial-gradient(ellipse at 16% 40%, rgba(77,163,255,.18) 0%, transparent 60%), radial-gradient(ellipse at 84% 22%, rgba(16,185,129,.14) 0%, transparent 54%)',
            }}
          />
          <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '32px' }} />
        </div>

        <div className="relative px-4 pb-6 md:px-7 md:pb-7">
          <div className="relative -mt-16 flex flex-col gap-5 md:-mt-20 md:flex-row md:items-start md:gap-6">
            <div className="mx-auto z-10 shrink-0 md:mx-0">
              <div className="flex h-[112px] w-[112px] items-center justify-center overflow-hidden rounded-[28px] border border-white/15 bg-[#0b1320] shadow-[0_0_0_8px_rgba(9,17,31,0.92),0_22px_44px_rgba(2,6,23,0.5)] md:h-[132px] md:w-[132px]">
                {group.avatar_url ? (
                  <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" />
                ) : (
                  <i className="fa-solid fa-people-group text-4xl text-slate-300" />
                )}
              </div>
            </div>

            <div className="min-w-0 flex-1 text-center md:text-left">
              <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_430px] xl:items-start">
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center justify-center gap-2 md:justify-start">
                    <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">
                      <i className="fa-solid fa-stars text-[10px] text-sky-300" />
                      Publishing collective
                    </span>
                    {group.owner?.username || group.owner?.name ? (
                      <a href={group.owner?.profile_url || '#'} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
                        <i className="fa-solid fa-user-gear text-[10px] text-slate-400" />
                        Led by {group.owner?.username || group.owner?.name}
                      </a>
                    ) : null}
                  </div>

                  <h1 className="mt-3 text-[30px] font-semibold leading-tight tracking-[-0.03em] text-white md:text-[42px]">
                    {group.name}
                  </h1>
                  <p className="mt-1 font-mono text-sm text-slate-400 md:text-[15px]">@{group.slug}</p>

                  <div className="mt-4 flex flex-wrap items-center justify-center gap-2 md:justify-start">
                    {group.visibility ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.visibility}</span> : null}
                    {group.status ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.status}</span> : null}
                    {group.type ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.type}</span> : null}
                    {joinDate ? (
                      <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">
                        <i className="fa-solid fa-calendar-days fa-fw text-slate-500" />
                        Since {joinDate}
                      </span>
                    ) : null}
                    {group.website_url ? (
                      <a
                        href={group.website_url.startsWith('http') ? group.website_url : `https://${group.website_url}`}
                        target="_blank"
                        rel="nofollow noopener noreferrer"
                        className="inline-flex items-center gap-1.5 rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1.5 text-xs text-sky-200 transition-colors hover:border-sky-300/35 hover:bg-sky-400/15"
                      >
                        <i className="fa-solid fa-link fa-fw" />
                        {websiteLabel(group.website_url)}
                      </a>
                    ) : null}
                  </div>

                  {group.headline ? <p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-slate-300/90 md:mx-0 md:text-[15px]">{group.headline}</p> : null}
                  {group.bio ? <p className="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-slate-400 md:mx-0 line-clamp-3">{group.bio}</p> : null}

                  {activeSignals.length > 0 ? (
                    <div className="mt-4 flex flex-wrap items-center justify-center gap-2 md:justify-start">
                      {activeSignals.map((signal) => (
                        <span key={signal.key} className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
                          <span className="h-1.5 w-1.5 rounded-full bg-cyan-300" />
                          {signal.label}
                        </span>
                      ))}
                    </div>
                  ) : null}
                </div>

                <div className="space-y-3 xl:pt-1">
                  <div className="flex flex-wrap items-center justify-center gap-2 xl:flex-nowrap xl:justify-end">
                    {group.urls?.studio ? (
                      <a
                        href={group.urls.studio}
                        className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-400 px-4 py-2.5 text-sm font-semibold text-slate-950 shadow-[0_18px_36px_rgba(14,165,233,0.28)] transition-transform hover:-translate-y-0.5"
                      >
                        <i className="fa-solid fa-wand-magic-sparkles fa-fw" />
                        Open Studio
                      </a>
                    ) : null}
                    {group.urls?.follow ? (
                      <button
                        type="button"
                        onClick={onToggleFollow}
                        className={`inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border px-4 py-2.5 text-sm font-medium transition-all ${following ? 'border-emerald-400/40 bg-emerald-500/12 text-emerald-300 hover:bg-emerald-500/18' : 'border-sky-400/40 bg-sky-500/12 text-sky-200 hover:bg-sky-500/20'}`}
                      >
                        <i className={`fa-solid ${following ? 'fa-circle-check' : 'fa-user-plus'} fa-fw`} />
                        {following ? 'Following' : 'Follow group'}
                      </button>
                    ) : null}
                    {group.permissions?.can_request_join ? (
                      <button
                        type="button"
                        onClick={onJoinRequest}
                        className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-emerald-300/25 bg-emerald-300/10 px-4 py-2.5 text-sm font-medium text-emerald-100 transition hover:bg-emerald-300/15"
                      >
                        <i className="fa-solid fa-door-open fa-fw" />
                        Request to join
                      </button>
                    ) : null}
                    {currentJoinRequest?.status === 'pending' ? (
                      <button
                        type="button"
                        onClick={onWithdrawJoinRequest}
                        className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
                      >
                        <i className="fa-solid fa-xmark fa-fw" />
                        Withdraw request
                      </button>
                    ) : null}
                    <button
                      type="button"
                      onClick={onShare}
                      className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
                    >
                      <i className="fa-solid fa-share-nodes fa-fw" />
                      {shareLabel}
                    </button>
                    {reportEndpoint ? (
                      <button
                        type="button"
                        onClick={onReport}
                        className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
                      >
                        <i className="fa-solid fa-flag fa-fw" />
                        Report
                      </button>
                    ) : null}
                  </div>

                  <div className="rounded-[24px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.72),rgba(9,17,31,0.92))] p-3 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
                    <div className="grid grid-cols-2 gap-2">
                      {heroStats.map((fact) => (
                        <div key={fact.label} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2.5">
                          <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">{fact.label}</div>
                          <div className="mt-1 text-sm font-semibold tracking-tight text-white md:text-[15px]">{fact.value}</div>
                        </div>
                      ))}
                    </div>

                    <div className="mt-2.5 flex flex-wrap items-center gap-2">
                      {group.owner?.username || group.owner?.name ? (
                        <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
                          <i className="fa-solid fa-crown text-[10px] text-amber-300" />
                          Owner {group.owner?.username || group.owner?.name}
                        </span>
                      ) : null}
                      {recruitment?.headline ? (
                        <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
                          <i className="fa-solid fa-bullhorn text-[10px] text-sky-300" />
                          {recruitment.headline}
                        </span>
                      ) : null}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function ArtworkGrid({ artworks, emptyLabel = 'No artworks yet.' }) {
  if (!Array.isArray(artworks) || artworks.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      {artworks.map((artwork) => (
        <a key={artwork.id} href={artwork.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20 transition hover:border-white/20">
          {artwork.thumb ? <img src={artwork.thumb} alt={artwork.title} className="aspect-[4/3] w-full object-cover" /> : null}
          <div className="p-4">
            <h3 className="text-base font-semibold text-white">{artwork.title}</h3>
            <p className="mt-1 text-sm text-slate-400">{artwork.author}</p>
          </div>
        </a>
      ))}
    </div>
  )
}

function CollectionGrid({ collections, emptyLabel = 'No collections yet.' }) {
  if (!Array.isArray(collections) || collections.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 grid gap-4 md:grid-cols-2">
      {collections.map((collection) => (
        <a key={collection.id} href={collection.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
          <div className="flex items-start justify-between gap-3">
            <div>
              <h3 className="text-base font-semibold text-white">{collection.title}</h3>
              <p className="mt-2 text-sm text-slate-300">{collection.summary || collection.description_excerpt || 'Collection'}</p>
            </div>
            {collection.is_featured ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">Featured</span> : null}
          </div>
        </a>
      ))}
    </div>
  )
}

function CompactCardGrid({ items, emptyLabel, badgeKey = 'status' }) {
  if (!Array.isArray(items) || items.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {items.map((item) => (
        <a key={item.id} href={item.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
          <div className="flex items-center justify-between gap-3">
            <h3 className="text-base font-semibold text-white">{item.title}</h3>
            {item[badgeKey] ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item[badgeKey]}</span> : null}
          </div>
          <p className="mt-2 text-sm leading-6 text-slate-300">{item.summary || 'Open for more details.'}</p>
        </a>
      ))}
    </div>
  )
}

function ReleaseGrid({ releases, emptyLabel = 'No public releases yet.' }) {
  if (!Array.isArray(releases) || releases.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {releases.map((release) => (
        <a key={release.id} href={release.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20 transition hover:border-white/20">
          {release.cover_url ? <img src={release.cover_url} alt={release.title} className="aspect-[4/3] w-full object-cover" /> : <div className="flex aspect-[4/3] items-center justify-center bg-white/[0.03] text-slate-500"><i className="fa-solid fa-rocket text-2xl" /></div>}
          <div className="p-4">
            <div className="flex flex-wrap items-center gap-2">
              <span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{release.status}</span>
              <span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{release.current_stage}</span>
            </div>
            <h3 className="mt-3 text-base font-semibold text-white">{release.title}</h3>
            <p className="mt-2 text-sm leading-6 text-slate-300">{release.summary || 'Release overview and linked artworks.'}</p>
            <div className="mt-3 text-xs text-slate-500">{release.counts?.artworks || 0} artworks • {release.counts?.contributors || 0} contributors • {release.counts?.milestones || 0} milestones</div>
          </div>
        </a>
      ))}
    </div>
  )
}

function AssetGrid({ assets, emptyLabel = 'No public resources yet.' }) {
  if (!Array.isArray(assets) || assets.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {assets.map((asset) => (
        <a key={asset.id} href={asset.download_url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{asset.category}</div>
          <h3 className="mt-2 text-base font-semibold text-white">{asset.title}</h3>
          <p className="mt-2 text-sm leading-6 text-slate-300">{asset.description || 'Download this shared group asset.'}</p>
        </a>
      ))}
    </div>
  )
}

function ActivityFeed({ items, emptyLabel = 'No public activity yet.' }) {
  if (!Array.isArray(items) || items.length === 0) {
    return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
  }

  return (
    <div className="mt-5 space-y-3">
      {items.map((item) => (
        <div key={item.id} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="text-base font-semibold text-white">{item.headline}</h3>
            {item.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Pinned</span> : null}
          </div>
          {item.summary ? <p className="mt-2 text-sm leading-6 text-slate-300">{item.summary}</p> : null}
          <div className="mt-2 text-xs text-slate-500">{item.actor?.name || item.actor?.username || 'System'} • {item.occurred_at ? new Date(item.occurred_at).toLocaleString() : 'Recently'}</div>
          {item.subject?.url ? <a href={item.subject.url} className="mt-3 inline-flex text-sm font-semibold text-sky-200">Open</a> : null}
        </div>
      ))}
    </div>
  )
}

function LeadershipPreview({ leadership }) {
  if (!Array.isArray(leadership) || leadership.length === 0) {
    return null
  }

  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Leadership</p>
          <h2 className="mt-2 text-2xl font-semibold text-white">Owner and admins</h2>
        </div>
      </div>
      <div className="mt-5 grid gap-3 sm:grid-cols-2">
        {leadership.map((member) => (
          <a key={member.id} href={member.profile_url || '#'} className="flex items-center gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
            {member.avatar_url ? <img src={member.avatar_url} alt={member.name || member.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
            <div className="min-w-0">
              <div className="truncate font-semibold text-white">{member.name || member.username}</div>
              <div className="text-xs uppercase tracking-[0.16em] text-slate-400">{member.role_label || member.role}</div>
            </div>
          </a>
        ))}
      </div>
    </section>
  )
}

function FocusCard({ eyebrow, item, badgeKey = 'status', ctaLabel }) {
  if (!item?.title) {
    return null
  }

  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">{eyebrow}</p>
      <div className="mt-2 flex items-center gap-3">
        <h2 className="text-2xl font-semibold text-white">{item.title}</h2>
        {item[badgeKey] ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item[badgeKey]}</span> : null}
      </div>
      <p className="mt-4 text-sm leading-7 text-slate-300">{item.summary || 'Open for more details.'}</p>
      <a href={item.url} className="mt-4 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">{ctaLabel}</a>
    </section>
  )
}

function TrustSignalPanel({ signals }) {
  if (!Array.isArray(signals) || signals.length === 0) {
    return null
  }

  const toneClasses = {
    sky: 'border-sky-300/20 bg-sky-300/10 text-sky-100',
    emerald: 'border-emerald-300/20 bg-emerald-300/10 text-emerald-100',
    amber: 'border-amber-300/20 bg-amber-300/10 text-amber-100',
    violet: 'border-violet-300/20 bg-violet-300/10 text-violet-100',
  }

  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Trust signals</p>
      <h2 className="mt-2 text-2xl font-semibold text-white">How this group shows up</h2>
      <div className="mt-4 flex flex-wrap gap-2">
        {signals.map((signal) => <span key={signal.key} className={`rounded-full border px-3 py-2 text-sm font-semibold ${toneClasses[signal.tone] || 'border-white/10 bg-white/[0.04] text-white'}`}>{signal.label}</span>)}
      </div>
      <div className="mt-5 space-y-3">
        {signals.map((signal) => <div key={`${signal.key}-reason`} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><div className="font-semibold text-white">{signal.label}</div><p className="mt-2 text-sm leading-6 text-slate-400">{signal.reason}</p></div>)}
      </div>
    </section>
  )
}

function BadgeShowcase({ badges }) {
  if (!Array.isArray(badges) || badges.length === 0) {
    return null
  }

  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Badges</p>
      <h2 className="mt-2 text-2xl font-semibold text-white">Earned group signals</h2>
      <div className="mt-5 grid gap-3">
        {badges.map((badge) => (
          <div key={badge.key} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
            <div className="flex items-center justify-between gap-3">
              <div className="font-semibold text-white">{badge.label}</div>
              {badge.awarded_at ? <div className="text-xs text-slate-500">{new Date(badge.awarded_at).toLocaleDateString()}</div> : null}
            </div>
            <p className="mt-2 text-sm leading-6 text-slate-400">{badge.reason}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

function ContributorHighlights({ contributors }) {
  if (!Array.isArray(contributors) || contributors.length === 0) {
    return null
  }

  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Contributors</p>
      <h2 className="mt-2 text-2xl font-semibold text-white">Trusted collaborators</h2>
      <div className="mt-5 space-y-3">
        {contributors.map((entry) => (
          <a key={entry.user?.id} href={entry.user?.profile_url || '#'} className="flex gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
            {entry.user?.avatar_url ? <img src={entry.user.avatar_url} alt={entry.user?.name || entry.user?.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-2">
                <div className="truncate font-semibold text-white">{entry.user?.name || entry.user?.username}</div>
                {entry.trusted_indicator ? <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Trusted</span> : null}
              </div>
              {entry.summary ? <p className="mt-1 text-sm text-slate-400">{entry.summary}</p> : null}
              <div className="mt-2 text-xs text-slate-500">{entry.counts?.releases || 0} releases • {entry.counts?.credited_artworks || 0} artworks • {entry.counts?.projects || 0} projects</div>
              {Array.isArray(entry.badges) && entry.badges.length > 0 ? <div className="mt-3 flex flex-wrap gap-2">{entry.badges.slice(0, 3).map((badge) => <span key={`${entry.user?.id}-${badge.key}`} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{badge.label}</span>)}</div> : null}
            </div>
          </a>
        ))}
      </div>
    </section>
  )
}

function csrfToken() {
  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
}

export default function GroupShow() {
  const { props } = usePage()
  const group = props.group || {}
  const section = props.section || 'overview'
  const featuredArtworks = Array.isArray(props.featuredArtworks) ? props.featuredArtworks : []
  const artworks = Array.isArray(props.artworks) ? props.artworks : []
  const featuredCollections = Array.isArray(props.featuredCollections) ? props.featuredCollections : []
  const collections = Array.isArray(props.collections) ? props.collections : []
  const posts = Array.isArray(props.posts) ? props.posts : []
  const projects = Array.isArray(props.projects) ? props.projects : []
  const releases = Array.isArray(props.releases) ? props.releases : []
  const challenges = Array.isArray(props.challenges) ? props.challenges : []
  const events = Array.isArray(props.events) ? props.events : []
  const assets = Array.isArray(props.assets) ? props.assets : []
  const activity = Array.isArray(props.activity) ? props.activity : []
  const recruitment = props.recruitment || null
  const currentJoinRequest = group.current_join_request || null
  const leadership = Array.isArray(props.leadership) ? props.leadership : []
  const members = Array.isArray(props.members) ? props.members : []
  const topContributors = Array.isArray(props.topContributors) ? props.topContributors : []
  const trustSignals = Array.isArray(props.trustSignals) ? props.trustSignals : []
  const badgeShowcase = Array.isArray(props.badgeShowcase) ? props.badgeShowcase : []
  const [following, setFollowing] = useState(Boolean(group.viewer?.is_following))
  const [followersCount, setFollowersCount] = useState(Number(group.counts?.followers || 0))
  const [shareLabel, setShareLabel] = useState('Share')
  const [artworkQuery, setArtworkQuery] = useState('')
  const [artworkSort, setArtworkSort] = useState('latest')
  const contentShellClassName = section === 'artworks'
    ? 'mx-auto max-w-7xl px-4 md:px-6'
    : section === 'overview' || section === 'posts'
      ? 'mx-auto max-w-7xl px-4 md:px-6'
      : 'mx-auto max-w-6xl px-4'

  const filteredArtworks = artworks
    .filter((artwork) => {
      const q = normalizeText(artworkQuery)
      if (!q) return true

      return normalizeText(artwork.title).includes(q) || normalizeText(artwork.author).includes(q)
    })
    .sort((left, right) => {
      if (artworkSort === 'oldest') {
        return new Date(left.published_at || 0).getTime() - new Date(right.published_at || 0).getTime()
      }

      if (artworkSort === 'title') {
        return String(left.title || '').localeCompare(String(right.title || ''))
      }

      return new Date(right.published_at || 0).getTime() - new Date(left.published_at || 0).getTime()
    })

  const groupedMembers = {
    owner: members.filter((member) => member.role === 'owner'),
    admins: members.filter((member) => member.role === 'admin'),
    editors: members.filter((member) => member.role === 'editor'),
    contributors: members.filter((member) => member.role !== 'owner' && member.role !== 'admin' && member.role !== 'editor'),
  }

  const { share } = useWebShare({
    onFallback: async ({ url }) => {
      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(url)
        setShareLabel('Link copied')
        window.setTimeout(() => setShareLabel('Share'), 2000)
        return
      }

      window.prompt('Copy this link', url)
    },
  })

  const submitReport = async () => {
    if (!props.reportEndpoint) return
    const reason = window.prompt('Reason for reporting this group?')
    if (!reason) return
    await fetch(props.reportEndpoint, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': csrfToken(),
      },
      body: JSON.stringify({ target_type: 'group', target_id: group.id, reason }),
    })
  }

  const toggleFollow = async () => {
    const response = await fetch(following ? group.urls?.unfollow : group.urls?.follow, {
      method: following ? 'DELETE' : 'POST',
      credentials: 'same-origin',
      headers: {
        Accept: 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': csrfToken(),
      },
    })
    const payload = await response.json().catch(() => ({}))
    if (response.ok) {
      setFollowing(Boolean(payload?.following))
      setFollowersCount(Number(payload?.followers_count || 0))
    }
  }

  const handleShare = async () => {
    const url = group.urls?.public || (typeof window !== 'undefined' ? window.location.href : '')

    await share({
      title: `${group.name} on Skinbase`,
      text: group.headline || group.bio || 'Check out this Skinbase group.',
      url,
    })
  }

  const submitJoinRequest = async () => {
    const message = window.prompt('Why do you want to join this group?') || ''
    const desiredRole = window.prompt('Desired role: contributor, editor, or admin', 'contributor') || 'contributor'
    router.post(group.urls?.join_request_store, { message, desired_role: desiredRole })
  }

  const withdrawJoinRequest = async () => {
    if (!currentJoinRequest?.id || !group.urls?.join_request_withdraw_pattern) return
    router.delete(group.urls.join_request_withdraw_pattern.replace('__JOIN_REQUEST__', String(currentJoinRequest.id)))
  }

  return (
    <div className="relative min-h-screen overflow-hidden pb-16">
      <SeoHead title={`${group.name} - Skinbase`} description={group.headline || group.bio || 'Skinbase group'} />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[34rem] opacity-90"
        style={{
          background: 'radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 32%), radial-gradient(circle at 82% 10%, rgba(16,185,129,0.16), transparent 28%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #0a1220 100%)',
        }}
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.06]"
        style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }}
      />

      <GroupHero
        group={group}
        recruitment={recruitment}
        trustSignals={trustSignals}
        following={following}
        followersCount={followersCount}
        currentJoinRequest={currentJoinRequest}
        shareLabel={shareLabel}
        onToggleFollow={toggleFollow}
        onJoinRequest={submitJoinRequest}
        onWithdrawJoinRequest={withdrawJoinRequest}
        onShare={handleShare}
        onReport={submitReport}
        reportEndpoint={props.reportEndpoint}
      />

      <div className="mt-6">
        <GroupTabs baseUrl={group.urls?.public || '/groups'} activeSection={section} />
      </div>

      <div className={`${contentShellClassName} pt-6`}>

        {section === 'overview' ? (
          <div className="mt-8 grid gap-8">
            <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Highlights</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Featured artworks</h2>
                </div>
                <a href={`${group.urls?.public}/artworks`} className="text-sm font-semibold text-sky-200">Browse all</a>
              </div>
              <ArtworkGrid artworks={featuredArtworks} emptyLabel="No featured artworks yet." />
            </section>

            <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Latest work</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Latest artworks</h2>
                </div>
                <a href={`${group.urls?.public}/artworks`} className="text-sm font-semibold text-sky-200">View archive</a>
              </div>
              <ArtworkGrid artworks={artworks.slice(0, 6)} emptyLabel="No published artworks yet." />
            </section>

            <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Pipeline</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Recent releases</h2>
                </div>
                <a href={`${group.urls?.public}/releases`} className="text-sm font-semibold text-sky-200">View releases</a>
              </div>
              <ReleaseGrid releases={releases.slice(0, 3)} emptyLabel="No public releases yet." />
            </section>

            <div className="grid gap-8 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
              <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Curated</p>
                    <h2 className="mt-2 text-2xl font-semibold text-white">Featured collections</h2>
                  </div>
                  <a href={`${group.urls?.public}/collections`} className="text-sm font-semibold text-sky-200">View collections</a>
                </div>
                <CollectionGrid collections={featuredCollections.length > 0 ? featuredCollections : collections.slice(0, 2)} emptyLabel="No featured collections yet." />
              </section>

              <div className="grid gap-8">
                {group.pinned_post ? (
                  <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Pinned post</p>
                    <h2 className="mt-2 text-2xl font-semibold text-white">{group.pinned_post.title}</h2>
                    <p className="mt-4 text-sm leading-7 text-slate-300">{group.pinned_post.excerpt || 'Read the latest pinned update from this group.'}</p>
                    <a href={group.pinned_post.url} className="mt-4 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Read post</a>
                  </section>
                ) : null}

                <FocusCard eyebrow="Releases" item={group.featured_release} badgeKey="current_stage" ctaLabel="Open release" />
                <FocusCard eyebrow="Projects" item={group.featured_project} ctaLabel="Open project" />
                <FocusCard eyebrow="Challenges" item={group.active_challenge} ctaLabel="View challenge" />
                <FocusCard eyebrow="Events" item={group.upcoming_event} badgeKey="event_type" ctaLabel="View event" />
                <LeadershipPreview leadership={leadership} />
                <TrustSignalPanel signals={trustSignals} />
                <BadgeShowcase badges={badgeShowcase} />
                <ContributorHighlights contributors={topContributors.slice(0, 4)} />

                {recruitment?.is_recruiting ? (
                  <section className="rounded-[30px] border border-emerald-300/20 bg-emerald-400/10 p-6">
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-100/80">Recruiting</p>
                    <h2 className="mt-2 text-2xl font-semibold text-white">{recruitment.headline || `${group.name} is looking for collaborators`}</h2>
                    <p className="mt-4 text-sm leading-7 text-emerald-50/90">{recruitment.description || 'This group is currently open to new contributors.'}</p>
                    {Array.isArray(recruitment.roles) && recruitment.roles.length > 0 ? <div className="mt-4 flex flex-wrap gap-2">{recruitment.roles.map((role) => <span key={role} className="rounded-full border border-white/10 bg-white/[0.08] px-3 py-1.5 text-xs font-semibold text-white">{role}</span>)}</div> : null}
                  </section>
                ) : null}

                <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Resources</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Shared downloads</h2>
                  <AssetGrid assets={assets.slice(0, 3)} />
                </section>

                <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Public feed</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Recent activity</h2>
                  <ActivityFeed items={activity.slice(0, 4)} />
                </section>

                <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">About</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">About {group.name}</h2>
                  <p className="mt-5 text-sm leading-7 text-slate-300">{group.bio || 'No long-form description yet.'}</p>
                  <div className="mt-5 flex flex-wrap gap-3 text-xs text-slate-400">
                    {group.founded_at ? <span>Founded {new Date(group.founded_at).toLocaleDateString()}</span> : null}
                    {group.type ? <span>{group.type}</span> : null}
                    {group.website_url ? <a href={group.website_url} className="text-sky-200 underline underline-offset-4">Website</a> : null}
                  </div>
                </section>
              </div>
            </div>
          </div>
        ) : null}

        {section === 'artworks' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
              <div>
                <h2 className="text-2xl font-semibold text-white">Artworks</h2>
                <p className="mt-2 text-sm text-slate-400">Filter the group archive by title or contributor credit label, then change the sort order.</p>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <label className="grid gap-2 text-sm text-slate-300">
                  <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Search</span>
                  <input value={artworkQuery} onChange={(event) => setArtworkQuery(event.target.value)} placeholder="Filter artworks" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
                </label>
                <label className="grid gap-2 text-sm text-slate-300">
                  <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Sort</span>
                  <select value={artworkSort} onChange={(event) => setArtworkSort(event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
                    <option value="latest">Latest first</option>
                    <option value="oldest">Oldest first</option>
                    <option value="title">Title A-Z</option>
                  </select>
                </label>
              </div>
            </div>
            <ArtworkGrid artworks={filteredArtworks} emptyLabel="No published artworks match the current filter." />
          </section>
        ) : null}

        {section === 'collections' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Collections</h2>
            <CollectionGrid collections={collections} emptyLabel="No collections yet." />
          </section>
        ) : null}

        {section === 'posts' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Posts</h2>
            <div className="mt-5 grid gap-4 md:grid-cols-2">
              {posts.length > 0 ? posts.map((post) => (
                <a key={post.id} href={post.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
                  <div className="flex items-center justify-between gap-3">
                    <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{post.type}</div>
                    {post.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">Pinned</span> : null}
                  </div>
                  <h3 className="mt-2 text-lg font-semibold text-white">{post.title}</h3>
                  <p className="mt-2 text-sm leading-6 text-slate-300">{post.excerpt || 'Open the post to read more.'}</p>
                </a>
              )) : <p className="text-sm text-slate-400">No posts published yet.</p>}
            </div>
          </section>
        ) : null}

        {section === 'projects' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Projects</h2>
            <p className="mt-2 text-sm text-slate-400">Structured releases, collaboration hubs, and production pages published by this group.</p>
            <CompactCardGrid items={projects} emptyLabel="No public projects yet." />
          </section>
        ) : null}

        {section === 'releases' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Releases</h2>
            <p className="mt-2 text-sm text-slate-400">Published drops, milestone pipelines, and linked showcases from this group.</p>
            <ReleaseGrid releases={releases} emptyLabel="No public releases yet." />
          </section>
        ) : null}

        {section === 'challenges' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Challenges</h2>
            <p className="mt-2 text-sm text-slate-400">Current and past prompts, internal sprints, and public-facing challenge runs.</p>
            <CompactCardGrid items={challenges} emptyLabel="No public challenges yet." />
          </section>
        ) : null}

        {section === 'events' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Events</h2>
            <p className="mt-2 text-sm text-slate-400">Launches, milestones, streams, and other moments on the group timeline.</p>
            <CompactCardGrid items={events} emptyLabel="No public events yet." badgeKey="event_type" />
          </section>
        ) : null}

        {section === 'activity' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Activity</h2>
            <p className="mt-2 text-sm text-slate-400">Public milestones from posts, releases, events, member changes, and challenge highlights.</p>
            <ActivityFeed items={activity} />
          </section>
        ) : null}

        {section === 'members' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Members</h2>
            <div className="mt-6 grid gap-8">
              {[
                ['Owner', groupedMembers.owner],
                ['Admins', groupedMembers.admins],
                ['Editors', groupedMembers.editors],
                ['Contributors', groupedMembers.contributors],
              ].map(([label, bucket]) => (
                bucket.length > 0 ? (
                  <section key={label}>
                    <div className="flex items-center justify-between gap-3">
                      <h3 className="text-lg font-semibold text-white">{label}</h3>
                      <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{bucket.length}</span>
                    </div>
                    <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                      {bucket.map((member) => (
                        <a key={member.id} href={member.user?.profile_url || '#'} className="flex items-center gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
                          {member.user?.avatar_url ? <img src={member.user.avatar_url} alt={member.user.name || member.user.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
                          <div className="min-w-0">
                            <div className="truncate font-semibold text-white">{member.user?.name || member.user?.username}</div>
                            <div className="text-xs uppercase tracking-[0.16em] text-slate-400">{member.role_label || member.role}</div>
                          </div>
                        </a>
                      ))}
                    </div>
                  </section>
                ) : null
              ))}
            </div>
          </section>
        ) : null}

        {section === 'about' ? (
          <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">About</h2>
            <div className="mt-5 space-y-4 text-sm leading-7 text-slate-300">
              <p>{group.bio || 'No long-form description yet.'}</p>
              {group.website_url ? <p><a href={group.website_url} className="text-sky-200 underline underline-offset-4">{group.website_url}</a></p> : null}
              {Array.isArray(group.links) && group.links.length > 0 ? <div className="flex flex-wrap gap-3">{group.links.map((link) => <a key={`${link.label}-${link.url}`} href={link.url} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-white">{link.label}</a>)}</div> : null}
              {group.founded_at ? <p>Founded: {new Date(group.founded_at).toLocaleDateString()}</p> : null}
              {group.type ? <p>Type: {group.type}</p> : null}
            </div>
          </section>
        ) : null}
      </div>
    </div>
  )
}