import React, { useState } from 'react'

/**
 * Active / Inactive pill (the reference builder F:7561-7592) with an in-flight guard: while `onToggle(next)` (may return a promise)
 * runs, the pill is disabled and shows a wait cursor, so double clicks cannot send two requests.
 * Props: isActive, onToggle(nextActive) => Promise|void, busy (optional external flag).
 */
export default function ActivePill({ isActive, onToggle, busy = false }) {
  const [inFlight, setInFlight] = useState(false)
  const locked = inFlight || busy
  const click = async () => {
    if (locked || !onToggle) return
    setInFlight(true)
    try {
      await onToggle(!isActive)
    } finally {
      setInFlight(false)
    }
  }
  return (
    <button
      type="button"
      onClick={click}
      disabled={locked}
      aria-pressed={Boolean(isActive)}
      aria-busy={locked}
      aria-label={isActive ? 'Form is active. Click to deactivate' : 'Form is inactive. Click to activate'}
      title={isActive ? 'Active: the form is shown on your site. Click to hide it.' : 'Inactive: the form is hidden on your site. Click to show it.'}
      data-testid="active-pill"
      className={`inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full border text-xs font-medium transition-colors ${locked ? 'cursor-wait opacity-70' : 'cursor-pointer'} ${
        isActive ? 'bg-emerald-50 border-emerald-200 text-emerald-700 hover:bg-emerald-100' : 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100'
      }`}
    >
      <span className={`w-2 h-2 rounded-full ${isActive ? 'bg-emerald-500' : 'bg-gray-400'}`} aria-hidden="true" />
      <span>{isActive ? 'Active' : 'Inactive'}</span>
    </button>
  )
}