'use client'
import type { ReactNode } from 'react'
import type { RatingOptions } from '@/lib/types'

interface RatingScaleProps {
  name: string
  legend: ReactNode
  ratingOptions: RatingOptions
  value: number | undefined
  required: boolean
  onChange: (value: number) => void
  error?: string
}

export function RatingScale({
  name,
  legend,
  ratingOptions,
  value,
  required,
  onChange,
  error,
}: RatingScaleProps) {
  const { min, max, min_label, max_label } = ratingOptions
  const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)

  return (
    <fieldset className="question-fieldset">
      <legend className="question-legend">
        {legend}
        {required && <span className="required-mark" aria-hidden="true"> *</span>}
        {required && <span className="sr-only"> (obligatorio)</span>}
      </legend>
      <div className="rating-wrapper" role="group" aria-label={`Escala ${min} a ${max}`}>
        <span className="rating-label rating-label-min" aria-hidden="true">
          {min_label}
        </span>
        <div className="rating-steps">
          {steps.map((step) => {
            const id = `${name}_${step}`
            return (
              <label key={step} className="rating-step" htmlFor={id}>
                <input
                  type="radio"
                  id={id}
                  name={name}
                  value={step}
                  checked={value === step}
                  onChange={() => onChange(step)}
                  aria-required={required}
                  aria-label={`${step} — ${step === min ? min_label : step === max ? max_label : ''}`}
                  className="rating-input sr-only"
                />
                <span className="rating-dot" aria-hidden="true">
                  {step}
                </span>
              </label>
            )
          })}
        </div>
        <span className="rating-label rating-label-max" aria-hidden="true">
          {max_label}
        </span>
      </div>
      {error && (
        <p role="alert" className="field-error" id={`${name}-error`}>
          {error}
        </p>
      )}
    </fieldset>
  )
}