import React from 'react'
import WorldChallengeMeta from './WorldChallengeMeta'
import WorldChallengeStatusBadge from './WorldChallengeStatusBadge'

export default function WorldChallengePanel({ section }) {
  if (!section) {
    return null
  }

  const storyMeta = Array.isArray(section.story?.meta) ? section.story.meta.filter(Boolean) : []
  const metaItems = [
    section.timeframe_label,
    Number(section.entry_count || 0) > 0 ? `${section.entry_count} entries` : null,
    section.has_winner ? 'Winner synced' : null,
  ]

  return (
    <section className="mt-10 overflow-hidden rounded-[30px] border border-white/10 bg-white/[0.03]">
      <div className="relative">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_32%),linear-gradient(135deg,_rgba(15,23,42,0.94),_rgba(2,6,23,0.98))]" />
        {section.cover_url ? <img src={section.cover_url} alt={section.title} className="absolute inset-0 h-full w-full object-cover opacity-20" /> : null}
        <div className="relative grid gap-6 p-6 lg:grid-cols-[minmax(0,1.25fr)_18rem] lg:p-8">
          <div>
            <div className="flex flex-wrap items-center gap-2">
              <WorldChallengeStatusBadge label={section.state_label} tone={section.state_tone} />
              {section.group?.name ? <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{section.group.name}</span> : null}
            </div>
            <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{section.title}</h2>
            {section.summary ? <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-200/86">{section.summary}</p> : null}
            <WorldChallengeMeta items={metaItems} className="mt-5" />
          </div>
          <div className="rounded-[24px] border border-white/10 bg-black/25 p-5 text-sm text-slate-200">
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Linked challenge</div>
            <div className="mt-3 space-y-3">
              {section.show_entries ? <div>Derived entries rail enabled</div> : null}
              {section.show_winners ? <div>Winner section enabled</div> : null}
              {section.show_finalists ? <div>{section.supports_finalists ? 'Finalists section enabled' : 'Finalists section unavailable'}</div> : null}
            </div>
            {section.story?.url ? (
              <div className="mt-4 rounded-[20px] border border-sky-300/15 bg-sky-400/10 p-4">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/80">{section.story.eyebrow || section.story.context_label || 'Challenge story'}</div>
                <a href={section.story.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story.intent === 'recap' ? 'challenge_recap' : 'challenge_story'} data-world-challenge-id={section.id} className="mt-2 block text-base font-semibold text-white transition hover:text-sky-100">{section.story.title}</a>
                {section.story.description ? <p className="mt-2 text-sm leading-6 text-slate-200/85">{section.story.description}</p> : null}
                {storyMeta.length > 0 ? <div className="mt-3 flex flex-wrap gap-2 text-[11px] uppercase tracking-[0.16em] text-slate-400">{storyMeta.map((item) => <span key={item}>{item}</span>)}</div> : null}
              </div>
            ) : null}
            <div className="mt-5 flex flex-wrap gap-3">
              <a href={section.cta_url || section.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story?.intent === 'recap' && section.cta_url === section.story?.url ? 'challenge_recap' : 'challenge_primary'} data-world-challenge-id={section.id} 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">
                {section.cta_label || 'Open challenge'}
                <i className="fa-solid fa-arrow-right" />
              </a>
              {section.story?.url && section.story.url !== section.cta_url ? <a href={section.story.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story.intent === 'recap' ? 'challenge_recap' : 'challenge_story'} data-world-challenge-id={section.id} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{section.story.cta_label || 'Read story'}</a> : null}
              {section.challenge_url && section.challenge_url !== section.cta_url ? <a href={section.challenge_url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key="challenge_direct" data-world-challenge-id={section.id} 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]">Open challenge</a> : null}
              {section.group?.url ? <a href={section.group.url} data-world-event="world_cta_clicked" data-world-section-key="challenge" data-world-cta-key="linked_group" data-world-challenge-id={section.id} 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]">Open group</a> : null}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}