import React from 'react'

function Pill({ children }) {
  return <span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">{children}</span>
}

function ColorSwatch({ label, value }) {
  if (!value) return null

  return (
    <div className="flex items-center gap-2 rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">
      <span className="h-3 w-3 rounded-full border border-white/15" style={{ backgroundColor: value }} />
      <span>{label}</span>
    </div>
  )
}

export default function WorldThemePresetHelper({ theme, onApply }) {
  if (!theme) {
    return null
  }

  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
      <div className="flex items-start justify-between gap-4">
        <div>
          <div className="text-sm font-semibold text-white">{theme.label} preset</div>
          <p className="mt-1 text-sm leading-6 text-slate-400">Preset suggestions fill the campaign basics fast. You can still override every field manually afterwards.</p>
        </div>
        <button type="button" onClick={onApply} className="rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100">
          Apply suggestions
        </button>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <ColorSwatch label={theme.accent_color || 'accent'} value={theme.accent_color} />
        <ColorSwatch label={theme.accent_color_secondary || 'secondary'} value={theme.accent_color_secondary} />
        {theme.background_motif ? <Pill>{theme.background_motif}</Pill> : null}
        {theme.icon_name ? <Pill>{theme.icon_name.replace('fa-solid ', '')}</Pill> : null}
        {theme.suggested_badge_label ? <Pill>{theme.suggested_badge_label}</Pill> : null}
        {theme.suggested_cta_label ? <Pill>{theme.suggested_cta_label}</Pill> : null}
      </div>

      {Array.isArray(theme.related_tags_json) && theme.related_tags_json.length > 0 ? (
        <div className="mt-4">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Suggested related tags</div>
          <div className="mt-2 flex flex-wrap gap-2 text-xs text-slate-400">
          {theme.related_tags_json.map((tag) => <span key={tag} className="rounded-full bg-white/[0.04] px-3 py-1.5">#{tag}</span>)}
          </div>
        </div>
      ) : null}
    </div>
  )
}