import React from 'react'
import WorldStatusBadge from './WorldStatusBadge'
import { trackWorldSourceClick, withWorldSource } from '../../lib/worldAnalytics'

export default function ChallengeWorldLinkBadge({ world, className = '' }) {
  if (!world?.public_url || !world?.title) {
    return null
  }

  const badges = Array.isArray(world.status_badges) ? world.status_badges.filter((badge) => badge?.label).slice(0, 3) : []
  const metaItems = [
    world.campaign_label,
    world.timeframe_label,
    Number(world.live_submission_count || 0) > 0 ? `${world.live_submission_count} live submissions` : null,
  ].filter(Boolean)
  const worldHref = withWorldSource(world.public_url, 'challenge_page', 'linked_world')

  return (
    <section className={`rounded-[26px] border border-sky-300/20 bg-[linear-gradient(135deg,_rgba(56,189,248,0.14),_rgba(15,23,42,0.92))] p-5 text-white ${className}`.trim()}>
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/80">Linked world</div>
        {badges.length > 0 ? <div className="flex flex-wrap gap-2">{badges.map((badge) => <WorldStatusBadge key={`${badge.label}-${badge.tone || 'slate'}`} badge={badge} />)}</div> : null}
      </div>
      <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">Continue in {world.title}</h2>
      {world.summary ? <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-200">{world.summary}</p> : null}
      {metaItems.length > 0 ? <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{metaItems.map((item) => <span key={item}>{item}</span>)}</div> : null}
      <div className="mt-5 flex flex-wrap gap-3">
        <a href={worldHref} onClick={() => trackWorldSourceClick({ worldId: world.id, worldTitle: world.title, sourceSurface: 'challenge_page', sourceDetail: 'linked_world' })} className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-100">
          Open world
          <i className="fa-solid fa-arrow-right" />
        </a>
        {world.challenge_cta_url ? <a href={world.challenge_cta_url} className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">{world.challenge_cta_label || 'Challenge update'}</a> : null}
      </div>
    </section>
  )
}