'use client'
import { DEPARTMENTS, getCities } from '@/lib/paraguay-geo'

interface GeoSelectWidgetProps {
  departmentValue: string
  cityValue: string
  onDepartmentChange: (value: string) => void
  onCityChange: (value: string) => void
  departmentError?: string
  cityError?: string
}

export function GeoSelectWidget({
  departmentValue,
  cityValue,
  onDepartmentChange,
  onCityChange,
  departmentError,
  cityError,
}: GeoSelectWidgetProps) {
  const cities = departmentValue ? getCities(departmentValue) : []
  const cityDisabled = !departmentValue

  function handleDepartmentChange(val: string) {
    onDepartmentChange(val)
    onCityChange('') // limpiar ciudad al cambiar departamento
  }

  return (
    <div className="geo-select-wrapper">
      {/* Departamento */}
      <div className="geo-select-group">
        <label className="question-legend" htmlFor="A1">
          <span className="q-code">A1 ·</span> Departamento
        </label>
        <select
          id="A1"
          name="A1"
          value={departmentValue}
          onChange={(e) => handleDepartmentChange(e.target.value)}
          aria-invalid={!!departmentError}
          aria-describedby={departmentError ? 'A1-error' : undefined}
          className="geo-select"
        >
          <option value="">Seleccioná un departamento…</option>
          {DEPARTMENTS.map((dept) => (
            <option key={dept} value={dept}>{dept}</option>
          ))}
        </select>
        {departmentError && (
          <p role="alert" className="field-error" id="A1-error">{departmentError}</p>
        )}
      </div>

      {/* Ciudad */}
      <div className="geo-select-group">
        <label
          className={`question-legend${cityDisabled ? ' geo-label-disabled' : ''}`}
          htmlFor="A2"
        >
          <span className="q-code">A2 ·</span> Ciudad
          {cityDisabled && (
            <span className="geo-disabled-hint"> (seleccioná un departamento primero)</span>
          )}
        </label>
        <select
          id="A2"
          name="A2"
          value={cityValue}
          onChange={(e) => onCityChange(e.target.value)}
          disabled={cityDisabled}
          aria-disabled={cityDisabled}
          aria-invalid={!!cityError}
          aria-describedby={cityError ? 'A2-error' : undefined}
          className={`geo-select${cityDisabled ? ' geo-select-disabled' : ''}`}
        >
          <option value="">
            {cityDisabled ? 'Primero seleccioná el departamento' : 'Seleccioná una ciudad…'}
          </option>
          {cities.map((city) => (
            <option key={city} value={city}>{city}</option>
          ))}
        </select>
        {cityError && (
          <p role="alert" className="field-error" id="A2-error">{cityError}</p>
        )}
      </div>
    </div>
  )
}