import React from 'react'
import { usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import GroupPromoCard from '../../components/groups/GroupPromoCard'
import GroupTrendingSection from '../../components/groups/GroupTrendingSection'
import GroupBrowseFilters from '../../components/groups/GroupBrowseFilters'
import GroupDiscoveryCard from '../../components/groups/GroupDiscoveryCard'
import GroupLeaderboardCard from '../../components/groups/GroupLeaderboardCard'

export default function GroupIndex() {
  const { props } = usePage()
  const groups = props.groups?.data || []
  const surfaces = Array.isArray(props.surfaces) ? props.surfaces : []
  const currentSurface = props.currentSurface || 'featured'
  const highlightSections = Array.isArray(props.highlightSections) ? props.highlightSections : []
  const leaderboardItems = Array.isArray(props.leaderboard?.items) ? props.leaderboard.items : []

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
      <SeoHead title="Groups - Skinbase" description={props.description} />
      <div className="mx-auto max-w-6xl">
        <section className="rounded-[32px] border border-white/10 bg-white/[0.03] p-6">
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Groups</p>
          <h1 className="mt-2 text-4xl font-semibold text-white">Collective publishing identities</h1>
          <p className="mt-4 max-w-3xl text-sm leading-6 text-slate-300">Discover collaborative studios, follow shared creative brands, and browse the artworks, releases, and collections published under each group identity.</p>
          <GroupBrowseFilters surfaces={surfaces} currentSurface={currentSurface} />
        </section>

        <div className="mt-8">
          <GroupPromoCard
            group={props.spotlightGroup}
            eyebrow="Public groups"
            title="Find collaborative identities with real momentum"
            description="Groups now sit alongside creators and artworks across Nova, making shared publishing, team recruitment, and release-driven collaboration easier to discover."
            ctaLabel="Open spotlight"
          />
        </div>

        {highlightSections.map((section) => (
          <GroupTrendingSection
            key={section.key}
            title={section.title}
            description={section.description}
            items={section.items || []}
            href={`/groups?surface=${encodeURIComponent(section.key)}`}
          />
        ))}

        {leaderboardItems.length > 0 ? (
          <section className="mt-10">
            <div className="mb-5 flex items-end justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Monthly group leaderboard</h2>
                <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">A fast view of the collaborative teams moving the most attention and publishing energy right now.</p>
              </div>
              <a href="/leaderboard?type=groups&period=monthly" className="text-sm font-semibold text-sky-200 transition hover:text-white">View leaderboard</a>
            </div>
            <div className="grid gap-4 xl:grid-cols-3">
              {leaderboardItems.slice(0, 3).map((item) => <GroupLeaderboardCard key={item.entity?.id || item.rank} item={item} />)}
            </div>
          </section>
        ) : null}

        <section className="mt-10">
          <div className="mb-5 flex items-end justify-between gap-4">
            <div>
              <h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Browse groups</h2>
              <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">Filter the directory by discovery surface, then jump into each group’s public page for artworks, releases, projects, events, and activity.</p>
            </div>
            <div className="text-sm text-slate-500">{Number(props.groups?.meta?.total || 0).toLocaleString()} public groups</div>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {groups.map((group) => <GroupDiscoveryCard key={group.slug || group.id} group={group} />)}
          </div>
        </section>
      </div>
    </main>
  )
}