import React from 'react'
import WorldSuggestionActions from './WorldSuggestionActions'
import WorldSuggestionReasonPills from './WorldSuggestionReasonPills'

function TinyBadge({ children, tone = 'default' }) {
  const tones = {
    default: 'border-white/10 bg-white/[0.05] text-slate-200',
    sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
    emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
    amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
    rose: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
  }

  return <span className={`rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] ${tones[tone] || tones.default}`}>{children}</span>
}

export default function WorldSuggestionCard({ item, busyKey, onAddFeatured, onAddSection, onPin, onDismiss, onNotRelevant, onRestore }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
      <div className="flex flex-col gap-4 xl:flex-row">
        <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-[20px] border border-white/10 bg-slate-950">
          {item.image ? <img src={item.image} alt="" className="h-full w-full object-cover" /> : null}
          {!item.image && item.avatar ? <img src={item.avatar} alt="" className="h-full w-full object-cover" /> : null}
          {!item.image && !item.avatar ? <div className="flex h-full w-full items-center justify-center text-slate-500"><i className="fa-solid fa-stars" /></div> : null}
          {item.avatar && item.image ? <img src={item.avatar} alt="" className="absolute bottom-2 left-2 h-9 w-9 rounded-xl border border-white/10 object-cover" /> : null}
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            {item.entity_label ? <TinyBadge tone="sky">{item.entity_label}</TinyBadge> : null}
            {item.category_label ? <TinyBadge>{item.category_label}</TinyBadge> : null}
            {item.signals?.challenge_linked ? <TinyBadge tone="sky">Challenge-linked</TinyBadge> : null}
            {item.signals?.community_submission ? <TinyBadge tone="emerald">Community signal</TinyBadge> : null}
            {item.signals?.recurring_history_informed ? <TinyBadge tone="default">Recurring signal</TinyBadge> : null}
            {item.signals?.analytics_informed ? <TinyBadge tone="amber">Analytics cue</TinyBadge> : null}
            {item.state?.status === 'pinned' ? <TinyBadge tone="amber">Pinned</TinyBadge> : null}
            {item.state?.status === 'dismissed' ? <TinyBadge tone="default">Dismissed</TinyBadge> : null}
            {item.state?.status === 'not_relevant' ? <TinyBadge tone="rose">Not relevant</TinyBadge> : null}
            {item.score_label ? <TinyBadge tone="emerald">{item.score_label}</TinyBadge> : null}
          </div>

          <div className="mt-3 flex flex-wrap items-start justify-between gap-3">
            <div className="min-w-0 flex-1">
              <div className="text-base font-semibold text-white">{item.title}</div>
              {item.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.14em] text-slate-500">{item.subtitle}</div> : null}
            </div>
            <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-200">Score {item.score}</div>
          </div>

          {item.description ? <div className="mt-3 text-sm leading-6 text-slate-300">{item.description}</div> : null}
          {item.context_label ? <div className="mt-3 text-sm font-medium text-sky-100">{item.context_label}</div> : null}
          {Array.isArray(item.meta) && item.meta.length > 0 ? <div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-500">{item.meta.map((entry) => <span key={entry}>{entry}</span>)}</div> : null}

          <WorldSuggestionReasonPills reasons={item.reasons} />

          {item.url ? <a href={item.url} target="_blank" rel="noreferrer" className="mt-4 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 hover:text-white">Open source entity <i className="fa-solid fa-up-right-from-square" /></a> : null}

          <WorldSuggestionActions
            item={item}
            busyKey={busyKey}
            onAddFeatured={onAddFeatured}
            onAddSection={onAddSection}
            onPin={onPin}
            onDismiss={onDismiss}
            onNotRelevant={onNotRelevant}
            onRestore={onRestore}
          />
        </div>
      </div>
    </div>
  )
}