import React, { forwardRef } from 'react'

/**
 * Nova Radio – single choice radio button.
 *
 * Usage (as a group):
 *   {options.map(o => (
 *     <Radio key={o.value} value={o.value} checked={val===o.value} onChange={setVal} label={o.label} />
 *   ))}
 *
 * Or use RadioGroup for a pre-built grouped set.
 */
export const Radio = forwardRef(function Radio(
  { label, hint, size = 18, id, className = '', ...rest },
  ref,
) {
  const dim = typeof size === 'number' ? `${size}px` : size
  const inputId = id ?? (label ? `radio-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined)

  return (
    <label className="inline-flex items-start gap-2.5 cursor-pointer select-none">
      <input
        type="radio"
        id={inputId}
        ref={ref}
        className={[
          'shrink-0 cursor-pointer',
          'border border-white/25 bg-white/8',
          'text-accent checked:bg-accent checked:border-accent',
          'transition-colors duration-150',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-0',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          className,
        ].join(' ')}
        style={{
          width: dim,
          height: dim,
          minWidth: dim,
          minHeight: dim,
          aspectRatio: '1 / 1',
          marginTop: label ? '1px' : undefined,
        }}
        {...rest}
      />

      {(label || hint) && (
        <span className="flex flex-col gap-0.5">
          {label && <span className="text-sm text-white/90 leading-snug">{label}</span>}
          {hint  && <span className="text-xs text-slate-500">{hint}</span>}
        </span>
      )}
    </label>
  )
})

/**
 * RadioGroup – renders a set of Radio buttons from an options array.
 *
 * @prop {Array}    options  - [{ value, label, hint? }]
 * @prop {string}   value    - currently selected value
 * @prop {function} onChange - called with new value string
 * @prop {string}   name     - unique name for radio group (required)
 * @prop {string}   label    - group label
 * @prop {string}   error    - validation error
 * @prop {'vertical'|'horizontal'} direction
 */
export function RadioGroup({ options = [], value, onChange, name, label, error, direction = 'vertical', className = '' }) {
  return (
    <fieldset className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <legend className="text-sm font-medium text-white/85 mb-1">{label}</legend>
      )}

      <div className={`flex gap-3 ${direction === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'}`}>
        {options.map((opt) => (
          <Radio
            key={opt.value}
            name={name}
            value={opt.value}
            checked={value === opt.value}
            onChange={() => onChange(opt.value)}
            label={opt.label}
            hint={opt.hint}
          />
        ))}
      </div>

      {error && <p role="alert" className="text-xs text-red-400">{error}</p>}
    </fieldset>
  )
}

export default Radio