/* ─── Barra inferior de actividad ─────────────── */

interface ActivityBarProps {
  preguntaActual?: number
  totalPreguntas?: number
  mensaje: string
  onPrev?: () => void
  onNext?: () => void
  puedeAnterior?: boolean
  puedeSiguiente?: boolean
}

/* ─── Flecha izquierda ────────────────────────── */
function FlechaIzq({ disabled }: { disabled?: boolean }) {
  return (
    <svg viewBox="0 0 24 40" width="28" height="44" fill="none">
      <path
        d="M20 4 L6 20 L20 36"
        stroke={disabled ? '#cbd5e1' : '#DC2626'}
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

/* ─── Flecha derecha ──────────────────────────── */
function FlechaDer({ disabled }: { disabled?: boolean }) {
  return (
    <svg viewBox="0 0 24 40" width="28" height="44" fill="none">
      <path
        d="M4 4 L18 20 L4 36"
        stroke={disabled ? '#cbd5e1' : '#DC2626'}
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export default function ActivityBar({
  preguntaActual = 0,
  totalPreguntas = 0,
  mensaje,
  onPrev,
  onNext,
  puedeAnterior = false,
  puedeSiguiente = false,
}: ActivityBarProps) {
  const counterText = totalPreguntas > 0
    ? `${preguntaActual}/${totalPreguntas}`
    : '0/0'

  return (
    <footer
      className="w-full flex items-center justify-end gap-0 shrink-0"
      style={{
        backgroundColor: '#f8f9fa05',
        height: '80px',
        paddingRight: '0px',
        boxShadow: '0 -1px 4px rgba(0,0,0,0.04)',
      }}
    >
      {/* ─── Instrucción en soporte rojo ─────────── */}
      <div
        className="flex items-center justify-center px-8 py-3"
        style={{
          backgroundColor: '#ee2b33',
          minWidth: '280px',
          borderRadius: '25px 0px 0px 0px',
          boxShadow: '0 2px 6px rgba(238,43,51,0.3)'
        }}
      >
        <span className="text-white font-semibold leading-tight text-center" style={{ fontSize: '22px' }}>
          {mensaje}
        </span>
      </div>

      {/* ─── Botones de navegación ───────────────── */}
      <div
        className="flex items-center gap-3"
        style={{
          height: '100%',
          backgroundColor: 'rgba(255, 255, 255, 0.6)',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.85)',
          padding: '0 16px',
        }}
      >
        <button
          onClick={onPrev}
          disabled={!puedeAnterior}
          aria-label="Anterior"
          className="p-2 rounded-full transition-transform duration-200 cursor-pointer
            disabled:opacity-30 disabled:cursor-not-allowed
            hover:scale-125"
        >
          <FlechaIzq disabled={!puedeAnterior} />
        </button>

        <span className="text-gray-700 font-bold tabular-nums select-none min-w-[60px] text-center" style={{ fontSize: '22px' }}>
          {counterText}
        </span>

        <button
          onClick={onNext}
          disabled={!puedeSiguiente}
          aria-label="Siguiente"
          className="p-2 rounded-full transition-transform duration-200 cursor-pointer
            disabled:opacity-30 disabled:cursor-not-allowed
            hover:scale-125"
        >
          <FlechaDer disabled={!puedeSiguiente} />
        </button>
      </div>
    </footer>
  )
}
