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

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

export default function GroupPostShow() {
  const { props } = usePage()
  const group = props.group || {}
  const post = props.post || {}
  const recentPosts = Array.isArray(props.recentPosts) ? props.recentPosts : []

  const submitReport = async () => {
    if (!props.reportEndpoint || !post.id) return

    const reason = window.prompt('Reason for reporting this post?')
    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_post', target_id: post.id, reason }),
    })
  }

  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 seo={props.seo || {}} title={`${post.title || group.name} - Skinbase`} description={post.excerpt || group.headline || group.bio || 'Group post'} />
      <div className="mx-auto max-w-5xl">
        <article className="rounded-[32px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <a href={group.urls?.public} className="text-sm font-semibold text-sky-200">← Back to {group.name}</a>
            {props.reportEndpoint ? <button type="button" onClick={submitReport} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-semibold text-white">Report</button> : null}
          </div>
          <div className="mt-4 flex flex-wrap gap-2 text-xs uppercase tracking-[0.16em] text-slate-400">
            {post.type ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">{post.type}</span> : null}
            {post.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-amber-100">Pinned</span> : null}
          </div>
          <h1 className="mt-5 text-4xl font-semibold text-white">{post.title}</h1>
          <div className="mt-3 text-sm text-slate-400">{post.author?.name || post.author?.username || group.name} • {post.published_at ? new Date(post.published_at).toLocaleString() : 'Recently'}</div>
          {post.excerpt ? <p className="mt-6 text-lg leading-8 text-slate-200">{post.excerpt}</p> : null}
          <div className="mt-8 whitespace-pre-wrap text-sm leading-7 text-slate-300">{post.content || ''}</div>
        </article>

        {recentPosts.length > 0 ? (
          <section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">More from {group.name}</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              {recentPosts.filter((item) => item.id !== post.id).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="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.type}</div>
                  <div className="mt-2 text-lg font-semibold text-white">{item.title}</div>
                  <p className="mt-2 text-sm text-slate-400">{item.excerpt || 'Read the full post.'}</p>
                </a>
              ))}
            </div>
          </section>
        ) : null}
      </div>
    </main>
  )
}