import React, { useEffect, useRef } from 'react'
import WorldCampaignMeta from './WorldCampaignMeta'
import WorldStatusBadge from './WorldStatusBadge'
import { trackWorldSourceClick, trackWorldSourceImpression, withWorldSource } from '../../lib/worldAnalytics'

function themeStyle(theme) {
  return {
    '--world-accent': theme?.accent_color || '#38bdf8',
    '--world-accent-secondary': theme?.accent_color_secondary || '#0f172a',
  }
}

export default function WorldCard({ world, compact = false, sourceSurface = '', sourceDetail = '' }) {
  const cardRef = useRef(null)
  const href = world && sourceSurface ? withWorldSource(world.public_url, sourceSurface, sourceDetail) : world?.public_url

  useEffect(() => {
    if (!sourceSurface || !world?.id || typeof window === 'undefined') {
      return undefined
    }

    const node = cardRef.current
    if (!node) {
      return undefined
    }

    if (typeof window.IntersectionObserver !== 'function') {
      trackWorldSourceImpression({
        worldId: world.id,
        worldTitle: world.title,
        sourceSurface,
        sourceDetail,
        sectionKey: compact ? 'compact_card' : 'card',
      })
      return undefined
    }

    const observer = new window.IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting || entry.intersectionRatio < 0.4) {
          return
        }

        trackWorldSourceImpression({
          worldId: world.id,
          worldTitle: world.title,
          sourceSurface,
          sourceDetail,
          sectionKey: compact ? 'compact_card' : 'card',
        })
        observer.disconnect()
      })
    }, { threshold: [0.4] })

    observer.observe(node)

    return () => observer.disconnect()
  }, [compact, sourceDetail, sourceSurface, world?.id, world?.title])

  if (!world) {
    return null
  }

  return (
    <a
      ref={cardRef}
      href={href}
      onClick={() => trackWorldSourceClick({ worldId: world.id, worldTitle: world.title, sourceSurface, sourceDetail })}
      className={`group relative block w-full overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/70 transition duration-300 hover:-translate-y-1 hover:border-white/20 ${compact ? 'p-5' : 'p-6'}`}
      style={themeStyle(world.theme)}
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_color-mix(in_srgb,var(--world-accent)_30%,transparent),_transparent_42%),linear-gradient(135deg,_color-mix(in_srgb,var(--world-accent-secondary)_94%,black),_rgba(2,6,23,0.94))] opacity-95" />
      {world.cover_url ? <img src={world.cover_url} alt={world.title} className="absolute inset-0 h-full w-full object-cover opacity-20 transition duration-500 group-hover:scale-[1.03]" /> : null}
      <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-slate-950/10" />

      <div className="relative flex h-full min-h-[16rem] flex-col justify-between">
        <div>
          {world.is_recurring ? (
            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-sky-100/70">
              {world.family_title || 'Recurring family'}
              {world.edition_label ? <span className="ml-2 text-slate-300/70">{world.edition_label}</span> : null}
            </div>
          ) : null}
          <div className="flex flex-wrap items-center gap-2">
            {(Array.isArray(world.status_badges) ? world.status_badges : []).map((badge) => (
              <WorldStatusBadge key={badge.label} badge={badge} />
            ))}
            {!Array.isArray(world.status_badges) || world.status_badges.length === 0 ? <WorldStatusBadge badge={{ label: world.phase || world.status, tone: 'slate' }} /> : null}
            {world.campaign_label ? <WorldStatusBadge badge={{ label: world.campaign_label, tone: 'slate' }} /> : null}
            {world.badge_label ? <WorldStatusBadge badge={{ label: world.badge_label, tone: 'rose' }} /> : null}
          </div>
          {world.teaser_title && world.teaser_title !== world.title ? <p className="mt-4 text-[11px] font-semibold uppercase tracking-[0.2em] text-sky-100/70">{world.title}</p> : null}
          <h3 className={`mt-4 max-w-xl font-semibold tracking-[-0.03em] text-white ${compact ? 'text-2xl' : 'text-3xl'}`}>{world.teaser_title || world.title}</h3>
          {world.tagline ? <p className="mt-2 text-sm uppercase tracking-[0.18em] text-white/55">{world.tagline}</p> : null}
          {world.summary ? <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-200/85">{world.summary}</p> : null}
        </div>

        <div className="mt-6 flex flex-wrap items-end justify-between gap-3">
          <WorldCampaignMeta world={world} />
          <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-white transition group-hover:bg-white/15">
            {world.cta_label || world.challenge_cta_label || (world.is_recurring && !world.is_canonical_edition ? 'Open edition' : 'Open world')}
            <i className="fa-solid fa-arrow-right" />
          </span>
        </div>
      </div>
    </a>
  )
}