import React from 'react'
import { usePage } from '@inertiajs/react'
import CollectionCard from '../../components/profile/collections/CollectionCard'
import SeoHead from '../../components/seo/SeoHead'

function StatCard({ icon, label, value }) {
  return (
    <div className="rounded-[22px] border border-white/10 bg-white/[0.05] px-4 py-4">
      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
        <i className={`fa-solid ${icon} text-[10px]`} />
        {label}
      </div>
      <div className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">{value}</div>
    </div>
  )
}

export default function CollectionSeriesShow() {
  const { props } = usePage()
  const seo = props.seo || {}
  const title = props.title || `Collection Series: ${props.seriesKey || ''}`
  const description = props.description || 'A connected sequence of public collections on Skinbase.'
  const collections = Array.isArray(props.collections) ? props.collections : []
  const leadCollection = props.leadCollection || null
  const stats = props.stats || {}

  return (
    <>
      <SeoHead seo={seo} title={seo.title || `${title} — Skinbase`} description={seo.description || description} />

      <div className="relative min-h-screen overflow-hidden pb-16">
        <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[36rem] opacity-95" style={{ background: 'radial-gradient(circle at 10% 15%, rgba(59,130,246,0.18), transparent 28%), radial-gradient(circle at 84% 18%, rgba(34,197,94,0.16), transparent 24%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #08111f 100%)' }} />
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 opacity-[0.05]" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }} />

        <div className="mx-auto max-w-7xl px-4 pt-8 md:px-6">
          <div className="flex flex-wrap items-center gap-3 text-sm text-slate-300">
            <a href="/collections/featured" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
              <i className="fa-solid fa-arrow-left fa-fw text-[11px]" />
              Back to collections
            </a>
            {leadCollection?.url ? <a href={leadCollection.url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">Lead collection</a> : null}
          </div>

          <section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm md:p-8">
            <div className="grid gap-8 xl:grid-cols-[minmax(0,1.15fr)_400px] xl:items-end">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Series</p>
                <h1 className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">{title}</h1>
                <p className="mt-4 max-w-3xl text-sm leading-relaxed text-slate-300 md:text-[15px]">{description}</p>
                {props.seriesKey ? <div className="mt-5 inline-flex rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">{props.seriesKey}</div> : null}
              </div>

              <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
                <StatCard icon="fa-layer-group" label="Collections" value={Number(stats.collections || collections.length).toLocaleString()} />
                <StatCard icon="fa-user-group" label="Creators" value={Number(stats.owners || 0).toLocaleString()} />
                <StatCard icon="fa-images" label="Artworks" value={Number(stats.artworks || 0).toLocaleString()} />
              </div>
            </div>
          </section>

          {leadCollection ? (
            <section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
              <div className="flex flex-wrap items-end justify-between gap-4">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Lead Entry</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Start with the opening collection</h2>
                </div>
                {stats.latest_activity_at ? <div className="text-xs uppercase tracking-[0.16em] text-slate-400">Latest activity {new Date(stats.latest_activity_at).toLocaleDateString()}</div> : null}
              </div>
              <div className="mt-5 max-w-xl">
                <CollectionCard collection={leadCollection} isOwner={false} />
              </div>
            </section>
          ) : null}

          <section className="mt-8 pb-8">
            <div className="flex items-end justify-between gap-4">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Sequence</p>
                <h2 className="mt-2 text-2xl font-semibold text-white">Public collections in order</h2>
              </div>
            </div>

            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
              {collections.map((collection) => (
                <CollectionCard key={collection.id} collection={collection} isOwner={false} />
              ))}
            </div>
          </section>
        </div>
      </div>
    </>
  )
}
