import React from 'react'
import { Checkbox } from '../../ui'

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

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

export default function WorldSectionToggleList({ sectionOptions, order, visibility, relationCounts, onChange }) {
  const selected = Array.isArray(order) && order.length > 0 ? order : sectionOptions.map((option) => option.value)

  const move = (index, delta) => {
    const nextIndex = index + delta
    if (nextIndex < 0 || nextIndex >= selected.length) return
    const next = [...selected]
    const [entry] = next.splice(index, 1)
    next.splice(nextIndex, 0, entry)
    onChange(next, visibility)
  }

  const toggle = (key, enabled) => {
    onChange(selected, { ...visibility, [key]: enabled })
  }

  return (
    <div className="grid gap-3">
      {selected.map((key, index) => {
        const option = sectionOptions.find((entry) => entry.value === key)
        if (!option) return null

        return (
          <div key={key} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0 flex-1">
                <Checkbox checked={visibility?.[key] !== false} onChange={(event) => toggle(key, event.target.checked)} label={option.label} size={20} variant="accent" />
                {option.description ? <div className="mt-2 text-sm leading-6 text-slate-400">{option.description}</div> : null}
                <div className="mt-3 flex flex-wrap gap-2">
                  <Pill tone={visibility?.[key] !== false ? 'accent' : 'muted'}>{visibility?.[key] !== false ? 'Visible on public page' : 'Hidden on public page'}</Pill>
                  <Pill tone={(relationCounts?.[key] || 0) > 0 ? 'default' : 'warn'}>{relationCounts?.[key] || 0} attached items</Pill>
                </div>
                {(relationCounts?.[key] || 0) === 0 ? <div className="mt-2 text-xs leading-5 text-slate-500">This section is ready, but it will stay empty until you attach curated items.</div> : null}
              </div>

              <div className="flex gap-2">
                <button type="button" onClick={() => move(index, -1)} disabled={index === 0} className="rounded-full border border-white/10 px-3 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40">Up</button>
                <button type="button" onClick={() => move(index, 1)} disabled={index === selected.length - 1} className="rounded-full border border-white/10 px-3 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40">Down</button>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}