import React from 'react'
import CollectionCard from '../../components/profile/collections/CollectionCard'

function normalizeItems(items) {
  if (!Array.isArray(items)) return []

  return items.filter((item) => item && typeof item === 'object')
}

function SectionHeader({ title, subtitle, href, ctaLabel = 'See all' }) {
  return (
    <div className="mb-5 flex items-end justify-between gap-4">
      <div>
        <h3 className="text-lg font-bold text-white">{title}</h3>
        {subtitle ? <p className="mt-1 text-xs text-nova-400">{subtitle}</p> : null}
      </div>
      {href ? (
        <a href={href} className="shrink-0 text-sm text-nova-300 transition hover:text-white">
          {ctaLabel} →
        </a>
      ) : null}
    </div>
  )
}

function CollectionStrip({ items }) {
  if (!items.length) return null

  return (
    <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
      {items.map((collection) => (
        <CollectionCard key={collection.id} collection={collection} isOwner={false} />
      ))}
    </div>
  )
}

function CollectionSection({ title, subtitle, href, items, limit = 3, ctaLabel }) {
  const normalized = normalizeItems(items).slice(0, limit)
  if (!normalized.length) return null

  return (
    <section className="mt-10">
      <SectionHeader title={title} subtitle={subtitle} href={href} ctaLabel={ctaLabel} />
      <CollectionStrip items={normalized} />
    </section>
  )
}

export default function HomeCollections({
  featured,
  recent,
  trending,
  editorial,
  community,
  isLoggedIn = false,
}) {
  const featuredItems = normalizeItems(featured)
  const recentItems = normalizeItems(recent)
  const trendingItems = normalizeItems(trending)
  const editorialItems = normalizeItems(editorial)
  const communityItems = normalizeItems(community)

  if (!featuredItems.length && !recentItems.length && !trendingItems.length && !editorialItems.length && !communityItems.length) {
    return null
  }

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
          <h2 className="text-xl font-bold text-white">Curated Collections</h2>
          <p className="mt-1 max-w-2xl text-sm text-nova-300">
            Hand-built galleries, smart collections, and community showcases worth opening next.
          </p>
        </div>
        <div className="flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-nova-400">
          {isLoggedIn && recentItems.length ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">Recent</span> : null}
          {featuredItems.length ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-amber-100">Featured</span> : null}
          {communityItems.length ? <span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-sky-100">Community</span> : null}
        </div>
      </div>

      <CollectionSection
        title="Featured Collections"
        subtitle="Standout galleries with strong sequencing, presentation, or curator voice."
        href="/collections/featured"
        items={featuredItems}
        limit={3}
      />

      {isLoggedIn ? (
        <CollectionSection
          title="Recently Active"
          subtitle="Fresh collection activity from around the site, including new updates and resurfacing galleries."
          href="/collections/trending"
          items={recentItems}
          limit={3}
        />
      ) : null}

      <CollectionSection
        title="Trending Collections"
        subtitle="Collections getting the strongest mix of follows, saves, and engagement right now."
        href="/collections/trending"
        items={trendingItems}
        limit={3}
      />

      <CollectionSection
        title="Editorial Picks"
        subtitle="Staff and premium editorial showcases with stronger themes and presentation rules."
        href="/collections/editorial"
        items={editorialItems}
        limit={3}
      />

      <CollectionSection
        title="Community Highlights"
        subtitle="Collaborative and submission-friendly collections that spotlight multiple creators together."
        href="/collections/community"
        items={communityItems}
        limit={3}
      />
    </section>
  )
}