import React from 'react'
import { createRoot } from 'react-dom/client'
import ArtworkHero from '../components/artwork/ArtworkHero'
import ArtworkMeta from '../components/artwork/ArtworkMeta'
import ArtworkActions from '../components/artwork/ArtworkActions'
import ArtworkStats from '../components/artwork/ArtworkStats'
import ArtworkTags from '../components/artwork/ArtworkTags'
import ArtworkAuthor from '../components/artwork/ArtworkAuthor'
import ArtworkRelated from '../components/artwork/ArtworkRelated'
import ArtworkDescription from '../components/artwork/ArtworkDescription'

function ArtworkPage({ artwork, related, presentMd, presentLg, presentXl, presentSq, canonicalUrl }) {
  if (!artwork) return null

  return (
    <main className="mx-auto w-full max-w-screen-xl px-4 pb-24 pt-10 sm:px-6 lg:px-8 lg:pb-12">
      <ArtworkHero artwork={artwork} presentMd={presentMd} presentLg={presentLg} presentXl={presentXl} />

      <div className="mt-6 lg:hidden">
        <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} mobilePriority />
      </div>

      <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div className="space-y-6 lg:col-span-2">
          <ArtworkMeta artwork={artwork} />
          <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
          <ArtworkStats artwork={artwork} />
          <ArtworkTags artwork={artwork} />
          <ArtworkDescription artwork={artwork} />
        </div>

        <aside className="hidden space-y-6 lg:block">
          <div className="sticky top-24">
            <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} />
          </div>
        </aside>
      </div>

      <ArtworkRelated related={related} />
    </main>
  )
}

// Auto-mount if the Blade view provided data attributes
const el = document.getElementById('artwork-page')
if (el) {
  const parse = (key, fallback = null) => {
    try {
      return JSON.parse(el.dataset[key] || 'null') ?? fallback
    } catch {
      return fallback
    }
  }

  const root = createRoot(el)
  root.render(
    <ArtworkPage
      artwork={parse('artwork')}
      related={parse('related', [])}
      presentMd={parse('presentMd')}
      presentLg={parse('presentLg')}
      presentXl={parse('presentXl')}
      presentSq={parse('presentSq')}
      canonicalUrl={parse('canonical', '')}
    />,
  )
}

export default ArtworkPage