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

export default function GroupEventShow() {
  const { props } = usePage()
  const group = props.group || {}
  const event = props.event || {}

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.15),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
      <SeoHead seo={props.seo || {}} title={`${event.title || group.name} - Skinbase`} description={event.summary || event.description || 'Group event'} />
      <div className="mx-auto max-w-5xl space-y-8">
        <section className="overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.03]">
          {event.cover_url ? <img src={event.cover_url} alt={event.title} className="h-56 w-full object-cover" /> : <div className="h-40 bg-white/[0.03]" />}
          <div className="p-6">
            <a href={group.urls?.public} className="text-sm font-semibold text-emerald-200">{group.name}</a>
            <h1 className="mt-4 text-4xl font-semibold text-white">{event.title}</h1>
            <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-300">{event.summary || event.description || 'Group event'}</p>
            <div className="mt-5 grid gap-3 sm:grid-cols-2">
              <div className="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Starts</div>
                <div className="mt-2 text-white">{event.start_at ? new Date(event.start_at).toLocaleString() : 'Not scheduled'}</div>
              </div>
              <div className="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Details</div>
                <div className="mt-2 text-white">{event.event_type} • {event.visibility}</div>
                {event.location ? <div className="mt-2">{event.location}</div> : null}
              </div>
            </div>
            {event.external_url ? <a href={event.external_url} className="mt-5 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Open external link</a> : null}
          </div>
        </section>

        <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-2xl font-semibold text-white">About this event</h2>
          <p className="mt-4 text-sm leading-7 text-slate-300">{event.description || 'No extended event details yet.'}</p>
        </section>
      </div>
    </main>
  )
}